The end of #responsive #images - Piccalilli
▻https://piccalil.li/blog/the-end-of-responsive-images
Responsive images aren’t a problem. picture isn’t a problem; srcset isn’t even the problem.
We both know what the problem is...The sizes dilemma
Fully automatic responsive images. Supply the browser with a list of candidates using srcset, bolt on sizes="auto", and let the browser do the rest.
the string “auto” at the start of a sizes attribute, any browser with support for it will say “figure it out myself; got it,” ditch the rest of the sizes attribute, and move on — browsers without support will throw the meaningless-to-them auto value out and continue on to the rest of attribute as usual. That means you can start using this right now, at absolutely zero cost and with no more overhead than typing auto, at the start of a sizes attribute
An image likely to appear in the user’s viewport when a page first loads is a situation where you wouldn’t want to use loading="lazy" (again, sizes="auto" will only work with lazyloaded images), but these images are the exceptions, not the default.
Every other image — all those images scattered throughout columns and grids and sidebars and “cards” and smatterings of little round user avatars that the web is really made out of? loading="lazy" sizes="auto". Job done. Congratulations.
#css
