Mat Marquis published an article https://piccalil.li/blog/the-end-of-responsive-images/ about the broader availability of the auto keyword for the sizes attribute on the img element.
Before that, the sizes attribute required a lot of manual adjustment to align the sizes available in the srcset with the actual layout of a page/site to minimize the data transferred on every page load. above the fold that problem still applies, but for any lazy loaded image with the auto keyword applied, it is now up to the browser to decide which image best to load - the entire layout context is already available to them at that point.
Add support for the auto keyword on lazy loaded images.
In regard to browser support, Blink, Gecko, and Webkit all have added support to it. In regard to older browser Mat Marquis writes:
Well, if you’re worried about browser support, don’t be — upon encountering 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.
So it is a progressive enhancement scenario with no need for any polyfill or the need to wait until the requirements listed in https://www.drupal.org/docs/getting-started/system-requirements/browser-... are full-filled.
Comments