Add sizes=auto to lazy-loaded <img> #8008

zcorpan · 2022-06-14T00:47:59Z

This allows web developers to omit the sizes attribute, or explicitly specify sizes=auto, for <img> elements that have loading=lazy. The browser will use the layout width of the image as input to the srcset resource selection (lazy images don't start loading until layout is known, at the earliest). For eager-loading images, it's invalid and equivalent to 100vw.

Fixes #4654.

At least two implementers are interested (and none opposed):
- Chromium: yes Add "auto sizes" for lazy-loaded images #4654 (comment)
- Gecko: yes Auto-sizes for lazy-loaded images in HTML mozilla/standards-positions#650
- WebKit: yes Auto-sizes for lazy-loaded images in HTML WebKit/standards-positions#9
Tests are written and can be reviewed and commented upon at:
- HTML: test <img sizes=auto> web-platform-tests/wpt#34427
Implementation bugs are filed:
- Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1359051
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1819581
- Safari: https://bugs.webkit.org/show_bug.cgi?id=253143
- Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): N/A
- Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): N/A
- Validator.nu: Support <img sizes=auto> and <source sizes=auto> validator/validator#1396

(See WHATWG Working Mode: Changes for more details.)

/embedded-content.html ( diff )
/images.html ( diff )
/infrastructure.html ( diff )
/input.html ( diff )
/semantics.html ( diff )

See whatwg/html#8008

yoavweiss

Thanks for working on this! :) A few nits a substantive question on the processing model

source

yoavweiss · 2022-06-28T10:49:36Z

source

+ <p>The keyword <dfn data-x="valdef-sizes-auto">auto</dfn> means the rendered width of the <span
+ data-x="concept-sizes-associated-img">associated</span> <code>img</code> element, if any, in <span
+ data-x="'px'">CSS pixels</span>, if that is not <code data-x="">0px</code>, and that
+ <code>img</code> element is <span>being rendered</span>, is being rendered to a visual medium, and


Is it worthwhile to integrate the concept of being rendered to a visual medium into the "being rendered" definition? As is, this is a bit confusing to read.

Hmm, I think the "is being rendered to a visual medium" is actually bogus. The width and height attributes used that, but I believe the branching should actually happen for "being rendered". Changed in f1d5577.

yoavweiss · 2022-06-28T10:58:22Z

source

+ data-x="'px'">CSS pixels</span>, if that is not <code data-x="">0px</code>, and that
+ <code>img</code> element is <span>being rendered</span>, is being rendered to a visual medium, and
+ the <code>img</code> element's <code data-x="attr-img-loading">loading</code> attribute is in the
+ <span data-x="attr-loading-lazy-state">Lazy</span> state; otherwise, <code


What if we have a situation where the loading=lazy attribute was removed after the initial parsing of the <img> element? It's not a relevant mutation, but I would still expect sizes=auto to give us the layout width of the image, assuming that layout already happened.

Might be better to ignore "auto" if layout hasn't happened yet, but take it into account if it has, regardless of the loading attribute

Taking "auto" into account if layout has happened makes it non-deterministic for eager images, as it's racy whether layout has happened before the image fetch starts. I wrote this PR with the assumption that it's better to have deterministic and predictable behavior. Which means that for eager images, auto = 100vw always.

Do we want non-deterministic here?

Or should we add a load() method for images, to explicitly start loading an image (like for media elements)?

You're right that deterministic behavior would be better, and there's no simple way to enforce that without the loading attribute. I'm not sure there's a strong use-case for "this image was initially lazy, but now we need to load it eagerly", so maybe we can skip this for now, and look into explicit ways to eagerly load images in case it's needed.

I think loading needs to be a relevant mutation attribute, too, since it can change what sizes=auto means.

Added more conditions to relevant mutations.

With the rendered width being a possible relevant mutation, it could trigger on every frame (e.g. if the image dimensions are being animated). Is that a problem?

It sort of interferes with "Reacting to environment changes", since that aborts in 15.1 if there were relevant mutations (but maybe that's what we want for auto).

"update the image data" step 6.3.7.3 will fire a load event even if it's the same url, which doesn't seem great. If the image is broken, it will try to refetch it every time (#4480), which also doesn't seem great.

yoavweiss

Looks great! One question

source

yoavweiss

LGTM

zcorpan · 2022-07-06T13:09:57Z

I wonder if the feature should more explicitly check for the case of no dimensions being specified, since the behavior is a bit weird in that case.

When no image is loaded yet, the width will be 0px, in which case the sizes algorithm returns 100vw.
When an image is loaded, and a relevant mutation occurs (for example, the viewport width changes, making the rendered width of the image change because the used sizes was 100vw, and this is now a relevant mutation). This time, the parsed sizes will return the current rendered width of the image, in pixels. So it's no longer responsive to further changes of the viewport width.

So, how to fix this? Use 100vw if the computed value (not used value) of the 'width' and 'min-width' properties are both auto?

yoavweiss · 2022-07-08T09:45:30Z

So, how to fix this? Use 100vw if the computed value (not used value) of the 'width' and 'min-width' properties are both auto?

Using 100vw when we don't have any better alternatives (since we don't know what the layout size would be), SGTM. The "computed-value width isauto" case sounds like it fits that description. I'm not sure if there aren't other cases (but you probably know).

zcorpan · 2022-08-08T13:58:23Z

So, how to fix this? Use 100vw if the computed value (not used value) of the 'width' and 'min-width' properties are both auto?

Done in fc651c8.

I suppose since the 'aspect-ratio' property now exists, it's possible to specify a width by setting a height and an aspect-ratio. So if width and min-width are both auto, we should check if 'aspect-ratio' and 'height'/'min-height' are also auto.

Are there any other ways to specify a width? cc @whatwg/css

zcorpan · 2022-08-09T10:05:39Z

To answer my own question, I think we have these:

'inline-size' and 'block-size'; which is the width depends on 'writing-mode'
sizing values (css-sizing-3 and css-sizing-4) can also be 'none', 'min-content', 'max-content', 'fit-content(...)', 'stretch', 'fit-content', 'contain', which in some cases act like 'auto'. Maybe we should check if the computed value is a <length-percentage> instead of checking that it's not 'auto'.
- var() is substituted at computed-value time, so should work ok
- not sure what to make of math functions
as far as I can tell, per CSS2, for replaced elements (which img is before the image has loaded), the 'left' and 'right' properties can't be used to specify a width.

So, an img element has a "specified width" if at least one of the following is true:

the computed value of 'width' or 'min-width' is a <length-percentage>
the computed value of 'aspect-ratio' is not 'auto' and the computed value of 'height' or 'min-height' is a <length-percentage>
the computed value of 'writing-mode' is 'horizontal-tb' and
- the computed value of 'inline-size' or 'min-inline-size' is a <lenght-percentage> or
- the computed value of 'aspect-ratio' is not 'auto' and is not degenerate and the computed value of 'block-size' or 'min-block-size' is a <length-percentage>
the computed value of 'writing-mode' is not 'horizontal-tb' and
- the computed value of 'block-size' or 'min-block-size' is a <lenght-percentage> or
- the computed value of 'aspect-ratio' is not 'auto' and is not degenerate and the computed value of 'inline-size' or 'min-inline-size' is a <length-percentage>

Does that seem correct?

Edit: I now also found these properties: https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override

source

zcorpan · 2022-08-09T12:04:05Z

Maybe a more general approach would be:

An element's concrete object size ignoring natural dimensions is its concrete object size but acting as if there are no natural dimensions, thus producing a rectangle with an absolute width and height.

This will match the actual concrete object size before the image has loaded.

Then, we can check that the "concrete object size ignoring natural dimensions" width is > 0, and any changes to this width is a relevant mutation.

zcorpan · 2022-08-09T13:28:41Z

I went with the approach described in the comment above. I believe it solves the problem discussed in #8008 (comment) and, at least in spec terms, doesn't introduce a lot of complexity.

zcorpan · 2022-08-09T14:03:27Z

(Need to rebase this after #8175 is merged.)

zcorpan · 2022-08-11T10:51:55Z

@yoavweiss PTAL :)

zcorpan · 2022-08-11T16:10:05Z

I'm a bit worried about compat for making more things "relevant mutations". Should we gate the new additions on usage of w descriptors in srcset?

yoavweiss · 2022-08-12T11:56:29Z

source

+ descriptor</span>, the <code data-x="attr-img-sizes">sizes</code> attribute may also be present.
+ If, additionally, the <code data-x="attr-img-loading">loading</code> attribute is in the <span
+ data-x="attr-loading-eager-state">Eager</span> state, the <code
+ data-x="attr-img-sizes">sizes</code> attribute must be present. The <dfn element-attr for="img"


Should we also say that when the loading attribute is in the Eager state, the value of the sizes attribute must not be "auto"? Or are we cool with that meaning "100vw"?

It's disallowed here https://github.com/whatwg/html/pull/8008/files#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947dR29040

yoavweiss · 2022-08-12T12:06:01Z

source

+ <li><p>If the element's <code data-x="attr-img-loading">loading</code> attribute is in the <span
+ data-x="attr-loading-lazy-state">Lazy</span> state: the element starts or stops <span>being
+ rendered</span>, or its <span>concrete object size ignoring natural dimensions</span> width
+ changes.</p></li>


What does that mean for a lazy-loaded image that was already loaded? If its dimensions change, it may get reloaded?

Can you remind me of the motivation for this relevant mutations change? I found this, but it's not clear from that discussion what are the use cases this addresses. Apologies if we already went through this! :)

See my comment below.

yoavweiss · 2022-08-12T12:15:19Z

I'm a bit worried about compat for making more things "relevant mutations". Should we gate the new additions on usage of w descriptors in srcset?

I share that concern, and not sure that gating it would help significantly. I understand the motivations for loading attribute mutation changes, but unclear on mutations when the concrete element size changes.

zcorpan · 2022-08-15T17:50:05Z

The size observer is to keep the image "responsive" to changes in rendered size. For example, consider a gallery with thumbnails and clicking a thumbnail shows the same img as large as possible within the viewport. The environment hasn't changed, only the rendered width. It seems reasonable to assume that sizes=auto would not make the initial size "sticky".

yoavweiss · 2022-08-31T12:15:07Z

OK, I understand the reasoning to include the concrete size in the relevant mutations, and I think it makes sense to restrict those to only cases where they matter (so when srcset has 'w' descriptors).
Can you run an HTTPArchive analysis to see how often that condition is met?

IIUC, such content currently would be loaded once with a size of 100vw, and once we switch the the proposed behavior, multiple images may be loaded, if the image size is significantly increased or decreased. Is that understanding correct?

Auto Sizes allows developers to omit the sizes attribute (or set it to sizes=auto) for lazy loaded image elements with srcset. For this use case the image's width should be provided. The browser will use the layout width of the image in order to select the source url from the srcset. Spec PR: whatwg/html#8008 WPT tests PR: #34427 Chrome Platform Status link: https://chromestatus.com/feature/5191555708616704 Intent to Prototype link: https://groups.google.com/a/chromium.org/g/blink-dev/c/AYoqvNluyeA R=pdr Bug: 1359051 Change-Id: I8e9bc836e9582a9209db53d55e0edc96f90499f2

Auto Sizes allows developers to omit the sizes attribute (or set it to sizes=auto) for lazy loaded image elements with srcset. For this use case the image's width should be provided. The browser will use the layout width of the image in order to select the source url from the srcset. Spec PR: whatwg/html#8008 WPT tests PR: #34427 Chrome Platform Status link: https://chromestatus.com/feature/5191555708616704 Intent to Prototype link: https://groups.google.com/a/chromium.org/g/blink-dev/c/AYoqvNluyeA R=pdr Bug: 1359051 Low-Coverage-Reason: For html_srcset_parser.cc, it should be covered by `image-srcset-cache.html` but there seems to be cov reporing problem. Change-Id: I8e9bc836e9582a9209db53d55e0edc96f90499f2

Automatic update from web-platform-tests HTML: test <img sizes=auto> See whatwg/html#8008 -- wpt-commits: 1d96e07ecd4dc9597036afd773f2aa25015df5fd wpt-pr: 34427

Auto Sizes allows developers to omit the sizes attribute (or set it to sizes=auto) for lazy loaded image elements with srcset. For this use case the image's width should be provided. The browser will use the layout width of the image in order to select the source url from the srcset. Spec PR: whatwg/html#8008 WPT tests PR: #34427 Chrome Platform Status link: https://chromestatus.com/feature/5191555708616704 Intent to Prototype link: https://groups.google.com/a/chromium.org/g/blink-dev/c/AYoqvNluyeA R=pdr Bug: 1359051 Low-Coverage-Reason: For html_srcset_parser.cc, it should be covered by `image-srcset-cache.html` but there seems to be cov reporing problem. Change-Id: I8e9bc836e9582a9209db53d55e0edc96f90499f2

Automatic update from web-platform-tests HTML: test <img sizes=auto> See whatwg/html#8008 -- wpt-commits: 1d96e07ecd4dc9597036afd773f2aa25015df5fd wpt-pr: 34427 UltraBlame original commit: eed1029e905a955343124475089f6b881fe123f5

This implements the HTML spec for applying auto sizes to lazy-loaded images by prepending `auto` to the `sizes` attribute generated by WordPress if the image has a `loading` attribute set to `lazy`. For browser that support this HTML spec, the image's size value will be set to the concrete object size of the image. For browsers that don't support the spec, the word "auto" will be ignored when parsing the sizes value. References: - https://html.spec.whatwg.org/multipage/images.html#sizes-attributes - whatwg/html#8008 Props mukesh27, flixos90, joemcgill, westonruter, peterwilsoncc. Fixes #61847. git-svn-id: https://develop.svn.wordpress.org/trunk@59008 602fd350-edb4-49c9-b593-d223f7449a82

This implements the HTML spec for applying auto sizes to lazy-loaded images by prepending `auto` to the `sizes` attribute generated by WordPress if the image has a `loading` attribute set to `lazy`. For browser that support this HTML spec, the image's size value will be set to the concrete object size of the image. For browsers that don't support the spec, the word "auto" will be ignored when parsing the sizes value. References: - https://html.spec.whatwg.org/multipage/images.html#sizes-attributes - whatwg/html#8008 Props mukesh27, flixos90, joemcgill, westonruter, peterwilsoncc. Fixes #61847. Built from https://develop.svn.wordpress.org/trunk@59008 git-svn-id: http://core.svn.wordpress.org/trunk@58404 1a063a9b-81f0-0310-95a4-ce76da25c4cd

This implements the HTML spec for applying auto sizes to lazy-loaded images by prepending `auto` to the `sizes` attribute generated by WordPress if the image has a `loading` attribute set to `lazy`. For browser that support this HTML spec, the image's size value will be set to the concrete object size of the image. For browsers that don't support the spec, the word "auto" will be ignored when parsing the sizes value. References: - https://html.spec.whatwg.org/multipage/images.html#sizes-attributes - whatwg/html#8008 Props mukesh27, flixos90, joemcgill, westonruter, peterwilsoncc. Fixes #61847. Built from https://develop.svn.wordpress.org/trunk@59008 git-svn-id: https://core.svn.wordpress.org/trunk@58404 1a063a9b-81f0-0310-95a4-ce76da25c4cd

zcorpan added a commit to web-platform-tests/wpt that referenced this pull request Jun 14, 2022

HTML: test <img sizes=auto>

4e76c69

See whatwg/html#8008

zcorpan added a commit to web-platform-tests/wpt that referenced this pull request Jun 14, 2022

HTML: test <img sizes=auto>

8b35591

See whatwg/html#8008

This was referenced Jun 14, 2022

HTML: test <img sizes=auto> web-platform-tests/wpt#34427

Merged

Auto-sizes for lazy-loaded images in HTML mozilla/standards-positions#650

Closed

yoavweiss reviewed Jun 28, 2022

View reviewed changes

marcoscaceres mentioned this pull request Jun 29, 2022

Auto-sizes for lazy-loaded images in HTML WebKit/standards-positions#9

Closed

This was referenced Jun 30, 2022

Introduction to images should also cover lazy-loading #8058

Open

Support <img sizes=auto> and <source sizes=auto> validator/validator#1396

Open

yoavweiss reviewed Jul 6, 2022

View reviewed changes

source Outdated Show resolved Hide resolved

yoavweiss approved these changes Jul 6, 2022

View reviewed changes

zcorpan added the do not merge yet Pull request must not be merged per rationale in comment label Jul 8, 2022

zcorpan force-pushed the bocoup/img-auto-sizes branch 2 times, most recently from 0908d7e to fc651c8 Compare August 8, 2022 13:51

whatwg deleted a comment from Masalmasal Aug 8, 2022

zcorpan commented Aug 9, 2022

View reviewed changes

source Outdated Show resolved Hide resolved

zcorpan mentioned this pull request Aug 11, 2022

Rename 'intrinsic dimensions' to 'natural dimensions' to match CSS #8175

Merged

zcorpan force-pushed the bocoup/img-auto-sizes branch from 74854c8 to 51d94ff Compare August 11, 2022 08:54

yoavweiss reviewed Aug 12, 2022

View reviewed changes

zcorpan deleted the bocoup/img-auto-sizes branch June 2, 2023 14:24

YusukeHirao mentioned this pull request Jun 4, 2023

Supporting for <img loading=lazy sizes=auto> markuplint/markuplint#1050

Closed

zcorpan mentioned this pull request Jun 21, 2023

auto-sizes concrete object size ignoring natural dimensions is not implementable #9448

Closed

eeeps mentioned this pull request Jun 27, 2023

Getting the current source size value of an img #6532

Open

joemcgill mentioned this pull request Jul 25, 2023

Module Proposal: auto-sizes for lazy-loaded images WordPress/performance#791

Closed

ausi mentioned this pull request Oct 11, 2023

Enable sizes="auto" for responsive images contao/contao#6432

Open

zcorpan mentioned this pull request Nov 28, 2023

Document img auto-sizes mdn/content#30596

Open

tunetheweb mentioned this pull request Jul 11, 2024

Add sizes=auto support info for <img> elements mdn/browser-compat-data#23785

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sizes=auto to lazy-loaded <img> #8008

Add sizes=auto to lazy-loaded <img> #8008

zcorpan commented Jun 14, 2022 •

edited by pr-preview bot

Loading

yoavweiss left a comment

yoavweiss Jun 28, 2022

zcorpan Jun 28, 2022

yoavweiss Jun 28, 2022

yoavweiss Jun 28, 2022

zcorpan Jun 28, 2022

yoavweiss Jun 28, 2022

zcorpan Jun 28, 2022

zcorpan Jun 29, 2022

yoavweiss left a comment

yoavweiss left a comment

zcorpan commented Jul 6, 2022

yoavweiss commented Jul 8, 2022

zcorpan commented Aug 8, 2022

zcorpan commented Aug 9, 2022 •

edited

Loading

zcorpan commented Aug 9, 2022

zcorpan commented Aug 9, 2022

zcorpan commented Aug 9, 2022

zcorpan commented Aug 11, 2022

zcorpan commented Aug 11, 2022

yoavweiss Aug 12, 2022

zcorpan Aug 15, 2022

yoavweiss Aug 12, 2022

yoavweiss Aug 12, 2022 •

edited

Loading

zcorpan Aug 15, 2022

yoavweiss commented Aug 12, 2022

zcorpan commented Aug 15, 2022

yoavweiss commented Aug 31, 2022

Add sizes=auto to lazy-loaded <img> #8008

Add sizes=auto to lazy-loaded <img> #8008

Conversation

zcorpan commented Jun 14, 2022 • edited by pr-preview bot Loading

yoavweiss left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoavweiss left a comment

Choose a reason for hiding this comment

yoavweiss left a comment

Choose a reason for hiding this comment

zcorpan commented Jul 6, 2022

yoavweiss commented Jul 8, 2022

zcorpan commented Aug 8, 2022

zcorpan commented Aug 9, 2022 • edited Loading

zcorpan commented Aug 9, 2022

zcorpan commented Aug 9, 2022

zcorpan commented Aug 9, 2022

zcorpan commented Aug 11, 2022

zcorpan commented Aug 11, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoavweiss Aug 12, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoavweiss commented Aug 12, 2022

zcorpan commented Aug 15, 2022

yoavweiss commented Aug 31, 2022

zcorpan commented Jun 14, 2022 •

edited by pr-preview bot

Loading

zcorpan commented Aug 9, 2022 •

edited

Loading

yoavweiss Aug 12, 2022 •

edited

Loading