Reputifly editorial · Reviewed 27 September 2026 · 2 min read
Trace the image actually requested by the page, then check delivery, decoding and layout before replacing the file.
A working file is only one part of the check
A page can show a broken image even when opening a copied image URL succeeds. The page may have requested a different responsive source, received a temporary error or loaded before a lazy-loading trigger ran. Inspect the failing page in its original state before refreshing away the evidence.
Check the actual request
In browser developer tools, select the image and inspect its current source. A picture element or srcset can choose a different file from the img src attribute. In the network panel, check the requested URL, HTTP status, content type and response size. A 200 response containing an HTML error page is not a valid image.
See the browser reference for HTMLImageElement.currentSrc when checking responsive sources.
Separate delivery, decoding and visibility
- Delivery: did the browser receive the file successfully?
- Decoding: can the browser decode its image format, and does it report a nonzero natural width?
- Visibility: is the image hidden, clipped, transparent or waiting outside a lazy-loading threshold?
These require different repairs. Changing CSS cannot fix a missing file; replacing a valid file does not fix a hidden element.
Use a bounded fallback
For an intermittent delivery failure, one delayed retry and a known valid fallback can improve recovery. Avoid endless retries, particularly when the server is already struggling. If a picture element still controls the selected source, changing only the img src may not change the request you intended.
Keep useful alternative text and reserve the image dimensions so a failure or recovery does not shift the entire page.
Verify the failure path deliberately
In a development check, block the specific image request and confirm the fallback appears. Remove the block and reload the public page normally afterwards. Record both results. Also investigate repeated origin or CDN failures; a fallback improves resilience but does not repair an unhealthy server.
