sizes=auto is a great idea

The attributes of responsive <img>s are pretty intense!

<img 
  alt="A baby smiling with a yellow headband."
  srcset="
    baby-s.jpg  300w,
    baby-m.jpg  600w,
    baby-l.jpg  1200w,
    baby-xl.jpg 2000w
  "
  sizes="
    (min-width: 2420px) 2000px, 
    (min-width: 720px) calc(94.76vw - 274px), 
    (min-width: 520px) calc(100vw - 96px), 
    calc(100vw - 32px)
  "
>Code language: HTML, XML (xml)

You need to create/serve/cache multiple versions of images, know exactly how wide they are, and then accurately put that into the srcset attribute in the HTML syntax. Hopefully, you don’t need to change that system very often if ever.

I find sizes even more difficult, as it needs to accurately describe how wide the image will render at different potential breakpoints in the CSS. Even if you’re intimately familiar with your CSS, it’s mind-bending to figure out. A lot of sites just kinda punt on it with something very vague like sizes="(max-width: 340px) 100vw, 340px", which assumes you’ll be rendering the image at full width if the browser window is smaller than the image; otherwise at the full width of the browser window (rarely true). Plus, CSS changes!

Not trying to crap on the responsive images syntax; it’s just hard. Hard to get right off the bat, hard to automate, and hard to keep right over time.

The irony of the sizes attribute, in particular, is… doesn’t the browser already know how big an image will render at? Well, it does, but only after layout happens. The point of the HTML attribute is that if the information it has is correct, it can make decisions about what image to download before that and be efficient about it (the whole point of responsive images).

But what if the browser doesn’t need to download the image right away, anyway? That’s what happens with <img loading="lazy" ... />, which is certainly a best practice for doing images efficiently. Well if the browser isn’t bothering to download an image until later, then the layout rendering step has already been done, and the browser really does know how big the image is on the page. Thus… sizes doesn’t really matter! In that case, wouldn’t this be nice?

<img 
  alt="A baby smiling with a yellow headband."
  srcset="
    baby-s.jpg  300w,
    baby-m.jpg  600w,
    baby-l.jpg  1200w,
    baby-xl.jpg 2000w
  "
  loading="lazy"
  sizes="auto"
>Code language: HTML, XML (xml)

Looks like that’s happening and that’s great. I wish I could tell you what browsers it’s landing in and when, but I have no idea. I just like that it has legs.