Intrinsicsize Attribute on Media Elements Explainer

There’s no way to do media that maintains aspect ratio, is proportional to the width of the screen, and doesn’t cause a user visible reflow. If we provide a way for the author to declare the intrinsic size of the image before the image has loaded, then we could allow them to specify just one dimension (e.g. the width) to a percentage or pixel value and compute the other dimension immediately without waiting for the image to load.

One edge case to keep in mind is when you want an image to size to its container, but the image is sometimes smaller than its container. In that case, the desired behavior is to have the image be its intrinsic size instead of stretching it.

Proposed Solution

Add an intrinsic-size attribute: <img intrinsicsize="400x300" style="width: 100%">.

This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and naturalWidth/naturalHeight on images would return the values specified in this attribute. On video elements, the video would raster at this size and the videoWidth/videoHeight on the video would return the intrinsicsize values.

All other image size operations behave the same. So, for example:

• If no width/height are otherwise set, then the image still be the size specified by intrinsicsize
• If the width is set on the image, then it would set the height to maintain the aspect ratio defined in this property.
• If width and height are set on the image, then this attribute’s value is ignored.

The sizes are in CSS Pixels.

This attribute applies on all image element types (including SVG images) and videos.

FAQ

• Why just image and video? These are the only elements in https://html.spec.whatwg.org/multipage/indices.html#elements-3 that size to an external resource.
• How does this relate to the unsized-media policy? The idea behind the unsized-media feature policy is to have a mode for the web where images don’t cause a reflow when the image data loads. This policy achieves that goal, but at the cost of making it extremely difficult to have images whose width is proportional to the size of their container and/or the screen while maintaining aspect ratio. This proposal couples nicely with unsized-media in that it’s another way to set a size on an image/video. The unsized media policy just overrides the intrinsic size of the media element to be 300x150. This lets you override what that value should be.

Open questions

• Does this let you do aspect-ratio for responsive layout videos or does that need an additional solution? Aspect ratio on videos can be achieved in terribly painful ways today and generally on any element.

Alternatives Considered

aspectratio attribute

<img aspectratio="400x300" style="width: 100%">

• Pro: Simple to understand and implement
• Con: Doesn't work for a common use case, where you want to constrain an image to be no bigger than its container, but not stretch it to be larger. That is, you want to set the image's width to min(width of container, intrinsic width of image), and you want to do so before downloading any image data.

Details

Using intrinsicsize="", you can accomplish this like so:

<div style="width: 75vw">
  <img src="my-image.jpg" intrinsicsize="400x300" style="max-width: 100%">
</div>

This gives the enough information to figure out the image's size, which will (correctly) end up as min(400px, 75vw), even before downloading any image data.

But if you tried to do this using aspectratio="", there's no way for the 400 pixel measurement to enter the system. E.g. given

<div style="width: 75vw">
  <img src="my-image.jpg" aspectratio="4x3" style="width: 100%">
</div>

the width will be 75vw always, which is incorrect. Or if you do

<div style="width: 75vw">
  <img src="my-image.jpg" aspectratio="4x3" style="max-width: 100%">
</div>

then the width will be correct eventually, but only after the image downloads; until then the browser doesn't know whether it should be 75vw, or something less.

width/height set the intrinsic size, New override attribute

<img width="400" height="300" actualwidth="100%">

• Con: Doesn’t work with CSS or would need to also add a CSS property
• Con: Makes width/height mean something different than it does today. Not really backwards compatible.

width/height set the intrinsic size, New override attribute

<img intrinsicwidth="400" intrinsicheight="300" style="width: 100%">

• Pro: Allows you to only override one of width or height from the default of 300x150. Not clear this is really a pro. Is it useful to set only one dimension of the intrinsic size?
• Con: Requires setting two properties