Compute img/video aspect ratio from width and height HTML attributes

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 79)
Intent stage: Prepare to ship

Breaking change: No
Enterprise impact: None
Spec maturity: Published standard
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.tentative.html?label=experimental&label=master&aligned (The Chrome version used by wpt is too old to show us passing)

Summary

Computes the aspect ratio of an image using the HTML width and height attributes so that it can be used for sizing an image using CSS before it loads.

Motivation

To correctly compute the final dimensions of an image (before it is fully loaded), this feature computes the aspect ratio from the HTML width and height attributes, so that it can be used to compute the final size when e.g. "width: 100%; height: auto;" is used in CSS. This avoids unnecessary relayouts when the image loads (compared to <img src="foo.jpg" style="width: 100%">

Standards & signals

Specification: https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images
Firefox: Shipped/Shipping — Now turned on by default
Safari: No signal
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=979891

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=html%2Frendering%2Freplaced-elements%2Fattributes-for-embedded-content-and-images%2Fimg-aspect-ratio
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Compute%20img%2Fvideo%20aspect%20ratio%20from%20width%20and%20height%20HTML%20attributes
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Compute%20img%2Fvideo%20aspect%20ratio%20from%20width%20and%20height%20HTML%20attributes
Baseline status: https://webstatus.dev/?q=Compute%20img%2Fvideo%20aspect%20ratio%20from%20width%20and%20height%20HTML%20attributes

Docs: https://github.com/WICG/intrinsicsize-attribute/issues/16#issuecomment-500941775

Explainers: https://github.com/WICG/intrinsicsize-attribute/issues/16#issuecomment-500941775

View on chromestatus.com