Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →The reliable way to find broken images is to combine two checks: inspect image requests in the browser’s Network panel, then verify the rendered DOM with naturalWidth and error events. Network data explains whether a URL, server, redirect, permission, or content type failed; the DOM check confirms whether the browser actually decoded usable image data. For a whole site, repeat those checks across templates, authenticated pages, localized variants, and lazy-loaded content.
What counts as a broken image?
An image is broken when the browser cannot display usable image data. Common causes include a 404 or 410 file miss, a 500 or 503 origin failure, an incorrect filename case, a blocked request, a mixed-content or CORS problem, an expired signed URL, or a response that contains HTML or JSON instead of an image. A server can return 200 OK and still deliver corrupt or unsupported data, so HTTP status alone is not enough.
Keep separate acceptance criteria for three problems that are often confused:
- Loading: the browser receives and decodes an image.
- Accessibility: the image has appropriate alternative text. Missing or unsuitable
alttext is not proof that the file is broken. - Presentation and delivery: the image remains usable at narrow widths, high zoom, and different art-direction variants, and is not unnecessarily large.
Manual test in Chrome or another current browser
- Open the page and perform a clean reload. If content is protected, sign in first and record that you tested the authenticated view.
- Open DevTools and choose Network. Reload, then filter the request list to image resources.
- Inspect suspicious requests. Record the final URL after redirects, status, response headers, content type, cache state, and initiator.
- Look for failed status codes, redirect loops, blocked requests, mixed-content or CORS errors, and responses whose body is HTML or JSON.
- Compare the request with what is rendered. A request that reports 200 is not conclusive if the image shows a broken icon.
- After lazy content appears, run the DOM check below. Scroll through the page or trigger “load more” controls first.
- Fix the URL, filename case, deployment path, permissions, CDN rule, format, or transform that the evidence identifies. Retest with cache disabled or a hard reload, then check more than one viewport.
What to record for each failure
- Source URL and final URL after redirects
- HTTP status and response content type
- Whether the response came from memory or disk cache, a service worker, a CDN, or the origin
- Console errors, request initiator, and relevant request headers
- Whether the image was in initial HTML, inserted by JavaScript, selected by
srcset/picture, or loaded only after scrolling
Detect broken images with JavaScript
Run this in the page’s DevTools Console after the page has settled:
#1 Best Overall
const broken = [...document.images].filter(img => img.complete && img.naturalWidth === 0);
console.table(broken.map(img => ({
src: img.currentSrc || img.src,
alt: img.alt
})));
naturalWidth is the intrinsic, density-corrected width available to the browser. A value of zero means intrinsic image data is unavailable. The complete guard avoids flagging an image whose request is still in progress. Run the check again after lazy-loaded content appears.
Capture failures as they happen
const failures = [];
document.querySelectorAll('img').forEach((img) => {
img.addEventListener('error', () => {
failures.push({ src: img.currentSrc || img.src, alt: img.alt });
}, { once: true });
});
console.log('Watching', document.images.length, 'images');
This listener catches future failures, including images inserted after the script runs. For a more complete browser test, attach the listener before navigation in an automation tool and wait for the page’s own lazy-loading triggers.
Check every image source, not just the current one
Responsive markup may contain URLs in srcset, picture sources, CSS backgrounds, or JavaScript data. The browser check verifies the selected resource. A crawler should also extract candidate URLs, while a rendered-browser pass verifies which candidate the browser actually chooses at each viewport and device pixel ratio.
Automate a repeatable site check
Choose the right coverage
| Method | Best use | Important limitation |
|---|---|---|
| DevTools | Diagnosing one page and examining headers and bodies | Manual and difficult to schedule |
| HTTP crawler | Finding missing URLs quickly across many pages | Cannot prove browser decoding, layout, or JavaScript-inserted images |
| Browser script | Testing lazy loading, srcset, authentication, and rendered state |
Slower and needs session, viewport, and wait-time management |
| Scheduled monitor | Detecting regressions after deployments | Coverage depends on the URL and template inventory; a page audit is not a guarantee for every site URL |
For useful confidence, combine an HTTP pass with a rendered-browser pass. Crawl representative templates, authenticated areas, localized routes, and pages that generate content from APIs. Save the URL, status, final URL, content type, and browser result so a later run can distinguish a new failure from a known exception.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
Example browser-side assertion
async function findBrokenImages({ settleMs = 1500 } = {}) {
await new Promise(resolve => setTimeout(resolve, settleMs));
return [...document.images]
.filter(img => img.complete && img.naturalWidth === 0)
.map(img => ({
src: img.currentSrc || img.src,
alt: img.alt,
loading: img.loading
}));
}
findBrokenImages().then(result => {
if (result.length) {
console.error('Broken images:', result);
throw new Error(`${result.length} broken image(s)`);
}
console.log('No decoded-image failures found');
});
In automation, wait for a known content selector, network idle, or an application-ready signal rather than relying only on a fixed delay. Then scroll the page to trigger lazy loading and run the assertion again.
Interpret the evidence correctly
404 or 410
The Network panel identifies a missing resource. Correct the URL, filename, capitalization, deployment path, or stale CMS reference. Check whether a redirect should exist and whether the CDN has the newly deployed file.
500 or 503
Investigate the origin, deployment, image transformation service, and CDN health. Retest after recovery; do not “fix” the page by hiding the error.
200 but a broken icon
Inspect the response body and content type. Confirm that the body is a decodable image, not an error document, login page, JSON response, truncated stream, or incorrectly transformed format. Then run the naturalWidth check.
Only some visitors fail
Compare authentication, region, language, cookies, cache keys, user agent, and CDN variation. A signed URL may expire for one session, or an origin rule may behave differently by geography.
The image loads but overflows or disappears at zoom
This is a responsive-layout failure, not a broken file. Test narrow and wide viewports and 400% zoom. Constrain images with responsive sizing such as an appropriate maximum width and height behavior, then verify that reflow does not introduce unwanted horizontal scrolling.
The image loads but is very heavy
Use an image-delivery audit to find assets whose rendered dimensions are substantially smaller than the downloaded file. Serve an appropriately sized responsive asset; keep this performance issue separate from load-failure reporting.
Edge cases a site-wide test must include
- Lazy loading: scroll, expand accordions, open carousels, and trigger infinite-scroll batches before asserting.
- Authentication: run with the same signed-in role that users need; record the scope because a public crawl cannot validate private images.
- Localization and geography: test translated routes, region-specific CDNs, and geolocation-dependent assets.
- Responsive variants: test mobile and desktop widths, device pixel ratios,
picture, andsrcsetselections. - Generated URLs: include JavaScript, API, CMS, and CSS-generated images, not only
srcattributes in initial HTML. - Service workers and caches: repeat with a cold cache when diagnosing deployment issues, then test the normal cached path for users.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server when you need a rendered result without maintaining browser infrastructure. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.
One request can capture PNG, JPEG, WebP, or PDF. Options include full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, PDF paper and page controls, custom CSS and JavaScript, clicks, selector waits, delays, network-idle waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. Parameter names used by other screenshot APIs also work.
Use the ScreenshotNeo documentation for the complete option list. A direct cURL capture is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)
Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients, so an AI agent can inspect pages as part of a workflow. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Sign up free for ScreenshotNeo.
Cost, reliability, and false positives
HTTP-only checks are inexpensive and fast but can report a URL as healthy when the browser cannot decode it. Browser checks cost more time and compute, yet they catch JavaScript insertion, authentication, redirects, and format failures. Reduce false positives by waiting for the application-ready state, recording the final URL, distinguishing cache hits from origin responses, and allowing known intentionally empty images. Keep a failure artifact—request details, console output, screenshot, and DOM data—so developers can reproduce the exact state.
Free tools Windows power users keep installed
One-click scans. No signup required.
Frequently Asked Questions
Does a 404 prove that an image is broken?
A 404 or 410 is strong evidence that the requested resource is missing, but test the final redirected URL and the rendered page as well. A different URL may be selected by responsive markup.
Why can an image return 200 and still fail?
The response may contain HTML, JSON, corrupt bytes, an unsupported format, or data that a transformation service truncated. Check the body and content type, then verify naturalWidth.
Should missing alt text be reported as a broken image?
No. Alternative text is an accessibility criterion. Report it separately from whether the browser loaded and decoded the image.
How often should automated image checks run?
Run them after deployments and on a schedule appropriate to how frequently content and image URLs change. Include representative templates and authenticated or localized scopes rather than assuming one page represents the entire site.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
