10 · Responsive images: srcset, sizes and selection

Understand the mechanism

CSS changes display size without necessarily reducing downloaded bytes. Responsive images let the browser choose from real resources using layout size and pixel density. Width descriptors describe actual intrinsic widths; prepare genuine variants instead of labeling one large file with several widths.

sizes describes the layout slot for width-based selection; it does not set CSS dimensions. A capped 720-pixel image with sizes always set to 100vw can over-download on wide screens. Keep layout rules and the declared slot consistent.

picture supports art direction and format conditions, with ordered source matching and an img fallback carrying semantics. Different crops are art direction; resolution alone does not require a new composition. Put meaningful alternative text on img.

Declare width and height to reserve aspect ratio, then scale with CSS. Consider lazy loading for off-screen content, not automatically for a critical first image. Measure requests and layout shifts rather than counting optimization attributes.

Runnable example

Run HTML examples as separate .html files in a modern browser. Prepare resource files and multi-file modules as described in the lesson.

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<style>.photo{width:min(100%,720px)}.photo img{max-width:100%;height:auto}</style>
<figure class="photo">
<img src="images/workspace-960.jpg"
 srcset="images/workspace-480.jpg 480w, images/workspace-960.jpg 960w, images/workspace-1440.jpg 1440w"
 sizes="(max-width:760px) calc(100vw - 40px), 720px"
 width="1440" height="960" alt="A workspace with a notebook beside a laptop">
<figcaption>Prepare three real image sizes before testing.</figcaption>
</figure>
</body></html>

Trace and verify

Prepare three real 3:2 images and use 20-pixel horizontal body spacing to match sizes. Disable cache and reload at 375 and 1280 pixels. Inspect currentSrc and naturalWidth. Pixel density and previously downloaded resources affect results, so resizing alone is not a conclusive selection test.

Common mistakes and boundaries

The example requires your own assets. Do not mix width and density descriptors in one srcset. Useful alt text remains important when paths fail; declared dimensions do not guarantee a resource exists.

Practice challenge

Add a close crop below 600 pixels using picture while retaining desktop candidates. Record currentSrc, transfer size and composition at two widths.

Reference solution and reasoning

Place a media-qualified source before img for the mobile crop. Keep fallback, alt and dimensions on img. Verify that the subject remains clear, not merely that transfer size decreases.

Further reading

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture