The short version
Use srcset to offer image candidates, sizes to describe the image's expected layout width before CSS finishes, and picture when art direction or format conditions require different sources. The browser—not JavaScript—then chooses an appropriate candidate for viewport, layout and device density.
What matters most
- srcset lists real file widths; sizes describes rendered layout width.
- The browser selects a candidate and may reuse a larger cached file.
- picture is for source conditions, formats or different compositions.
How to apply it
- Measure the image's rendered width at meaningful layout breakpoints.
- Generate optimized candidates from one high-quality master without upscaling.
- Write width descriptors in srcset and a matching sizes expression.
- Use picture only for art direction or controlled format alternatives.
- Test network requests, intrinsic dimensions, lazy loading and layout stability.
Reference table
| Feature | Purpose | Example decision | Common mistake |
|---|---|---|---|
| srcset | Lists candidates | 480w, 960w, 1440w | Using CSS widths as file widths |
| sizes | Predicts layout slot | 100vw below breakpoint | Writing image pixel dimensions |
| picture | Art direction/formats | Portrait source on mobile | Using for ordinary resolution switching |
| width/height attrs | Aspect ratio reservation | 1600 and 900 | Omitting and causing layout shift |
Use exact dimensions and units in production notes; familiar labels can describe more than one standard.
Give the browser the three inputs it needs
The browser knows viewport width and device pixel ratio, but it cannot reliably infer a future CSS layout slot while parsing early HTML. srcset supplies candidate file widths; sizes supplies an estimate of the rendered slot. Together they let the browser select enough intrinsic pixels.
For an image that occupies 100vw below 700px and 50vw above it, sizes might be “(max-width: 699px) 100vw, 50vw”. Candidate descriptors such as 480w and 960w must match the actual intrinsic widths of those files.
- Use truthful width descriptors.
- Describe layout, not desired download size.
- Order size conditions from first match to fallback.
Understand layout pixels and device pixels
A 400-CSS-pixel slot on a DPR 2 screen may benefit from roughly 800 intrinsic pixels. The browser combines slot estimate, density, zoom, network behavior and cache state when selecting a candidate. It is allowed to choose differently from a simple formula.
Do not test selection only by resizing one tab after a large image has loaded. Disable cache or start a fresh context and inspect actual network requests. Visual correctness, transfer size and layout stability all matter.
- Multiply slot width by DPR as a planning estimate.
- Expect browser discretion.
- Test with cache behavior understood.
Use picture for art direction
Resolution switching keeps the same composition at different intrinsic widths. Art direction supplies a different crop or composition for a media condition—for example, a tight portrait image on narrow screens and a wider environmental image on desktop.
Each source still needs appropriate srcset candidates, and img remains the fallback plus semantic alt-text owner. Do not change the informational subject across sources in a way that makes one viewport miss content described in surrounding text.
- Reserve picture for meaningful source changes.
- Keep alt text valid for all variants.
- Provide a dependable img fallback.
Protect performance and layout stability
Set width and height attributes matching the source aspect ratio so the browser reserves space before download; CSS can still make the rendered image fluid. Use loading=lazy for appropriate below-the-fold content, but avoid lazily loading a likely largest-contentful image.
Compress every candidate sensibly and avoid tiny increments that create storage and maintenance without meaningful savings. Measure real pages with representative devices. Responsive markup is useful only when it reduces unnecessary bytes without delaying important imagery or changing composition unexpectedly.
Common mistakes to avoid
- Writing srcset but omitting an accurate sizes value.
- Generating candidates larger than the source.
- Expecting the browser to download a smaller file after a larger one is cached.
- Removing width and height attributes because CSS is responsive.
Continue with the right tool
Use a calculator to check the numbers against your own source and destination instead of relying on a generic preset.
Related guides
Frequently asked questions
What is the difference between srcset and sizes?
srcset describes available files; sizes describes the layout slot the image is expected to occupy.
Do I need picture for WebP or AVIF?
It can provide explicit format fallback, although support and content-negotiation workflows vary.
Why did the browser choose a larger image?
Device density, rounding, caching and browser heuristics can favor a larger candidate.
Should responsive images use JavaScript?
Native HTML selection is normally preferable because the browser can choose during resource discovery.
Sources and further reading
These references support the technical definitions and platform-specific guidance used above.
- MDN — Responsive imagesTechnical reference for srcset, sizes and picture behavior.
- HTML Living Standard — Embedded contentNormative browser image-selection model.