srcset, sizes, and the attribute everyone forgets
The widths worth generating, the markup that uses them, and a plain account of what sizes is actually for.
srcset, sizes, and the attribute everyone forgets
The widths worth generating, the markup that uses them, and a plain account of what sizes is actually for — because getting it wrong makes the browser pick the wrong file.
What sizes actually does
sizes tells the browser how wide the image will be laid out, and it has to do so before any CSS has loaded. The browser uses it, with the device pixel ratio, to pick a file from srcset.
Get it wrong and the choice is wrong: too large wastes the download, too small looks soft. The default when sizes is omitted is 100vw, which is right for a full-bleed hero and wrong for a thumbnail in a sidebar.
The estimated file sizes below are an order of magnitude, not a promise. They assume roughly 0.12 bytes per pixel, which is where photographic WebP lands at a reasonable quality. A flat graphic compresses far better; a noisy photograph far worse.
width and height are not the size
Setting them on the element gives the browser the aspect ratio before the file arrives, so it can reserve the right space and the page does not jump. CSS still controls how big it is displayed.
Leaving them off is one of the most common causes of layout shift, and it costs nothing to fix.
Three densities is usually too many
A 3× file is four times the bytes of a 1.5× one and the difference is invisible on a phone at arm's length. Most sites stop at 2×, and a good many are better off stopping at 1.5×.
alt is not optional
alt="" is correct and meaningful: it says the image is decorative and should be skipped. A missing alt attribute says nothing, and a screen reader falls back to reading the filename.