Auto-sizes for lazy-loaded images in HTML

[zcorpan]

Request for Mozilla Position on an Emerging Web Specification

• Specification Title: Add sizes=auto to lazy-loaded <img>
• Specification or proposal URL: Add sizes=auto to lazy-loaded <img> whatwg/html#8008
• Caniuse.com URL (optional):
• Bugzilla URL (optional):
• Mozillians who can provide input (optional): @emilio

Other information

[emilio]

My main concern with this proposal is the behavior for lazy images that might or might not be in the cache...

In particular, if a lazy-loaded image is on the cache, right now we use it eagerly (and the image is never in the lazy state).

That means, IIUC, that given the current state of the proposal, if the sizes=100vw image is in the cache we'll use that, otherwise the image will enter into the lazy state and eventually select a source using sizes="rendered-size".

This has two effects:

• An image might have a different source depending on timing and cache state (which is a bit surprising but might be ok, since the sizes=100vw image is intended to be larger).

• An image with sizes="auto" might flicker if moved or re-inserted in the DOM (which I think it might not be ok). In particular, any time you have two different sizes, one that is actually used, and one that would get selected with sizes=100vw, we'd check the cache, find that the sizes=100vw image is not in the cache, enter the lazy state and eventually select the other source.

I'm not sure the second point is a deal breaker, as long as we're aware of it and it's tested properly in WPT (the available check is tested in html/semantics/embedded-content/the-img-element/image-loading-lazy-available.html). But I feel like it's going to bite somebody :/

[zcorpan]

The spec only uses the "list of available images" if the img element has a non-empty src and does not use srcset and does not use picture, see step 4 in https://html.spec.whatwg.org/#update-the-image-data

That is, <img srcset="a 100w, b 200w" loading=lazy> should always be lazy even if one or several of the images are cached. Not sure if this case is tested in wpt currently.

[zcorpan]

I discussed this with @emilio and there are still concerns about flickering, though that's an issue with how the spec loads images before this feature, too. It seems possible to address this in the spec later. Our position is "positive". I'll submit a PR for a dashboard entry.