Synthetic teaching example for a website delivery brief. Not a client result, live account test or certification.
A small displayed image can still download a large file
For a new portfolio page, ask the supplier to demonstrate the actual image request at the intended viewport and pixel density. CSS dimensions alone do not show which resource was downloaded. A large source scaled down visually can still consume the large transfer.
| Resource | Intrinsic dimensions | Role |
|---|---|---|
| bands-320.png | 320 × 160 | Small candidate |
| bands-640.png | 640 × 320 | Fallback and medium candidate |
| bands-1280.png | 1280 × 640 | Larger candidate for an appropriate slot/density |
Use the filled example
Download the finite Node checker and filled input. Run with Node 24 or newer; no account, API or network is used.
node checks.mjs responsive-image-delivery responsive-image-delivery.jsonThe JSON output describes the source list and slot hint; actualCurrentSrc remains MUST_MEASURE_IN_BROWSER. On this page, inspect the sample image’s currentSrc, network response and displayed rectangle. Repeat at 390, 768 and 1440 CSS pixels and record devicePixelRatio. Use a fresh context or note cache reuse; a previous large download can affect later observations.
Agree the result before claiming a performance improvement
The browser chooses among candidates using the available information; do not promise that every phone always downloads the 320px file. The sizes expression is a hint about layout, so compare it with the actual displayed slot. Supply correct intrinsic dimensions to reserve space and inspect loading behaviour in the final layout.
These deliberately simple bands are generated at three true dimensions. They are not a compression benchmark and do not establish any LCP improvement. A real image brief also needs subject detail, quality and measured bytes. This guide adds a new demonstration only; the homepage raven, its mask and all existing imagery remain unchanged.
Primary facts and limits
MDN responsive images: Explains width candidates and sizes hints; resource choice depends on the browser and display conditions.
Sources reviewed 15 October 2026. The supplied input and acceptance rules are original teaching design; check current platform versions and your actual delivery contract before implementation.