1819581 - Implement auto-sizes for lazy-loaded images

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, enhancement)

Description

[Simon Pieters [:zcorpan]]

See https://github.com/whatwg/html/pull/8008

Comment 1

[Simon Pieters [:zcorpan]]

The spec PR has landed now.

Comment 3

[Simon Pieters [:zcorpan]]

Changing component to Layout after discussing with :hsinyi.

auto-sizes is now enabled by default in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1359051#c26

Comment 4

[Simon Pieters [:zcorpan]]

This feature has now been adopted in WordPress 6.7: https://core.trac.wordpress.org/changeset/59008

I also found this PR for react-imgix from a GitHub search.

Chrome use counter is currently < 0.02% but I expect will rise as the above changes get deployed on sites and adoption spreads to other frameworks and libraries. https://chromestatus.com/metrics/feature/timeline/popularity/4750

Without supporting auto, we would likely fetch unnecessarily large images (at least for sites that use only sizes=auto without fallback on images).

Comment 5

[Simon Pieters [:zcorpan]]

Chrome's use counter is now at ~0.6% of page loads, ~2.5% of httparchive pages.

Shopify has developed a polyfill: https://github.com/Shopify/autosizes

Comment 6

[Simon Pieters [:zcorpan]]

Per :emilio, DOM: Core & HTML was correct, so changing back.

Comment 7

[Vincent Hilla [:vhilla]]

Filed https://issues.chromium.org/issues/475195982 because Chromium does auto sizing even if auto isn't the first source-size.

Comment 8

[Vincent Hilla [:vhilla]]

Attachment: Bug 1819581 - Implement auto-sizes for lazy-loaded images. r=edgar!,#layout-reviewers!

Comment 9

[Vincent Hilla [:vhilla]]

Attachment: wpt-size-auto-mAutoWidth-sync.html

As stated on the patch, I think we need to update mAutoWidth also outside of ObserveAutoSizesImage.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/945274bbfc41
https://hg.mozilla.org/integration/autoland/rev/d61bd753d6c6
Implement auto-sizes for lazy-loaded images. r=edgar,layout-reviewers,firefox-style-system-reviewers,emilio,vhilla

Comment 11

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/d61bd753d6c6

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/58659 for changes under testing/web-platform/tests

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 14

[Sebastian Zartner [:sebo]]

[Why is this notable]: New HTML feature
[Affects Firefox for Android]: yes
[Suggested wording]: A new auto value got introduced for the sizes attribute for lazy-loaded image elements with multiple image defined via srcset. This allows the browser to automatically select the right image based on the layout width of the image element.
[Links (documentation, blog post, etc)]:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/

For documentation on MDN: The BCD already has an entry for the auto value (which needs to be updated). Though the page describing the sizes attribute referenced above should be updated to provide some explanation for how that value works, maybe including an example.

Sebastian

Comment 15

[Dianna Smith [:diannaS]]

Added to the Fx150 release notes, currently in beta.

Comment 16

[Hamish Willee]

FF150 MDN docs work for this can be tracked in https://github.com/mdn/content/issues/43562

FYI, I'm still trying to fully understand exactly what I should document and where.
Most of the documentation is in <img> attribute sizes, which is cross linked from HTMLImageElement.sizes - it is fairly standard MDN practise to do most of the docs in the HTML element.

This seems pretty good. There is some lack of clarity on the default intrinsic size (it only mentions the wdith) and the reason you need to specify the width and height (i.e. I don't think it is because the intrinsic size of the image is not known - it's because it will be assumed to be a particular value based on the UA stylesheet if no other layout information is available.

Since the intrinsic size of the image is not yet known, width and height attributes (or CSS equivalents) should also be specified to prevent the browser from assuming the default image width of 300px.

My understanding of auto is that

• it allows the browser to determine the layout size of a lazy loaded image based on whatever the current layout information it has available.
• For a lazy loaded image the CSS for the page has already loaded, so any CSS or HTML layout information, including media queries have already been loaded. The benefit is that you don't have to specify what image to load based on media queries in the sizes attribute and maintain this information in two places.
• If your image wasn't lazy loaded the layout dimensions will be whatever you specify on the image HTML, or the 300 x 150px default "intrinsic layout" if you specified nothing.

@sebo, FYI one difference between FF and Chrome is that FF seems to dynamically check whether it has an optimal image and load an alternative if there is a better options - i.e. if you shrink the space for your image so another is a better match. Chrome seems to just load the image once and never recalculate.

Welcome any comments about the above you might have. Hoping to progress it on Friday.

Comment 17

[Sebastian Zartner [:sebo]]

(In reply to Hamish Willee from comment #16)

FYI, I'm still trying to fully understand exactly what I should document and where.
Most of the documentation is in <img> attribute sizes, which is cross linked from HTMLImageElement.sizes - it is fairly standard MDN practise to do most of the docs in the HTML element.

Oh, right! I missed that the auto value is actually documented in detail there. Though the description at the API page is very vague. I'd at least expect a short description of the syntax in one or two sentences besides referring to the sizes attribute on the <img> page. That could duplicate the introduction sentence of the attribute. At least that's how it's done for other more complex values like HTMLMediaElement.src.

My understanding of auto is that

• it allows the browser to determine the layout size of a lazy loaded image based on whatever the current layout information it has available.
• For a lazy loaded image the CSS for the page has already loaded, so any CSS or HTML layout information, including media queries have already been loaded. The benefit is that you don't have to specify what image to load based on media queries in the sizes attribute and maintain this information in two places.
• If your image wasn't lazy loaded the layout dimensions will be whatever you specify on the image HTML, or the 300 x 150px default "intrinsic layout" if you specified nothing.

That's also my understanding.

@sebo, FYI one difference between FF and Chrome is that FF seems to dynamically check whether it has an optimal image and load an alternative if there is a better options - i.e. if you shrink the space for your image so another is a better match. Chrome seems to just load the image once and never recalculate.

Thank you for the hint! I didn't check that yet, but I guess, user agents are allowed to optimize their algorithms for either image quality or performance, in that case. @Hamish Did you already check that difference?

Sebastian

Comment 18

[Hamish Willee]

Thanks Sebastian. I've attempted to to this in https://github.com/mdn/content/pull/43684 - would love your review on the changes - if you have time?

Mostly it is better cross linking and a little structure in the <img> doc, but I also added an example in the other doc.

@Hamish Did you already check that difference?

Do you mean "did I check the spec to confim this is OK?". No, but looking now https://html.spec.whatwg.org/multipage/images.html#reacting-to-environment-changes it appears that this is at the browser discretion

The user agent may at any time run the following algorithm to update an img element's image in order to react to changes in the environment.

I was slightly wrong on the differences.

• Chrome will load a bigger images if you increase the size of a contained image, but it won't reload a smaller element (while FF will).
• The other main difference is that FF does not appear to lazy load - it loads all the images as soon as the page appears.

This isn't testable using the example I created in the PR here because the images aren't loading. But the same example immediately shows the images have loaded if you test locally (in the on-page log)

Comment 19

[Sebastian Zartner [:sebo]]

(In reply to Hamish Willee from comment #18)

Thanks Sebastian. I've attempted to to this in https://github.com/mdn/content/pull/43684 - would love your review on the changes - if you have time?

I've provided some feedback now. (Though Chris already did most of what I would have had remarks on.)

@Hamish Did you already check that difference?

Do you mean "did I check the spec to confim this is OK?". No, but looking now https://html.spec.whatwg.org/multipage/images.html#reacting-to-environment-changes it appears that this is at the browser discretion

Yes, that's what I meant. Thanks for pointing to the specification!

Sebastian