Broken images: why readers see a missing image and how to fix it

What it is

The page contains an <img>, a responsive srcset candidate, a social-preview image, an icon, or a CSS background-image whose URL no longer serves image bytes. The HTML still looks valid, so a markup-only audit passes it; only requesting the URL exposes the failure.

Why it matters

Broken images make a page look unfinished and erode trust at the exact moment a reader is deciding whether to stay. They also remove the image from Google Images and can leave an LCP slot empty, which hurts perceived load quality. A single deleted hero image can affect every page that uses the same template.

How to fix it

1. Find the exact image URL. Open the scan issue and copy the failing URL from the evidence. The page URL tells you where it appears; the status tells you whether the file is gone (404/410), the host is failing (5xx), or an HTML block page answered (200 text/html).
2. Restore or replace the asset. Re-upload the file at the same path, or point the reference at a live copy. For a shared stylesheet, fix the background URL once and every page that loads it recovers.
3. Update responsive and social variants. Check every srcset candidate, the og:image and twitter:image meta tags, and the favicon links. A working src does not prove the 2x candidate or the social preview still exists.
4. Re-scan to confirm. Run the monitor again. The broken_images group should disappear for that page, and the health score should recover the warning deduction.