Performance
srcset
srcset is an `<img>` or `<source>` attribute that lists several image files with their widths or pixel densities. The browser picks one based on slot size and screen density.
How it is measured
Write candidates with width descriptors, such as `photo-480.jpg 480w, photo-960.jpg 960w`. Check which one loaded in the Network panel, or read `img.currentSrc` in the console. Three to five candidates is typical, and more is rarely worth the storage.
Density descriptors (`1x`, `2x`) suit fixed-size images like logos. Width descriptors suit fluid images and need `sizes`. The browser may reuse an already cached larger candidate, so a resize does not always trigger a new request.
Worked example
A shoe retailer has a product tile 360 px wide. Its `srcset` offers 360w, 720w, and 1080w WebP files at 18 KB, 52 KB, and 104 KB. An iPhone at 3x asks for the 1080w file, and a budget Android at 1x uses the 360w one.
With 20 tiles on a typical category page, the mix saves roughly 1 MB per mobile session compared with always sending the 1080w file.
How it differs
srcset is the list of choices. The sizes attribute describes the layout slot so the browser can do the arithmetic. `srcset` without `sizes` assumes 100vw, and `sizes` without `srcset` does nothing at all.
Common errors
Mixing `w` and `x` descriptors in one attribute. Listing candidates that are not real files. Forgetting a plain `src` fallback. Offering candidates with different crops and no `<picture>`. Defining fifteen breakpoints for no reason.
In practice
Pick three or four widths that cover your common slots, such as 400, 800, 1200, and 1600, and let your build or image CDN generate them. Add `sizes`. Check `currentSrc` in phone emulation at 2x to confirm it is not always the biggest file.