Article Update: Don’t Rely on Default `sizes`

In “Responsive Images in Practice” I made no little hay that sizes was optional—leave it off, and browsers will substitute the default value: 100vw.

That last part is still true: browsers will still use 100vw as a last resort. While the sizes-less examples in the article still function, they no longer validate. The spec has changed, and sizes is no longer optional when using srcset and w descriptors.

Why?

Too many people were relying on the invisible default for images whose display size wasn’t even close to 100vw, resulting in inappropriate srcset selections and wasted bytes. Developers learning the new markup were also getting tripped up on how sizes affects intrinsic sizing. Absent any CSS to the contrary…

<img srcset="image.jpg 320w" />

…always displays at the full viewport width. If you don’t know about the 100vw default (and especially if you’re a little fuzzy on what intrinsic sizing is, or how sizes affects it), that’s pretty surprising.

By requiring that authors explicitly state (and with any luck, think about) a sizes value whenever they use w descriptors, the spec eliminates reliance on the invisible 100vw default. This will hopefully cut down on mistakes; at a bare minimum, it ensures that incorrect values are visible. So carry on, and if you want your markup to be valid, easier to debug, and easier to understand—don’t forget the sizes.