The end of responsive images

tl;dr: If you have loading=lazy on an image, you can also use sizes=auto and skip creating a size hint for the srcset. This is helpful because only images above the fold should be eager loaded anyway, so you only need a handful of size hints.

I do exactly this on my website: srcset="..." loading="lazy" sizes="auto" on every image. One interesting thing is that, Chrome/Firefox both seemed to work just fine without loading="lazy" sizes="auto"'. In fact I'd say they worked better, because they loaded above-the-fold images more quickly and still lazily loaded below-the-fold images as the user scrolled to them. Now, this is very standards-incompliant, so I changed it, but I still hope we can get a sizes="auto" without needing loading="lazy" someday.