Follow one failing image from generated HTML to the final response. Preserve each URL in the chain before changing rewrite rules.
Capture a single reproducible failure
Pick one broken image and save its markup, currentSrc, request URL, status and final URL after redirects. Record whether it fails for all visitors or only at one viewport. A responsive candidate can be broken while the original still works. Check the Console for a policy error as well: a browser refusal is different from a server returning a missing-file response.
Compare origin and delivery paths carefully
If your hosting setup exposes an authorized origin URL, request the corresponding source through the host’s documented method. Do not invent a bypass address or change DNS for the investigation. Compare the origin result with the CDN result. A missing origin derivative points toward generation or path handling; a successful origin response narrows the investigation toward rewriting, distribution or edge state.
Inspect transformations and path encoding
Look for resize parameters, extension changes, directory prefixes and encoded characters. Compare a working image produced by the same component. A rewrite may assume that every upload has a corresponding optimized file, while an older upload was never converted. Do not remove all URL parameters blindly: some specify the actual derivative or authorize the request.
Correct the responsible stage
Restore a missing derivative using the media tool that owns it, or correct the template/CDN rewrite that requested an invalid path. Test on staging before a bulk regeneration. If a previously missing response is retained by the delivery layer, use the provider’s targeted purge mechanism after the origin is fixed. Purging alone cannot create the missing file.
Verify fallbacks and different candidates
Reload at narrow and wide widths and inspect each selected request. Check image galleries and any fallback source used by unsupported formats. Confirm successful rendering with useful alternative text and no repeated redirect loop. Keep the original asset and prior rewrite configuration until verification finishes. Give support the failing and working URL pair rather than only a screenshot of the broken icon.
Symptom-to-cause worksheet
| What you observe | What to investigate | Next check |
|---|---|---|
| Only small-screen candidate fails | Missing resized derivative | Request that candidate directly |
| Origin succeeds, CDN returns missing | Rewrite or edge distribution issue | Compare transformation and path |
| All paths fail at origin | Source or derivative absent | Restore through the media owner |
Worked investigation scenario
This is an illustrative case, not a measured Velonic result. Suppose the wide image works but the phone’s selected small derivative returns 404. Check whether the small file exists before modifying the CDN policy. After regenerating that derivative through the media owner, request it through the delivery path and perform a targeted purge if needed. Retest the actual phone-width page and its fallback. The acceptance test is successful candidate selection and rendering, not just a working original-file URL.
Put it into practice
- Capture currentSrc and the final response status.
- Compare a working asset with the same rewrite pattern.
- Fix the source problem before purging delivery caches.
AI-assisted educational content prepared for the Velonic resource library. How these guides are prepared.