Add support for the auto keyword for lazy-loaded images

Problem/Motivation

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.

Steps to reproduce

Proposed resolution

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.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet