<img sizes="auto, 100px" loading="eager">: auto equates to 100wv but should ideally be ignored

[iamakulov]

What is the issue with the HTML Standard?

This is a request to change how <img sizes="auto"> works for non-lazy images. I hope it’s not too late for this to happen!

TL;DR: instead of defaulting auto to 100vw, default it to the current layout width of the image, when available. This will help single-page apps – which can simply add sizes="auto" on all images:

<img sizes="auto" srcset=a 200w, b 500w, c 1000w>

and have the browser automatically pick the best image when a single-page navigation happens, as the layout is already built.

Motivation

When the spec was still drafted, I misread it and was very excited something like this would be supported once the spec ships:

<img sizes="auto" srcset=a 200w, b 500w, c 1000w>
<!-- computes to `100vw` if the page is loaded in a regular navigation,
     or to the image’s layout size if the page is rendered with JavaScript -->

<img sizes="auto, 200px" srcset=a 200w, b 500w, c 1000w>
<!-- computes to `200px` if the page is loaded in a regular navigation,
     or to the image’s layout size if the page is rendered with JavaScript -->

This behavior – when auto defaults to layout size (when available) – is helpful for SPA authors. It allows to add sizes="auto" to all (not just lazy-loaded) images – and get a perfectly sized image loaded automatically whenever a single-page navigation happens.

As it turned out, the spec doesn’t work that way. When you put sizes="auto" on a non-lazy image, auto defaults to 100vw – even if the layout size for the image is already available:

<img sizes="auto" srcset=a 200w, b 500w, c 1000w>
<!-- always computes to 100vw, even if the image is inserted with JavaScript -->

<img sizes="auto, 200px" srcset=a 200w, b 500w, c 1000w>
<!-- also always computes to 100vw, even if the image is inserted with JavaScript -->

This significantly increases friction to optimizing single-page navigations. If you want to make use of the layout sizes that are already available on an SPA nav, you need to:

• check whether the <img> tag is rendered on the server or on the client,
• check whether the <img> tag is rendered as a part of the first load or a subsequent navigation,
• and only if it’s a subsequent client-side navigation, add sizes="auto" loading="lazy" attribute to the <img> tag

As it stands, many SPA authors won’t even think or attempt to ship an improvement like this.

Requested change

Instead of defaulting auto to 100vw:

• default it to the current layout width of the image, if it’s available,
• or skip auto and fall back to the next value in the sizes attribute, otherwise.

[zcorpan]

cc @tcaptan-cr @progers

[zcorpan]

Making auto work for eager images when layout is available makes resource selection a race condition, which the spec generally tries hard to avoid. It should be deterministic and predictable.

In #9648 we changed processing to use the next value instead of 100vw if the image doesn't allow auto-sizes (e.g. is eager). See https://github.com/whatwg/html/pull/9493/files#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947dR30070-R30071