The A List Apart Blog Presents:

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

Article Continues Below

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.

validation error image

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.

2 Reader Comments

  1. Hi Eric,
    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…)

  2. 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

Voice Content and Usability

In this excerpt from Voice Content and Usability, author Preston So talks about the messy, primordial nature of human speech and challenges with programming computers to deal with these complexities.
Content

Designing for the Unexpected

As devices continue to diversify in dizzying ways, how can we make sure our work on the web stays as relevant as ever for the long haul? Cathy Dutton shares how practitioners must perfect designs both for the paradigms of the present and the twists of the future, come what may.
Design

Asynchronous Design Critique: Getting Feedback

Receiving feedback can be a stressful experience: will an open-ended question attract helpful guidance or harsh criticism? Erin “Folletto“ Casali coaches us through a process to ensure that feedback always lands gracefully.
Design

Asynchronous Design Critique: Giving Feedback

You’ve heard the term “constructive criticism” countless times but do you know how to deliver it? Part one of this series from Erin ‘Folletto’ Casali gives you a framework for it! Flex your feedback muscles and practice these skills to empower and inspire others without deflating or confusing them.
Design

That’s Not My Burnout

If, like many folks during the pandemic, you’ve begun confusing burnout for achievement, Donna Bungard will show you how to recognize that you’re low on fuel and give you a map of rest stops where you can refill your tank.
Career