Find Broken Images on a Website: Three Free Ways

Short answer: open the page, open the browser console and run one line of JavaScript. It lists every <img> on the page that failed to load. For anything beyond that, such as responsive srcset candidates, lazy-load attributes and CSS backgrounds, use the broken image checker.

Method 1: the network panel

In Chrome DevTools, the Network panel records every request the page makes. Chrome's documentation says to focus on one type of file by clicking its filter button, which filters out all other types (Chrome DevTools: Inspect network activity, page undated). Choose the images filter, reload the page and scan the list for requests that did not succeed.

Method 2: a console snippet

This runs against whatever the page has loaded so far:

[...document.images]
  .filter(img => img.complete && img.naturalWidth === 0)
  .map(img => img.currentSrc || img.src);

It works because of how browsers describe a failed image. MDN says an image counts as completely loaded, complete is true, when it is "broken", meaning it failed to load because of an error or because image loading is disabled (MDN: HTMLImageElement complete, page undated). So complete alone cannot find a broken image. A broken image has no intrinsic width, so adding naturalWidth === 0 isolates it.

We tested the snippet in a current Chromium browser with a working image, a missing file and a corrupt image. The working one reported complete: true with its real width, and the other two reported complete: true with naturalWidth: 0, so the snippet returned exactly those two.

What the snippet misses

• Images the browser has not loaded yet. An image that has not been fetched cannot be judged. If the page lazy-loads images, scroll the whole page first, then run the snippet.
• Images with no declared size. A vector image without a declared size may report no width even when it displays. Open any SVG the snippet lists in a browser before you treat it as broken.
• CSS background images are not <img> elements, so this does not see them.
• Only what is on the page right now. It does not follow links to other pages.

Method 3: check a whole page at once

The broken image checker loads each image and reports whether it resolves. It works from pasted HTML or a list of URLs, runs in your browser and uploads nothing. It looks at srcset candidates, lazy-loading attributes such as data-src, picture sources and CSS background images, and it reports redirects and timeouts as failures.