In “Responsive Images in Practice” I made no little hay that
sizes was optional—leave it off, and browsers will substitute the default value:
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
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
2 Reader Comments
what I am still missing from the whole responsive images discussion. If I have a “stage teaser” (or however you call it in English) like here:
http://praxisklinik-ahnefeld.de/ (The photo of the two doctors, stretching across the whole screen)
What are the exact and best images sizes and responsive techniques for that? (That site simply loads the biggest quality picture, even for the mobile version…)
Really nice article…. Quite knowledgeable … Thanks for sharing information. I have become habitual to read your knowledgeable articles. Keep it up.
Got something to say?
We have turned off comments, but you can see what folks had to say before we did so.
More from ALA
Personalization Pyramid: A Framework for Designing with User Data
Mobile-First CSS: Is It Time for a Rethink?
Designers, (Re)define Success First
Breaking Out of the Box
How to Sell UX Research with Two Simple Questions