Skip to content

Commit 238836b

Browse files
committed
Allow an image to indicate its own density and correct its intrinsic size.
See https://discourse.wicg.io/t/proposal-exif-image-resolution-auto-and-from-image/4326/24 This proposal allows using EXIF or other metadata to determine an image's default resolution, which may be different from the requested resolution in srcset/image-set, or from the default of 1dppx. The use-case is, for example, allowing serving low-density placeholder in poor network conditions without affecting layout. When an image indicates its intrinsic density-corrected size, that indication is "stronger" than the requested density (current pixel density). This allows, for example, serving a regular 1x image when a 2x image is requested by srcset, allowing for correct presentation of content that contains that information. The change to the HTML spec doesn't define exactly how an image format would represent this metadata, which is aligned with how image orientation from EXIF is defined in the CSS-images spec. The WICG proposal defines that in detail - using size+resolution from EXIF when their values are matching.
1 parent f57890b commit 238836b

File tree

1 file changed

+18
-6
lines changed

1 file changed

+18
-6
lines changed

source

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27246,12 +27246,20 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
2724627246

2724727247
<p>Each <span>image request</span> has a <dfn>current pixel density</dfn>, which must initially be undefined.</p>
2724827248

27249-
<p>When an <code>img</code> element has a <span>current pixel density</span> that is not 1.0, the
27250-
element's image data must be treated as if its resolution, in device pixels per <span
27251-
data-x="'px'">CSS pixels</span>, was the <span>current pixel density</span>. The image's
27252-
<dfn>density-corrected intrinsic width and height</dfn> are the <span data-x="intrinsic
27253-
dimensions">intrinsic width and height</span> after taking into account the <span>current pixel
27254-
density</span>.</p>
27249+
<p>Each <code>img</code> element has <dfn>intrinsicly defined density-corrected dimensions</dfn>,
27250+
which must initially be undefined.</p>
27251+
27252+
<p>To determine the a <dfn>density-corrected intrinsic width and height</dfn> of
27253+
<code>img</code> element <var>img</var>:
27254+
<ol>
27255+
<li><p>Set <var>dim</var> to <var>img</var>'s <span>intrinsicly defined density-corrected
27256+
dimensions</span>.
27257+
27258+
<li><p>If <var>dim</var> is not undefined, return <var>dim</var>.</p></li>
27259+
<li><p>Set <var>dim</var> to <var>img</var>'s <span>intrinsic dimensions</span>.</p></li>
27260+
<li><p>Divide <var>dim</var>'s width and height by <var>img</var>'s <span>current pixel density</span>
27261+
<li><p>Return <var>dim</var>.
27262+
</ol>
2725527263

2725627264
<p class="example">For example, if the <span>current pixel density</span> is 3.125, that means
2725727265
that there are 300 device pixels per <span data-x="'in'">CSS inch</span>, and thus if the image
@@ -27797,6 +27805,9 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
2779727805
fetched must run the following steps:</p>
2779827806

2779927807
<ol>
27808+
<li><p>The user agent should attempt to determine <var>image request</var>'s image's
27809+
<span>intrinsicly defined density-corrected dimensions</span> from the image's metadata.
27810+
2780027811
<li><p>If the user agent is able to determine <var>image request</var>'s image's width and
2780127812
height, and <var>image request</var> is <span>pending request</span>, set <var>image
2780227813
request</var>'s <span data-x="img-req-state">state</span> to <span data-x="img-inc">partially
@@ -121445,6 +121456,7 @@ INSERT INTERFACES HERE
121445121456
Nikki Bee,
121446121457
Noah Mendelsohn,
121447121458
Noah Slater,
121459+
Noam Rosenthal,
121448121460
Noel Gordon,
121449121461
Nolan Waite,
121450121462
NoozNooz42,

0 commit comments

Comments
 (0)