Performance
sizes attribute
Also called sizes.
sizes attribute is the `sizes` value on an `<img>` or `<source>` that tells the browser how wide the image will be in the layout, before CSS has loaded. The browser uses it to choose a file from `srcset`.
How it is measured
Compare declared sizes with actual rendered width at several viewport widths. Resize the window, read the `<img>` rendered width in DevTools, and check the chosen file in `currentSrc` in the console.
The browser takes the slot width, multiplies by device pixel ratio, and picks the closest `srcset` candidate. With `sizes=(min-width:1024px) 33vw, 100vw`, a 1280 px window gives a slot of about 427 px, and a 2x screen asks for roughly 854 px. With no `sizes`, the default is 100vw.
Worked example
A magazine grid shows 3 columns above 1000 px, 2 above 600 px, and 1 below. Its images use a `srcset` of 400w, 800w, 1200w, and 1600w with no `sizes`. A 1440 px laptop gets the 1600w file at 310 KB for a 480 px slot.
Adding `sizes=(min-width:1000px) 33vw, (min-width:600px) 50vw, 100vw` makes it pick the 800w file at 84 KB. Twelve cards fall from 3.7 MB to 1.0 MB.
How it differs
srcset lists which files exist and how wide each is; sizes says how wide the slot will be. Neither works properly alone, since `srcset` without `sizes` assumes the full viewport width. `sizes` describes layout, and it never downloads anything itself.
Common errors
Omitting `sizes`. Writing pixel values that disagree with the CSS. Putting media conditions in the wrong order, when the first match wins. Forgetting padding and gaps that shrink the slot. Changing the layout without updating `sizes`.
In practice
For each image template, read the CSS breakpoints and write `sizes` to match, widest condition first. Verify with `currentSrc` at three window widths. When the layout changes, change `sizes` in the same commit.