What a set expands into
One control, several rules. Five widths and two pixel ratios is ten rules, and they are ordinary rules once they are expanded — the plan, the collision check and the ledger treat them exactly like anything you wrote by hand. The one thing the expansion does that a hand-written rule cannot is drop a width larger than the source instead of enlarging into it.
photo-01-320.webp 320×213 18 KB
photo-01-640.webp 640×427 41 KB
photo-01-960.webp 960×640 79 KB
photo-01-1280.webp 1280×854 128 KB
photo-01-1920.webp 1920×1281 271 KBWith pixel ratios on, the naming changes to {name}-{w}@{dpr}x.{ext} and each width is written once per ratio. The w descriptor in the markup is the real pixel width of the file, not the CSS width it was asked for, which is the part that is easy to get wrong by hand.
The markup
<img
src="photo-01-1920.webp"
srcset="photo-01-320.webp 320w, photo-01-640.webp 640w,
photo-01-960.webp 960w, photo-01-1280.webp 1280w,
photo-01-1920.webp 1920w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 1920px"
width="1920" height="1281" alt="">The sizes attribute printed beside the plan is a starting point, not an answer. It describes a picture that is full width on a phone, half width on a tablet and fixed on a desktop; if your layout is not that, the attribute is the thing to change, because it is what the browser reads before it has laid anything out.
Choosing the widths
The default list — 320, 640, 960, 1280, 1920 — is a reasonable spread for a full-bleed image and too many files for a thumbnail. Two things are worth knowing:
- Browsers pick the smallest candidate that is at least as wide as they need. Gaps larger than about 400px start to waste bytes on the device that lands in the middle of one.
- A 3x variant of a 1920 is 5760 pixels wide. It exists for a phone that will show it at 1920 CSS pixels, and it is several hundred kilobytes for a difference most people cannot see. 1x and 2x cover almost everything.
| Where the image sits | A sensible list | Ratios |
|---|---|---|
| Full-bleed hero | 640, 960, 1280, 1920 | 1x, 2x |
| Half-width article image | 480, 768, 1024 | 1x, 2x |
| Catalogue grid tile | 240, 360, 480 | 1x, 2x |
| Avatar or icon | 48, 96 | 1x, 2x, 3x |
This will not tell you which widths your layout needs
The lists above are conventions, not measurements. The right set depends on your breakpoints and on how much of the viewport the image occupies at each one, and nothing on this page can see either. Pick from your own CSS, then come back and write the list.
The eight naming tokens, and what happens when two sources want the same output name, are on the naming reference.
