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,