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 WICG proposal defines that in detail - using size+resolution from EXIF
when their values are matching.

source

@@ -27246,12 +27246,19 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
   <p>Each <span>image request</span> has a <dfn>current pixel density</dfn>, which must initially be undefined.</p>
 
-  <p>When an <code>img</code> element has a <span>current pixel density</span> that is not 1.0, the
-  element's image data must be treated as if its resolution, in device pixels per <span
-  data-x="'px'">CSS pixels</span>, was the <span>current pixel density</span>. The image's
-  <dfn>density-corrected intrinsic width and height</dfn> are the <span data-x="intrinsic
-  dimensions">intrinsic width and height</span> after taking into account the <span>current pixel
-  density</span>.</p>
+  <p>Each <code>img</code> element has <dfn>preferred density-corrected dimensions</dfn>,
+  which must initially be undefined.</p>
+
+  <p>To determine the a <dfn>density-corrected intrinsic width and height</dfn> of
+  <code>img</code> element <var>img</var>:
+  <ol>
+  <li><p>Set <var>dim</var> to <var>img</var>'s <span>preferred density-corrected dimensions</span>.
+
+  <li><p>If <var>dim</var> is not undefined, return <var>dim</var>.</p></li>
+  <li><p>Set <var>dim</var> to <var>img</var>'s <span>intrinsic dimensions</span>.</p></li>
+  <li><p>Divide <var>dim</var>'s width and height by <var>img</var>'s <span>current pixel density</span>
+  <li><p>Return <var>dim</var>.
+  </ol>
 
   <p class="example">For example, if the <span>current pixel density</span> is 3.125, that means
   that there are 300 device pixels per <span data-x="'in'">CSS inch</span>, and thus if the image
@@ -27798,13 +27805,15 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 
       <ol>
        <li><p>If the user agent is able to determine <var>image request</var>'s image's width and
-       height, and <var>image request</var> is <span>pending request</span>, set <var>image
-       request</var>'s <span data-x="img-req-state">state</span> to <span data-x="img-inc">partially
-       available</span>.</p></li>
+       height, and <var>image request</var> is <span>pending request</span>,
+       <span data-x="update the image metadata"> update the <code>img</code> metadata</span> and set
+       <var>image request</var>'s <span data-x="img-req-state">state</span> to
+       <span data-x="img-inc">partially available</span>.</p></li>
 
        <li><p>Otherwise, if the user agent is able to determine <var>image request</var>'s image's
-       width and height, and <var>image request</var> is <span>current request</span>, update the
-       <code>img</code> element's presentation appropriately and set <var>image request</var>'s
+       width and height, and <var>image request</var> is <span>current request</span>,
+       <span data-x="update the image metadata"> update the <code>img</code> metadata</span>, and update
+       the <code>img</code> element's presentation appropriately and set <var>image request</var>'s
        <span data-x="img-req-state">state</span> to <span data-x="img-inc">partially
        available</span>.</p></li>
 
@@ -27894,6 +27903,28 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
    <li><p>Let the <code>img</code> element's <span>pending request</span> be null.</p></li>
   </ol>
 
+  <h6>Updating the image metadata</h6>
+  <p>When asked to <dfn>update the image metadata</dfn> for a given <code>img</code>, user agents must do the following:</p>
+
+  <ol>
+    <li><p>Attempt to read <dfn data-x-href="https://www.exif.org/Exif2-2.PDF">EXIF</dfn> metadata embedded in the image, as defined in the
+    image codec.</p></li>
+    <li><p>If <code>img</code> does not have any <span>EXIF</span> metadata, return.</p></li>
+    <li><p>Let <code>img</code>'s <code>preferred width</code> correspond to the value of <span>EXIF</span> tag <code>PixelXDimension</code>
+    (<code>0xa002</code>). If <code>preferred width</code> is not a number between <code>1</code> and <code>65535</code>, return.</p></li>
+    <li><p>Let <code>img</code>'s <code>preferred height</code> correspond to the value of <span>EXIF</span> tag <code>PixelYDimension</code>
+    (<code>0xa003</code>).</p></li> If <code>preferred width</code> is not a number between <code>1</code> and <code>65535</code>, return.</p></li>
+    <li><p>Let <code>img</code>'s <code>resolution unit</code> correspond to the value of <span>EXIF</span> tag <code>ResolutionUnit</code>
+    (<code>0x0128</code>). If <code>resolution unit</code> is not <code>Inches</code> (<code>2</code>, return.</p></li>
+    <li><p>Let <code>img</code>'s <code>horizontal resolution</code> correspond to the value of <span>EXIF</span> tag <code>XResolution</code>
+    (<code>0x011a</code>).</p> If <code>horizontal resolution</code> is not a number between <code>1</code> and <code>65535</code>, return.</p></li>
+    <li><p>Let <code>img</code>'s <code>vertical resolution</code> correspond to the value of <span>EXIF</span> tag <code>YResolution</code>
+    (<code>0x011b</code>).</p> If <code>vertical resolution</code> is not a number between <code>1</code> and <code>65535</code>, return.</p></li>
+    <li><p>If <code>img</code>'s width in <code>inches</code> divided by <code>horizontal resolution</code> is equal to <code>img</code>'s
+    <code>preferred width</code>, and <code>img</code>'s height in <code>inches</code> divided by <code>vertical resolution</code> is equal to <code>img</code>'s width,
+    set <code>img</code>'s <span>preferred density-corrected dimensions</span> to <code>img</code>'s <code>preferred width</code> and <code>preferred height</code></p></li>.
+    <li><p>Return.</p></li>
+  </ol>
 
   <h6>Selecting an image source</h6>
 
@@ -121464,6 +121495,7 @@ INSERT INTERFACES HERE
   Nikki Bee,
   Noah Mendelsohn,
   Noah Slater,
+  Noam Rosenthal,
   Noel Gordon,
   Nolan Waite,
   NoozNooz42,