Proposal to add an intrinsicsize attribute to media elements
Switch branches/tags
Nothing to show
Clone or download
loonybear Merge pull request #8 from loonybear/intrinsicSize
Add relationship with responsive images to intrinsic size attribute
Latest commit 24f04bd Sep 13, 2018
Permalink
Failed to load latest commit information.
LICENSE Initial commit Apr 24, 2018
README.md update: nit Sep 13, 2018

README.md

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 value of the 'intrinsicsize' attribute.

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 only affects the values of naturalWidth/naturalHeight, but not the rendered size of the image.

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.
  • How does this work with responsive images? The 'intrinsicsize' attribute sets the image's intrinsic aspect ratio. For an image element with a srcset, if:
    • a source is chosen using the 'w' descriptor, then the result of evaluating the 'sizes' attribute sets the image's intrinsic width, and its intrinsic height will be calculated by the intrinsic aspect ratio defined by 'intrinsicsize' attribute;
    • otherwise, the 'intrinsicsize' attribute sets the intrinsic width and the intrinsic height.

Open questions

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