search

web-platform-tests / interop

web-platform-tests Interop project
https://wpt.fyi/interop
309 stars 28 forks source link

Auto-sizes for lazy-loaded images #761

Open eeeps opened 3 weeks ago

eeeps commented 3 weeks ago

Description

Writing, reading, and maintaining sizes attributes is error-prone and difficult, in part because sizes entangles markup and layout. sizes="auto" allows authors to ask the user-agent to use the <img>’s actual layout width rather than having to supply a value themselves. The feature is limited to lazy-loaded images to prevent performance regressions.

Specification

https://html.spec.whatwg.org/multipage/images.html#valdef-sizes-auto

Additional Signals

Web Platform Tests

Implementation Statuses

Chromium: shipped in M126; browser bug closed Fixed. WebKit: Positive standards position; browser bug filed. Gecko: Positive standards position; browser bug filed.

Specification Status

Stable. Chrome’s implementation and shipping of the feature revealed a couple of gnarly issues which were cleanly resolved.

Platform Impact

Author demand for this functionality is high, but authors are using JavaScript to achieve it.

In 2022, 10% of sizes attributes already had a value of auto before JavaScript ran, presumably because they were using the popular lazysizes.js.

Chrome currently ships two usage counters for the native feature: AutoSizesLazy and AutoSizesNonLazy.

WordPress Core shipped support for native auto-sizes two weeks ago.

Likely Compatibility Impact

sizes=auto has a nice progressive enhancement story, but currently authors must choose between:

  1. Simply writing sizes="auto"; non-supporting browsers will use the default sizes value of 100vw and many users will load oversized images, negating performance benefits.
  2. Including a fallback value (e.g., sizes="auto, calc(80vw-10em)"), negating the feature’s authoring complexity/maintenance benefits.
  3. Getting auto-sizes everywhere by removing src and srcset attributes and managing image loading with JavaScript.

There is no good way to polyfill native image loading features without first disabling native image loading. Until this feature has good compatibility, many authors will continue to choose to do that.

Other Developer Sentiment

Here are a couple of nice blog posts about the feature:

gsnedders commented 1 week ago

https://wpt.fyi/results/html?label=master&label=experimental&aligned&q=sizes%20auto is probably roughly the right tests.