source

<!--

License for the imported HTML spec:

  Written by Ian Hickson (Google, ian@hixie.ch)
  Parts (c) Copyright 2004-2014 Apple Inc., Mozilla Foundation, and Opera Software ASA
  You are granted a license to use, reproduce and create derivative works of this document

License for the contributions to this file as of 2014-05-06:

  To the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work.
  In addition, as of 6 May 2014, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0,
  which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.

-->

<!--

This file is being maintained at https://github.com/ResponsiveImagesCG/picture-element/blob/gh-pages/source

It is integrated into the WHATWG HTML spec: https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content

Editor: Simon Pieters <simonp@opera.com>, Opera Software

-->

  <!-- START OF PICTURE SECTION -->

  <h4>Introduction</h4>

  <!-- NON-NORMATIVE SECTION -->

  <p>To embed an image in HTML, when there is only a single image resource,
  use the <code>img</code> element and its <code data-x="attr-img-src">src</code> attribute.</p>

  <div class="example">

<pre>&lt;h2>From today's featured article&lt;/h2>
<strong>&lt;img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150"></strong>
&lt;p>&lt;b>&lt;a href="/wiki/Marie_Lloyd">Marie Lloyd&lt;/a>&lt;/b> (1870&ndash;1922)
was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>

  </div>

  <p>However, there are a number of situations for which the author might wish
  to use multiple image resources that the user agent can choose from:</p>

  <ul>

   <li>

    <p>Different users might have different environmental characteristics:</p>

    <ul>

     <li>

      <p>The users' physical screen size might be different from one another.</p>

      <p class="example">A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 inches diagonally.</p>

      <p class="note">This is only relevant when an image's rendered size depends on the viewport size.</p>

     </li>

     <li>

      <p>The users' screen pixel density might be different from one another.</p>

      <p class="example">A mobile phone's screen might have three times as many physical pixels per inch
      compared to another mobile phone's screen, regardless of their physical screen size.</p>

     </li>

     <li>

      <p>The users' zoom level might be different from one another, or might change for a single user over time.</p>

      <p class="example">A user might zoom in to a particular image to be able to get a more detailed look.</p>

      <p>The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel.
      This ratio is usually referred to as <dfn>device-pixel-ratio</dfn>.</p>

     </li>

     <li>

      <p>The users' screen orientation might be different from one another, or might change for a single user over time.</p>

      <p class="example">A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape".</p>

     </li>

     <li>

      <p>The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time.</p>

      <p class="example">A user might be on a fast, low-latency and constant-cost connection while at work,
      on a slow, low-latency and constant-cost connection while at home,
      and on a variable-speed, high-latency and variable-cost connection anywhere else.</p>

     </li>

    </ul>

   </li>

   <li>

    <p>Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport.
    This is usually referred to as <dfn>viewport-based selection</dfn>.</p>

    <p class="example">A Web page might have a banner at the top that always spans the entire viewport width.
    In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximised browser window).</p>

    <p class="example">Another Web page might have images in columns,
    with a single column for screens with a small physical size,
    two columns for screens with medium physical size,
    and three columns for screens with big physical size,
    with the images varying in rendered size in each case to fill up the viewport.
    In this case, the rendered size of an image might be <em>bigger</em> in the one-column layout compared to the two-column layout,
    despite the screen being smaller.</p>

   </li>

   <li>

    <p>Authors might want to show different image content depending on the rendered size of the image.
    This is usually referred to as <dfn>art direction</dfn>.</p>

    <p class="example">When a Web page is viewed on a screen with a large physical size (assuming a maximised browser window),
    the author might wish to include some less relevant parts surrounding the critical part of the image.
    When the same Web page is viewed on a screen with a small physical size,
    the author might wish to show only the critical part of the image.</p>

   </li>

   <li>

    <p>Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports.
    This is usually referred to as <dfn>image format-based selection</dfn>.</p>

    <p class="example">A Web page might have some images in the JPEG, WebP and JPEG XR image formats,
    with the latter two having better compression abilities compared to JPEG.
    Since different user agents can support different image formats,
    with some formats offering better compression ratios,
    the author would like to serve the better formats to user agents that support them,
    while providing JPEG fallback for user agents that don't.<!--XXX refs?--></p>

   </li>

  </ul>

  <p>The above situations are not mutually exclusive.
  For example, it is reasonable to combine different resources for different <span>device-pixel-ratio</span>
  with different resources for <span>art direction</span>.</p>

  <p>While it is possible to solve these problems using scripting, doing so introduces some other problems:</p>

  <ul>

   <li><p>Some user agents aggressively download images specified in the HTML markup,
   before scripts have had a chance to run,
   so that Web pages complete loading sooner.
   If a script changes which image to download,
   the user agent will potentially start two separate downloads,
   which can instead cause worse page loading performance.</p></li>

   <li><p>If the author avoids specifying any image in the HTML markup
   and instead instantiates a single download from script,
   that avoids the double download problem above
   but then no image will be downloaded at all for users with scripting disabled
   and the aggressive image downloading optimisation will also be disabled.</p></li>

  </ul>

  <p>With this in mind, this specification introduces a number of features to address the above problems in a declarative manner.</p>

  <dl>

   <dt><span>Device-pixel-ratio</span>-based selection when the rendered size of the image is fixed</dt>

   <dd>

    <p>The <code data-x="attr-img-src">src</code> and <code data-x="attr-img-srcset">srcset</code>
    attributes on the <code>img</code> element can be used,
    using the <code data-x="">x</code> descriptor,
    to provide multiple images that only vary in their size
    (the smaller image is a scaled-down version of the bigger image).</p>

    <p class="note">The <code data-x="">x</code> descriptor is not appropriate when the
    rendered size of the image depends on the viewport width (<span>viewport-based selection</span>),
    but can be used together with <span>art direction</span>.</p>

    <div class="example">

<pre>&lt;h2>From today's featured article&lt;/h2>
&lt;img <strong>src="/uploads/100-marie-lloyd.jpg"</strong>
     <strong>srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"</strong>
     alt="" width="100" height="150">
&lt;p>&lt;b>&lt;a href="/wiki/Marie_Lloyd">Marie Lloyd&lt;/a>&lt;/b> (1870&ndash;1922)
was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>

     <p>The user agent can choose any of the given resources depending on
     the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.</p>

     <p>For backwards compatibility with older user agents that
     don't yet understand the <code data-x="attr-img-srcset">srcset</code> attribute,
     one of the URLs is specified in the <code>img</code> element's <code data-x="attr-img-src">src</code> attribute.
     This will result in something useful (though perhaps lower-resolution than the user would like)
     being displayed even in older user agents.
     For new user agents, the <code data-x="attr-img-src">src</code> attribute participates in the resource selection,
     as if it was specified in <code data-x="attr-img-srcset">srcset</code> with a <code data-x="">1x</code> descriptor.</p>

     <p>The image's rendered size is given in the
     <code data-x="attr-dim-width">width</code> and <code data-x="attr-dim-height">height</code> attributes,
     which allows the user agent to allocate space for the image before it is downloaded.</p>

    </div>

   </dd>

   <dt><span>Viewport-based selection</span></dt>

   <dd>

    <p>The <code data-x="attr-img-srcset">srcset</code> and <code data-x="attr-img-sizes">sizes</code> attributes can be used,
    using the <code data-x="">w</code> descriptor,
    to provide multiple images that only vary in their size
    (the smaller image is a scaled-down version of the bigger image).</p>

    <div class="example">

     <p>In this example, a banner image takes up the entire viewport width
     (using appropriate CSS).</p>

<pre>&lt;h1>&lt;img <strong>sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"</strong>
     src="wolf-400.jpg" alt="The rad wolf">&lt;/h1></pre>

     <p>The user agent will calculate the effective pixel density of each image
     from the specified <code data-x="">w</code> descriptors and the specified rendered size in the <code data-x="attr-img-sizes">sizes</code> attribute.
     It can then choose any of the given resources depending on
     the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.</p>

     <p>If the user's screen is 320 CSS pixels wide, this is equivalent to specifying
     <code data-x="">wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x</code>.
     On the other hand, if the user's screen is 1200 CSS pixels wide,
     this is equivalent to specifying
     <code data-x="">wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x</code>.
     By using the <code data-x="">w</code> descriptors and the <code data-x="attr-img-sizes">sizes</code> attribute,
     the user agent can choose the correct image source to download regardless of how large the user's device is.</p>

     <p>For backwards compatibility,
     one of the URLs is specified in the <code>img</code> element's <code data-x="attr-img-src">src</code> attribute.
     In new user agents, the <code data-x="attr-img-src">src</code> attribute is ignored
     when the <code data-x="attr-img-srcset">srcset</code> attribute uses <code data-x="">w</code> descriptors.</p>

     <p>In this example, the <code data-x="attr-img-sizes">sizes</code> attribute could be omitted
     because the default value is <code data-x="">100vw</code>.</p>

    </div>

    <div class="example">

     <p>In this example, the Web page has three layouts depending on the width of the viewport.
     The narrow layout has one column of images (the width of each image is about 100%),
     the middle layout has two columns of images (the width of each image is about 50%),
     and the widest layout has three columns of images, and some page margin (the width of each image is about 33%).
     It breaks between these layouts when the viewport is <code data-x="">30em</code> wide and <code data-x="">50em</code> wide, respectively.</p>

<pre>&lt;img <strong>sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"</strong>
     <strong>srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"</strong>
     src="swing-400.jpg" alt="Kettlebell Swing"></pre>

     <p>The <code data-x="attr-img-sizes">sizes</code> attribute sets up the
     layout breakpoints at <code data-x="">30em</code> and <code data-x="">50em</code>,
     and declares the image sizes between these breakpoints to be
     <code data-x="">100vw</code>, <code data-x="">50vw</code>, or <code data-x="">calc(33vw - 100px)</code>.
     These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.</p>

     <p>The user agent will pick a width from the <code data-x="attr-img-sizes">sizes</code> attribute,
     using the first item with a <span>&lt;media-condition></span> (the part in parentheses) that evaluates to true,
     or using the last item (<code data-x="">calc(33vw - 100px)</code>) if they all evaluate to false.</p>

     <p>For example, if the viewport width is <code data-x="">29em</code>,
     then <code data-x="">(max-width: 30em)</code> evaluates to true and <code data-x="">100vw</code> is used,
     so the image size, for the purpose of resource selection, is <code data-x="">29em</code>.
     If the viewport width is instead <code data-x="">32em</code>,
     then <code data-x="">(max-width: 30em)</code> evaluates to false,
     but <code data-x="">(max-width: 50em)</code> evaluates to true and <code data-x="">50vw</code> is used,
     so the image size, for the purpose of resource selection, is <code data-x="">16em</code> (half the viewport width).
     Notice that the slightly wider viewport results in a smaller image because of the different layout.</p>

     <p>The user agent can then calculate the effective pixel density and choose an appropriate resource
     similarly to the previous example.</p>

    </div>

   </dd>

   <dt><span>Art direction</span>-based selection</dt>

   <dd>

    <p>The <code>picture</code> element and the <code data-x="picture-source">source</code> element,
    together with the <code data-x="attr-picture-source-media">media</code> attribute,
    can be used, to provide multiple images that vary the image content
    (for instance the smaller image might be a cropped version of the bigger image).</p>

    <div class="example">

<pre>&lt;picture>
  &lt;source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
  &lt;source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
  &lt;img src="small.jpg" alt="The president giving an award.">
&lt;/picture></pre>

     <p>The user agent will choose the first <code data-x="picture-source">source</code> element
     for which the media query in the <code data-x="attr-picture-source-media">media</code> attribute matches,
     and then choose an appropriate URL from its <code data-x="attr-picture-source-srcset">srcset</code> attribute.</p>

     <p>The rendered size of the image varies depending on which resource is chosen.
     To specify dimensions that the user agent can use before having downloaded the image,
     CSS can be used.</p>

<pre class="css">img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }</pre>

    </div>

    <div class="example">

     <p>This example combines <span>art direction</span>- and <span>device-pixel-ratio</span>-based selection.
     A banner that takes half the viewport is provided in two versions,
     one for wide screens and one for narrow screens.</p>

<pre>&lt;h1>
 &lt;picture>
  &lt;source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
  &lt;img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
 &lt;/picture>
&lt;/h1></pre>

    </div>

   </dd>

   <dt><span>Image format-based selection</span></dt>

   <dd>

    <p>The <code data-x="attr-picture-source-type">type</code> attribute
    on the <code data-x="picture-source">source</code> element can be used,
    to provide multiple images in different formats.</p>

    <div class="example">

<pre>&lt;h2>From today's featured article&lt;/h2>
&lt;picture>
 &lt;source srcset="/uploads/100-marie-lloyd.webp" <strong>type="image/webp"</strong>>
 &lt;source srcset="/uploads/100-marie-lloyd.jxr" <strong>type="image/vnd.ms-photo"</strong>>
 &lt;img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
&lt;/picture>
&lt;p>&lt;b>&lt;a href="/wiki/Marie_Lloyd">Marie Lloyd&lt;/a>&lt;/b> (1870&ndash;1922)
was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>

     <p>In this example, the user agent will choose the first source that has
     a <code data-x="attr-picture-source-type">type</code> attribute with a supported MIME type.
     If the user agent supports WebP images,
     the first <code data-x="picture-source">source</code> element will be chosen.
     If not, but the user agent does support JPEG XR images,
     the second <code data-x="picture-source">source</code> element will be chosen.
     If neither of those formats are supported,
     the <code>img</code> element will be chosen.</p>

    </div>

   </dd>

  </dl>


  <h5>Adaptive images</h5>

  <!-- NON-NORMATIVE SECTION -->

  <p>CSS and media queries can be used to construct graphical page layouts that adapt dynamically to
  the user's environment, in particular to different viewport dimensions and pixel densities. For
  content, however, CSS does not help; instead, we have the <code>img</code> element's <code
  data-x="attr-img-srcset">srcset</code> attribute and the <code>picture</code> element.
  This section walks through a sample case showing how to use these features.</p>

  <p>Consider a situation where on wide screens (wider than 600 CSS pixels) a 300&times;150 image
  named <code data-x="">a-rectangle.png</code> is to be used, but on smaller screens (600 CSS pixels
  and less), a smaller 100&times;100 image called <code data-x="">a-square.png</code> is to be used.
  The markup for this would look like this:</p>

  <pre>&lt;figure>
 &lt;picture>
  &lt;source srcset="a-square.png" media="(max-width: 600px)">
  &lt;img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses.">
 &lt;/picture>
 &lt;figcaption>Barney Frank, 2011&lt;/figcaption>
&lt;/figure></pre>

  <p class="note">For details on what to put in the <code data-x="attr-img-alt">alt</code> attribute,
  see the <a href="#alt">Requirements for providing text to act as an alternative for images</a> section.</p>

  <p>The problem with this is that the user agent does not necessarily know what dimensions to use
  for the image when the image is loading. To avoid the layout having to be reflowed multiple times
  as the page is loading, CSS and CSS media queries can be used to provide the dimensions:</p>

  <pre>&lt;figure>
 &lt;style scoped>
  #a { width: 300px; height: 150px; }
  @media (max-width: 600px) { #a { width: 100px; height: 100px; } }
 &lt;/style>
 &lt;picture>
  &lt;source srcset="a-square.png" media="(max-width: 600px)">
  &lt;img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses." id="a">
 &lt;/picture>
 &lt;figcaption>Barney Frank, 2011&lt;/figcaption>
&lt;/figure></pre>

  <p>Alternatively, the <code data-x="attr-dim-width">width</code> and <code
  data-x="attr-dim-height">height</code> attributes can be used to provide the width for legacy user
  agents, using CSS just for the user agents that support <code>picture</code>:</p>

  <pre>&lt;figure>
 &lt;style scoped media="(max-width: 600px)">
  #a { width: 100px; height: 100px; }
 &lt;/style>
 &lt;picture>
  &lt;source srcset="a-square.png" media="(max-width: 600px)">
  &lt;img src="a-rectangle.png" width="300" height="150"
  alt="Barney Frank wears a suit and glasses." id="a">
 &lt;/picture>
 &lt;figcaption>Barney Frank, 2011&lt;/figcaption>
&lt;/figure></pre>

  <hr>

  <p>The <code data-x="picture-source">source</code> element is used with the <code
  data-x="attr-img-src">src</code> attribute, which gives the URL of the image to use for legacy user
  agents that do not support the <code>picture</code> element. This leads
  to a question of which image to provide in the <code data-x="attr-img-src">src</code>
  attribute.</p>

  <p>If the author wants the biggest image in legacy user agents, the markup could be as follows:</p>

  <pre>&lt;picture>
 &lt;source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 &lt;source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 &lt;img src="pear-desktop.jpeg" alt="The pear is juicy.">
&lt;/picture></pre>

  <p>However, if legacy mobile user agents are more important, one can list all three images in the
  <code data-x="picture-source">source</code> elements, overriding the <code
  data-x="attr-img-src">src</code> attribute entirely.</p>

  <pre>&lt;picture>
 &lt;source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 &lt;source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 &lt;source srcset="pear-desktop.jpeg">
 &lt;img src="pear-mobile.jpeg" alt="The pear is juicy.">
&lt;/picture></pre>

  <p>Since at this point the <code data-x="attr-img-src">src</code> attribute is actually being
  ignored entirely by <code>picture</code>-supporting user agents, the <code
  data-x="attr-img-src">src</code> attribute can default to any image, including one that is neither
  the smallest nor biggest:</p>

  <pre>&lt;picture>
 &lt;source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 &lt;source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 &lt;source srcset="pear-desktop.jpeg">
 &lt;img src="pear-tablet.jpeg" alt="The pear is juicy.">
&lt;/picture></pre>

  <hr>

  <p>Above the <code data-x="">max-width</code> media feature is used, giving the maximum
  (viewport) dimensions that an image is intended for.
  It is also possible to use <code data-x="">min-width</code> instead.</p>

  <pre>&lt;picture>
 &lt;source srcset="pear-desktop.jpeg" media="(min-width: 1281px)">
 &lt;source srcset="pear-tablet.jpeg" media="(min-width: 721px)">
 &lt;img src="pear-mobile.jpeg" alt="The pear is juicy.">
&lt;/picture></pre>


  <h4>Dependencies</h4>

  <dl>

   <dt>Media Queries <ref spec=MQ></dt>

   <dd><dfn>&lt;media-condition></dfn></dd>

   <dt>CSS Values and Units <ref spec=CSSVALUES></dt>

   <dd><dfn>&lt;length></dfn></dd>

   <dt>CSS Syntax <ref spec=CSSSYNTAX></dt>

   <dd><dfn>Parse a comma-separated list of component values</dfn></dd>
   <dd><dfn>component value</dfn></dd>
   <dd><dfn>&lt;whitespace-token></dfn></dd>

   <dt>Fetch <ref spec=FETCH></dt>

   <dd><dfn data-x="concept-request-context">context</dfn></dd>

  </dl>


  <h4>The <dfn><code>picture</code></dfn> element</h4>

  <dl class="element">
   <dt><span data-x="element-dfn-categories">Categories</span>:</dt>
   <dd><span>Flow content</span>.</dd>
   <dd><span>Phrasing content</span>.</dd>
   <dd><span>Embedded content</span>.</dd>
   <dt><span data-x="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
   <dd>Where <span>embedded content</span> is expected.</dd>
   <dt><span data-x="element-dfn-content-model">Content model</span>:</dt>
   <dd>Zero or more <code data-x="picture-source">source</code> elements, followed by one <code>img</code> element, optionally intermixed with <span>script-supporting elements</span>.</dd>
   <dt><span data-x="element-dfn-attributes">Content attributes</span>:</dt>
   <dd><span>Global attributes</span></dd>
   <dt><span data-x="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
   <dd>
<pre class="idl">interface <dfn>HTMLPictureElement</dfn> : <span>HTMLElement</span> {};</pre>
   </dd>
  </dl>

  <p>The <code>picture</code> element is a container
  which provides multiple sources to its contained <code>img</code> element
  to allow authors to declaratively control or give hints to the user agent about which image resource to use,
  based on the screen pixel density, viewport size, image format, and other factors. It <span>represents</span> its children.</p>

  <p class="note">The <code>picture</code> element is somewhat different
  from the similar-looking <code>video</code> and <code>audio</code> elements.
  While all of them contain <code data-x="picture-source">source</code> elements,
  the <code data-x="picture-source">source</code> element's <code data-x="attr-source-src">src</code> attribute has no meaning
  when the element is nested within a <code>picture</code> element,
  and the resource selection algorithm is different.
  As well, the <code>picture</code> element itself does not display anything;
  it merely provides a context for its contained <code>img</code> element
  that enables it to choose from multiple <span data-x="URL">URLs</span>.</p>


  <h4>The <dfn data-x="picture-source"><code>source</code></dfn> element when used with the <code>picture</code> element</h4>

  <dl class="element">
   <dt><span data-x="element-dfn-categories">Categories</span>:</dt>
   <dd>Same as for the <code>source</code> element.</dd>
   <dt><span data-x="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
   <dd>As a child of a <code>picture</code> element, before the <code>img</code> element.</dd>
   <dt><span data-x="element-dfn-content-model">Content model</span>:</dt>
   <dd>Same as for the <code>source</code> element.</dd>
   <dt><span data-x="element-dfn-attributes">Content attributes</span>:</dt>
   <dd><span>Global attributes</span></dd>
   <dd><code data-x="attr-picture-source-srcset">srcset</code></dd>
   <dd><code data-x="attr-picture-source-sizes">sizes</code></dd>
   <dd><code data-x="attr-picture-source-media">media</code></dd>
   <dd><code data-x="attr-picture-source-type">type</code></dd>
   <dt><span data-x="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
   <dd>
<pre class="idl">partial interface <span>HTMLSourceElement</span> {
           attribute DOMString <span data-x="dom-picture-source-srcset">srcset</span>;
           attribute DOMString <span data-x="dom-picture-source-sizes">sizes</span>;
           attribute DOMString <span data-x="dom-picture-source-media">media</span>;
};</pre>
   </dd>
  </dl>

  <p>The authoring requirements in this section only apply if the <code data-x="picture-source">source</code> element has
  a parent that is a <code>picture</code> element.</p>

  <p>The <code data-x="picture-source">source</code> element allows authors to specify multiple alternative
  <span data-x="source set">source sets</span> for <code>img</code> elements.
  It does not <span data-x="represents">represent</span> anything on its own.</p>

  <p>The <dfn data-x="attr-picture-source-srcset"><code>srcset</code></dfn> attribute must be present,
  and must consist of one or more <span data-x="image candidate string">image candidate strings</span>,
  each separated from the next by a U+002C COMMA character (,).
  If an <span>image candidate string</span> contains no descriptors
  and no <span data-x="space character">space characters</span> after the URL,
  the following <span>image candidate string</span>, if there is one,
  must begin with one or more <span data-x="space character">space characters</span>.</p>

  <p>The <dfn data-x="attr-picture-source-sizes"><code>sizes</code></dfn> attribute may also be present.
  If present, the value must be a <span>valid source size list</span>.</p>

  <p>The <dfn data-x="attr-picture-source-media"><code>media</code></dfn> attributes may also be present.
  If present, the value must contain a <span>valid media query list</span>.</p>

  <p>The <dfn data-x="attr-picture-source-type"><code>type</code></dfn> attribute may also be present.
  If present, the value must be a <span>valid MIME type</span>.
  It gives the type of the images in the <span>source set</span>,
  to allow the user agent to skip to the next <code data-x="picture-source">source</code> element
  if it does not support the given type.</p>

  <p class="note">If the <code data-x="attr-picture-source-type">type</code> attribute
  is <em>not</em> specified, the user agent will not select a different
  <code data-x="picture-source">source</code> element if it finds that it does not support
  the image format after fetching it.</p>

  <p>When a <code data-x="picture-source">source</code> element has a following sibling
  <code data-x="picture-source">source</code> element or <code>img</code> element with a
  <code data-x="attr-img-srcset">srcset</code> attribute specified, it must have
  at least one of the following:</p>

  <ul>

   <li><p>A <code data-x="attr-picture-source-media">media</code> attribute specified with a value that,
   after <span data-x="strip leading and trailing whitespace">stripping leading and trailing whitespace</span>,
   is not the empty string and is not an <span>ASCII case-insensitive</span> match for the string "<code data-x="">all</code>".</p></li>

   <li><p>A <code data-x="attr-picture-source-type">type</code> attribute specified.</p></li>

  </ul>

  <p>The <code data-x="attr-source-src">src</code> attribute must not be present.</p>

  <div w-nodev>

  <p>The IDL attributes <dfn data-x="dom-picture-source-srcset"><code>srcset</code></dfn>,
  <dfn data-x="dom-picture-source-sizes"><code>sizes</code></dfn> and
  <dfn data-x="dom-picture-source-media"><code>media</code></dfn> must <span>reflect</span> the
  respective content attributes of the same name.</p>

  </div>


  <h4>The <dfn><code>img</code></dfn> element</h4>

  <dl class="element">
   <dt><span data-x="element-dfn-categories">Categories</span>:</dt>
   <dd><span>Flow content</span>.</dd>
   <dd><span>Phrasing content</span>.</dd>
   <dd><span>Embedded content</span>.</dd>
   <dd><span>Form-associated element</span>.</dd>
   <dd>If the element has a <code data-x="attr-hyperlink-usemap">usemap</code> attribute: <span>Interactive content</span>.</dd>
   <dd><span>Palpable content</span>.</dd>
   <dt><span data-x="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
   <dd>Where <span>embedded content</span> is expected.</dd>
   <dt><span data-x="element-dfn-content-model">Content model</span>:</dt>
   <dd>Empty.</dd>
   <dt><span data-x="element-dfn-attributes">Content attributes</span>:</dt>
   <dd><span>Global attributes</span></dd>
   <dd><code data-x="attr-img-alt">alt</code></dd>
   <dd><code data-x="attr-img-src">src</code></dd>
   <dd><code data-x="attr-img-srcset">srcset</code></dd>
   <dd><code data-x="attr-img-sizes">sizes</code></dd>
   <dd><code data-x="attr-img-crossorigin">crossorigin</code></dd>
   <dd><code data-x="attr-hyperlink-usemap">usemap</code></dd>
   <dd><code data-x="attr-img-ismap">ismap</code></dd>
   <dd><code data-x="attr-dim-width">width</code></dd>
   <dd><code data-x="attr-dim-height">height</code></dd>
   <dt><span data-x="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
   <dd>
<pre class="idl">[NamedConstructor=<span data-x="dom-image">Image</span>(optional unsigned long width, optional unsigned long height)]
interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
           attribute DOMString <span data-x="dom-img-alt">alt</span>;
           attribute DOMString <span data-x="dom-img-src">src</span>;
           attribute DOMString <span data-x="dom-img-srcset">srcset</span>;
           attribute DOMString <span data-x="dom-img-sizes">sizes</span>;
           attribute DOMString? <span data-x="dom-img-crossOrigin">crossOrigin</span>;
           attribute DOMString <span data-x="dom-img-useMap">useMap</span>;
           attribute boolean <span data-x="dom-img-isMap">isMap</span>;
           attribute unsigned long <span data-x="dom-img-width">width</span>;
           attribute unsigned long <span data-x="dom-img-height">height</span>;
  readonly attribute unsigned long <span data-x="dom-img-naturalWidth">naturalWidth</span>;
  readonly attribute unsigned long <span data-x="dom-img-naturalHeight">naturalHeight</span>;
  readonly attribute boolean <span data-x="dom-img-complete">complete</span>;
  readonly attribute DOMString <span data-x="dom-img-currentSrc">currentSrc</span>;
};</pre>
   </dd>
  </dl><!--TOPIC:HTML-->

  <p>An <code>img</code> element represents an image.</p>

  <!-- v2 ideas for <img>:

     * Maps sites would like to know which images are already cached, so that they can use images
       that are vaguely suitable while they wait for the most appropriate image to download.

       Almost like lowsrc="", except that many images might be appropriate.

       Slight hitch: their images are at a different origin, and we don't want to allow arbitrary
       cross-origin inspection (privacy leak risk). So it will require them to do CORS opt-in.

     * See note at rel=noreferrer.

  -->

  <p>The image given by the <dfn data-x="attr-img-src"><code>src</code></dfn> and <dfn
  data-x="attr-img-srcset"><code>srcset</code></dfn> attributes,
  and any previous sibling <code data-x="picture-source">source</code> elements'
  <code data-x="attr-picture-source-srcset">srcset</code> attributes if the parent is a <code>picture</code> element,
  is the embedded content; the value of
  the <dfn data-x="attr-img-alt"><code>alt</code></dfn> attribute provides equivalent content for
  those who cannot process images or who have image loading disabled (i.e. it is the
  <code>img</code> element's <span>fallback content</span>).</p>

  <p>The requirements on the <code data-x="attr-img-alt">alt</code> attribute's value are described
  <a href="#alt">in the next section</a>.</p>

  <p>The <code data-x="attr-img-src">src</code> attribute must be present, and must contain a
  <span>valid non-empty URL potentially surrounded by spaces</span> referencing a non-interactive,
  optionally animated, image resource that is neither paged nor scripted.</p>

  <p>The <code data-x="attr-img-srcset">srcset</code> attribute may also be present.
  If present, its value must consist of one or more
  <span data-x="image candidate string">image candidate strings</span>,
  each separated from the next by a U+002C COMMA character (,).
  If an <span>image candidate string</span> contains no descriptors
  and no <span data-x="space character">space characters</span> after the URL,
  the following <span>image candidate string</span>, if there is one,
  must begin with one or more <span data-x="space character">space characters</span>.</p>

  <!-- XXXX
  <div class="note">

   <p>The <code data-x="attr-img-srcset">srcset</code> attribute allows authors to provide a set of
   images to handle graphical displays of varying dimensions and pixel densities.</p>

   <p>The attribute essentially takes a comma-separated list of URLs each with one or more
   descriptors giving the maximum viewport dimensions and pixel density allowed to use the image.
   From the available options, the user agent then picks the most appropriate image. If the viewport
   dimensions or pixel density changes, the user agent can replace the image data with a new image
   on the fly.</p>

   <p>To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or
   2x, where "100w" means "maximum viewport width of 100 CSS pixels", "100h" is the same but for
   height, and "2x" means "maximum pixel density of 2 device pixels per CSS pixel".</p>

  </div>
  -->

  <p>An <dfn>image candidate string</dfn> consists of the following components, in order, with the
  further restrictions described below this list:</p>

  <ol>

   <li><p>Zero or more <span data-x="space character">space characters</span>.</p></li>

   <li><p>A <span>valid non-empty URL</span> that does not start or end with a U+002C COMMA character (,),
   referencing a non-interactive, optionally animated, image resource
   that is neither paged nor scripted.</p></li>

   <li><p>Zero or more <span data-x="space character">space characters</span>.</p></li>

   <li>

    <p>Zero or one of the following:</p>

    <ul>

     <li><p>A <i>width descriptor</i>, consisting of:
     a <span>space character</span>,
     a <span>valid non-negative integer</span> giving a number greater than zero
     representing the <i>width descriptor</i> value,
     and a U+0077 LATIN SMALL LETTER W character.</p></li>

     <li><p>A <i>pixel density descriptor</i>, consisting of:
     a <span>space character</span>,
     a <span>valid floating-point number</span> giving a number greater than zero
     representing the <i>pixel density descriptor</i> value,
     and a U+0078 LATIN SMALL LETTER X character.</p></li>

    </ul>

   </li>

   <li><p>Zero or more <span data-x="space character">space characters</span>.</p></li>

  </ol>

  <p>There must not be an <span>image candidate string</span> for an element that
  has the same <i>width descriptor</i> value as another
  <span>image candidate string</span>'s <i>width descriptor</i> value for the same element.</p>

  <p>There must not be an <span>image candidate string</span> for an element that
  has the same <i>pixel density descriptor</i> value as another
  <span>image candidate string</span>'s <i>pixel density descriptor</i> value for the same element.
  For the purpose of this requirement,
  an <span>image candidate string</span> with no descriptors is equivalent to
  an <span>image candidate string</span> with a <code data-x="">1x</code> descriptor.</p>

  <p>If a <code data-x="picture-source">source</code> element has a <code data-x="attr-picture-source-sizes">sizes</code> attribute present
  or an <code>img</code> element has a <code data-x="attr-img-sizes">sizes</code> attribute present,
  all <span data-x="image candidate string">image candidate strings</span> for that
  element must have the <i>width descriptor</i> specified.</p>

  <p>If an <span>image candidate string</span> for an <code data-x="picture-source">source</code> or <code>img</code> element
  has the <i>width descriptor</i> specified,
  all other <span data-x="image candidate string">image candidate strings</span> for that element
  must also have the <i>width descriptor</i> specified.</p>

  <p>The specified width in an <span>image candidate string</span>'s <i>width descriptor</i>
  must match the intrinsic width in the resource given by the <span>image candidate string</span>'s URL,
  if it has an intrinsic width.</p>

  <p class="note">The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs,
  JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element),
  animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root
  element that use declarative SMIL animation), and so forth. However, these definitions preclude
  SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text
  documents, and so forth. <ref spec=PNG> <ref spec=GIF> <ref spec=JPEG> <ref spec=PDF>
  <ref spec=XML> <ref spec=APNG> <!-- <ref spec=AGIF> --> <ref spec=SVG> <ref spec=MNG> </p>

  <p>If the <code data-x="attr-img-srcset">srcset</code> attribute is present,
  the <dfn data-x="attr-img-sizes"><code>sizes</code></dfn> attribute may also be present.
  If present, its value must be a <span>valid source size list</span>.</p>

  <p>A <dfn>valid source size list</dfn> is a string that matches the following grammar:
  <ref spec=CSSVALUES> <ref spec=MQ></p>

<pre><dfn>&lt;source-size-list></dfn> = <span>&lt;source-size></span># [ , <span>&lt;source-size-value></span> ]? | <span>&lt;source-size-value></span>
<dfn>&lt;source-size></dfn> = <span>&lt;media-condition></span> <span>&lt;source-size-value></span>
<dfn>&lt;source-size-value></dfn> = <span>&lt;length></span></pre>

  <p>A <span>&lt;source-size-value></span> must not be negative.</p>

  <p class="note">Percentages are not allowed in a <span>&lt;source-size-value></span>,
  to avoid confusion about what it would be relative to.
  The <code data-x="">vw</code> unit can be used for sizes relative to the viewport width.</p>

  <p>The <code>img</code> element must not be used as a layout tool. In particular, <code>img</code>
  elements should not be used to display transparent images, as such images rarely convey meaning and
  rarely add anything useful to the document.</p>

  <hr>

  <p>The <dfn data-x="attr-img-crossorigin"><code>crossorigin</code></dfn> attribute is a <span>CORS
  settings attribute</span>. Its purpose is to allow images from third-party sites that allow
  cross-origin access to be used with <code>canvas</code>.</p>

  <div w-nodev>

  <hr>

  <p>An <code>img</code> element has a <dfn>current request</dfn> and a <dfn>pending request</dfn>.
  The <span>current request</span> is initially set to a new <span>image request</span>.
  The <span>pending request</span> is initially set to null.
  The <span>current request</span> is usually referred to as the <code>img</code> element itself.</p>

  <p>An <dfn>image request</dfn> has a <dfn data-x="img-req-state">state</dfn>, <dfn data-x="img-req-url">current URL</dfn> and <dfn data-x="img-req-data">image data</dfn>.</p>

  <p>An <span>image request</span>'s <span data-x="img-req-state">state</span> is one of the following:</p>

  <dl>

   <dt><dfn data-x="img-none">Unavailable</dfn></dt>
   <dd>The user agent hasn't obtained any image data,
   or has obtained some or all of the image data but
   hasn't yet decoded enough of the image to get the image dimensions.</dd>

   <dt><dfn data-x="img-inc">Partially available</dfn></dt>
   <dd>The user agent has obtained some of the image data and at least the image dimensions are
   available.</dd>

   <dt><dfn data-x="img-all">Completely available</dfn></dt>
   <dd>The user agent has obtained all of the image data and at least the image dimensions are
   available.</dd>

   <dt><dfn data-x="img-error">Broken</dfn></dt>
   <dd>The user agent has obtained all of the image data that it can, but it cannot even decode the
   image enough to get the image dimensions (e.g. the image is corrupted, or the format is not
   supported, or no data could be obtained).</dd>

  </dl>

  <p>An <span>image request</span>'s <span data-x="img-req-url">current URL</span> is initially the empty string.</p>

  <p>An <span>image request</span>'s <span data-x="img-req-data">image data</span> is the decoded image data.</p>

  <p>When an <span>image request</span> is either in the <span data-x="img-inc">partially
  available</span> state or in the <span data-x="img-all">completely available</span> state, it is
  said to be <dfn data-x="img-available">available</dfn>.</p>

  <p>An <span>image request</span> is initially <span data-x="img-none">unavailable</span>.</p>

  <p>When an <code>img</code> element is <span data-x="img-available">available</span>, it
  <span>provides a paint source</span> whose width is the image's intrinsic width (if any), whose height is
  the image's intrinsic height (if any), and whose appearance is the intrinsic appearance of the image.</p>

  <p>In a <span>browsing context</span> where <span data-x="concept-bc-noscript">scripting is
  disabled</span>, user agents may obtain images immediately or on demand. In a <span>browsing
  context</span> where <span data-x="concept-bc-noscript">scripting is enabled</span>, user agents
  must obtain images immediately.</p>

  <p>A user agent that obtains images immediately must synchronously
  <span>update the image data</span> of an <code>img</code> element,
  with the <i>restart animation</i> flag set if so stated,
  whenever that element is created or has experienced <span>relevant mutations</span>.</p>

  <p>A user agent that obtains images on demand must <span>update the image data</span> of an
  <code>img</code> element whenever it needs the image data (i.e. on demand),
  but only if the <code>img</code> element is in the
  <span data-x="img-none">unavailable</span> state. When an <code>img</code> element
  has experienced <span>relevant mutations</span>, if the user
  agent only obtains images on demand, the <code>img</code> element must return to the <span
  data-x="img-none">unavailable</span> state.</p>

  <p>The <dfn>relevant mutations</dfn> for an <code>img</code> element are as follows:</p>

  <ul>

   <li><p>The element's <code data-x="attr-img-src">src</code>,
   <code data-x="attr-img-srcset">srcset</code>
   or <code data-x="attr-img-sizes">sizes</code> attributes are set, changed, or removed.</p></li>

   <li><p>The element's <code data-x="attr-img-src">src</code> attribute is set to the same value as the previous value.
   This must set the <i>restart animation</i> flag for the <span>update the image data</span> algorithm.</p></li>

   <li><p>The element's <code data-x="attr-img-crossorigin">crossorigin</code> attribute's state is changed.</p></li>

   <li><p>The <span data-x="nodes are inserted">element is inserted</span> into or
   <span data-x="nodes are removed">removed</span> from a <code>picture</code> parent element.</p></li>

   <li><p>The element's parent is a <code>picture</code> element and a
   <code data-x="picture-source">source</code> <span data-x="nodes are inserted">element is inserted</span> as a previous sibling.</p></li>

   <li><p>The element's parent is a <code>picture</code> element and a
   <code data-x="picture-source">source</code> element that was a previous sibling is <span data-x="nodes are removed">removed</span>.</p></li>

   <li><p>The element's parent is a <code>picture</code> element and a
   <code data-x="picture-source">source</code> element that is a previous sibling has its
   <code data-x="attr-picture-source-srcset">srcset</code>,
   <code data-x="attr-picture-source-sizes">sizes</code>,
   <code data-x="attr-picture-source-media">media</code>
   or <code data-x="attr-picture-source-type">type</code> attributes set, changed, or removed.</p></li>

   <li><p>The element's <span data-x="concept-node-adopt-ext">adopting steps</span> are run.</p></li>

   <!-- NOT when the base URL changes (except for when adopted into a new doc) -->

  </ul>

  <p>Each <code>img</code> element has a <dfn>last selected source</dfn>, which must initially be
  null.</p>

  <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 CSS pixels, was
  the <span>current pixel density</span>.</p>

  <p class="example">For example, if the <span>current pixel density</span> is 3.125, that means
  that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an
  intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</p>

  <p>Each <code>Document</code> object must have a <dfn>list of available images</dfn>. Each image
  in this list is identified by a tuple consisting of an <span>absolute URL</span>, a <span>CORS
  settings attribute</span> mode, and, if the mode is not <span data-x="attr-crossorigin-none">No
  CORS</span>, an <span>origin</span>.
  Each image furthermore has an <dfn>ignore higher-layer caching</dfn> flag.
  User agents may copy entries from one <code>Document</code>
  object's <span>list of available images</span> to another at any time (e.g. when the
  <code>Document</code> is created, user agents can add to it all the images that are loaded in
  other <code>Document</code>s), but must not change the keys of entries copied in this way when
  doing so, and must unset the <span>ignore higher-layer caching</span> flag for the copied entry.
  User agents may also remove images from such lists at any time (e.g. to save
  memory).
  User agents must remove entries in the <span>list of available images</span> as appropriate
  given higher-layer caching semantics for the resource (e.g. the HTTP <code data-x="">Cache-Control</code>
  response header) when the <span>ignore higher-layer caching</span> is unset.</p>

  <p class="note">The <span>list of available images</span> is intended to enable synchronous switching
  when changing the <code data-x="attr-img-src">src</code> attribute to a URL that has previously been loaded,
  and to avoid re-downloading images in the same document even when they don't allow caching per HTTP.
  It is not used to avoid re-downloading the same image while the previous image is still loading,
  but the <span>fetch</span> algorithm allows the download to be reused in that case.</p>

  <p class="note">The user agent can also store the image data separately from the <span>list of available images</span>.</p>

  <p class="example">For example, if a resource has the HTTP response header <code data-x="">Cache-Control: must-revalidate</code>,
  the user agent would remove it from the <span>list of available images</span> but could keep the image data separately,
  and use that if the server responds with a <code data-x="">304 Not Modified</code> status.</p>

  <p>When the user agent is to <dfn>update the image data</dfn> of an <code>img</code> element,
  optionally with the <i>restart animations</i> flag set,
  it must run the following steps:</p>

  <ol>

   <li>

    <p>If the element's <span>node document</span> is not the <span>active document</span>,
    then run these substeps:</p>

    <ol>

     <li><p>Continue running this algorithm <span>in parallel</span>.</p></li>

     <li><p>Wait until the element's <span>node document</span> is the <span>active document</span>.</p></li>

     <li><p>If another instance of this algorithm for this <code>img</code> element was started after this instance
     (even if it aborted and is no longer running), then abort these steps.</p></li>

     <li><p><span>Queue a microtask</span> to continue this algorithm.</p></li>

    </ol>

   </li>

   <li><p>If the user agent cannot support images, or its support for images has been disabled, then
   <span>abort the image request</span> for the <span>current request</span> and the <span>pending request</span>,
   set <span>current request</span> to the <span data-x="img-none">unavailable</span> state,
   let <span>pending request</span> be null,
   and abort these steps.</p></li>

   <li>

    <p>If the element does not have a <code data-x="attr-img-srcset">srcset</code> attribute specified and
    it does not have a parent or it has a parent but it is not a <code>picture</code> element,
    and it has a <code data-x="attr-img-src">src</code> attribute specified and
    its value is not the empty string, let <var>selected source</var> be the value of the
    element's <code data-x="attr-img-src">src</code> attribute, and <var>selected pixel
    density</var> be 1.0. Otherwise, let <var>selected source</var> be null and <var>selected pixel density</var> be undefined.</p>

   </li>

   <li><p>Let the <code>img</code> element's <span>last selected source</span> be <var>selected source</var>.</p></li>

   <li>

    <p>If <var>selected source</var> is not null, run these substeps:</p>

    <ol>

     <li><p><span data-x="resolve a url">Resolve</span> <var>selected source</var>, relative
     to the element, and let the result be <var>absolute URL</var>. If that is not successful, then
     abort these inner set of steps.</p></li>
     <!-- This does not change currentSrc -->

     <li><p>Let <var>key</var> be a tuple consisting of the resulting <span>absolute
     URL</span>, the <code>img</code> element's <code data-x="attr-img-crossorigin">crossorigin</code>
     attribute's mode, and, if that mode is not <span data-x="attr-crossorigin-none">No CORS</span>,
     the <span>node document</span>'s <span>origin</span>.</p></li>

     <li><p>If the <span>list of available images</span> contains an entry for <var>key</var>, then
     set the <span>ignore higher-layer caching</span> flag for that entry,
     <span>abort the image request</span> for the <span>current request</span> and the <span>pending request</span>,
     let <span>pending request</span> be null,
     let <span>current request</span> be a new <span>image request</span> whose <span data-x="img-req-data">image data</span> is that of the entry
     and whose state is set to the <span data-x="img-all">completely available</span> state,
     update the presentation of the image appropriately,
     let the <span>current request</span>'s <span>current pixel density</span> be <var>selected pixel density</var>,
     <span>queue a task</span> to <span>restart the animation</span> if <i>restart animation</i> is set,
     change <span>current request</span>'s <span data-x="img-req-url">current URL</span> to <var>absolute URL</var>,
     and then <span>fire a simple event</span> named <code data-x="event-load">load</code> at the <code>img</code> element,
     and abort these steps.</p></li>

     <!--
     load is a simple event here
     loadstart and loadend do not fire
     -->

    </ol>

   </li>

   <li><p><span>Await a stable state</span>, allowing the <span
   data-x="concept-task">task</span> that invoked this algorithm to continue.
   The <span>synchronous
   section</span> consists of all the remaining steps of this algorithm until the algorithm says the
   <span>synchronous section</span> has ended. (Steps in <span data-x="synchronous
   section">synchronous sections</span> are marked with &#x231B;.)</p></li>

   <li>

    <p>&#x231B; If another instance of this algorithm for this <code>img</code> element was started
    after this instance (even if it aborted and is no longer running), then abort these steps.</p>

    <p class="note">Only the last instance takes effect, to avoid multiple requests when, for
    example, the <code data-x="attr-img-src">src</code>, <code data-x="attr-img-srcset">srcset</code>,
    and <code data-x="attr-img-crossorigin">crossorigin</code> attributes are all set in
    succession.</p>

   </li>

   <li>

    <p>&#x231B; Let <var>selected source</var> and <var>selected pixel density</var> be the
    URL and pixel density that results from <span data-x="select an image source">selecting an image source</span>,
    respectively.</p>

   </li>

   <li>

    <p>&#x231B; If <var>selected source</var> is null, run these substeps:</p>

    <ol>

     <li><p>&#x231B; Set the <span>current request</span> to the <span data-x="img-error">broken</span> state,
     <span>abort the image request</span> for the <span>current request</span> and the <span>pending request</span>,
     and let <span>pending request</span> be null.</p></li>

     <li><p>&#x231B; <span>Queue a task</span> to change the <span>current request</span>'s <span data-x="img-req-url">current URL</span> to the empty string,
     and then, if the element has a <code data-x="attr-img-src">src</code> attribute
     or a <code data-x="attr-img-srcset">srcset</code> attribute
     or a parent that is a <code>picture</code> element,
     <span>fire a simple event</span> named <code data-x="event-error">error</code> at the <code>img</code> element.</p></li>

     <!-- loadstart and loadend do not fire -->

     <li><p>&#x231B; Abort this algorithm.</p></li>

    </ol>

   </li>

   <li>

    <p>&#x231B; <span>Queue a task</span> to <span>fire a progress event</span> named <code data-x="event-loadstart">loadstart</code> at
    the <code>img</code> element.</p>

   </li>

   <li><p>&#x231B; <span data-x="resolve a url">Resolve</span> <var>selected source</var>, relative
   to the element, and let the result be <var>absolute URL</var>. If that is not successful, then
   <span>abort the image request</span> for the <span>current request</span> and the <span>pending request</span>,
   set the <span>current request</span> to the <span data-x="img-error">broken</span> state,
   let <span>pending request</span> be null,
   <span>queue a task</span> to
   change the <span>current request</span>'s <span data-x="img-req-url">current URL</span> to <var>absolute URL</var>,
   <span>fire a simple event</span> named <code data-x="event-error">error</code> at the <code>img</code> element
   and then <span>fire a simple event</span> named <code data-x="event-loadend">loadend</code> at the <code>img</code> element,
   and abort these steps.</p></li>

   <li>

    <p>&#x231B; If the <span>pending request</span> is not null,
    and <var>absolute URL</var> is the same as the <span>pending request</span>'s <span data-x="img-req-url">current URL</span>,
    then abort these steps.</p>

    <p>&#x231B; If <var>absolute URL</var> is the same as the <span>current request</span>'s <span data-x="img-req-url">current URL</span>,
    and <span>current request</span> is in the <span data-x="img-inc">partially available</span> state,
    then <span>abort the image request</span> for the <span>pending request</span>,
    <span>queue a task</span> to <span>restart the animation</span> if <i>restart animation</i> is set,
    and abort these steps.</p>

    <p>&#x231B; If the <span>pending request</span> is not null,
    <span>abort the image request</span> for the <span>pending request</span>.</p>

    <p>&#x231B; Let <var>image request</var> be a new <span>image request</span>
    whose <span data-x="img-req-url">current URL</span> is <var>absolute URL</var>.</p>

    <p>&#x231B; If <span>current request</span> is in the <span data-x="img-none">unavailable</span> state
    or the <span data-x="img-error">broken</span> state,
    let the <span>current request</span> be <var>image request</var>.
    Otherwise, let the <span>pending request</span> be <var>image request</var>.</p>

    <p>&#x231B; Do a <span>potentially CORS-enabled fetch</span><!--FETCH--> of <var>absolute URL</var>,
    with the <i>mode</i> being the current state of
    the element's <code data-x="attr-img-crossorigin">crossorigin</code> content attribute,
    the <i>origin</i> being the <span>origin</span> of the <code>img</code> element's
    <span>node document</span>, and the <i>default origin behaviour</i> set to <i>taint</i>.
    Let this instance of the <span data-x="fetch">fetching</span> algorithm be associated with <var>image request</var>.<!-- XXXX
    "Interaction with the Preload Scanner" from the picture spec --></p>

    <p>If the element has a <code data-x="attr-img-srcset">srcset</code> attribute
    or a parent that is a <code>picture</code> element,
    the fetching request's <span data-x="concept-request-context">context</span> must be set to <i>imageset</i>.
    Otherwise it must be set to <i>image</i>. <ref spec=FETCH></p>

    <p class="critical">This specification does not yet use the "fetch" algorithm from the WHATWG Fetch specification.
    It will be updated to do so in due course.</p>

    <p>The resource obtained in this fashion, if any, is <var>image request</var>'s <span data-x="img-req-data">image data</span>.
    It can be either <span>CORS-same-origin</span> or <span>CORS-cross-origin</span>; this affects
    the <span>origin</span> of the image itself (e.g. when used on a <code>canvas</code>).</p>

    <!-- same text in <input type=image> section and similar text elsewhere -->
    <p>Fetching the image must <span>delay the load event</span> of the element's <span>node document</span> until the
    <span data-x="concept-task">task</span> that is <span data-x="queue a task">queued</span> by the
    <span>networking task source</span> once the resource has been <span
    data-x="fetch">fetched</span> (<a href="#img-load">defined below</a>) has been run.
    <!--XXX or the fetch was aborted, presumably --></p>

    <p class="warning">This, unfortunately, can be used to perform a rudimentary port scan of the
    user's local network (especially in conjunction with scripting, though scripting isn't actually
    necessary to carry out such an attack). User agents may implement <span
    data-x="origin">cross-origin</span> access control policies that are stricter than those
    described above to mitigate this attack, but unfortunately such policies are typically not
    compatible with existing Web content.</p>

    <p>If the resource is <span>CORS-same-origin</span>, each <span data-x="concept-task">task</span>
    that is <span data-x="queue a task">queued</span> by the <span>networking task source</span>
    while the image is being <span data-x="fetch">fetched</span>,
    if <var>image request</var> is the <span>current request</span>,
    must <span>fire a progress event</span> named <code data-x="event-progress">progress</code> at the <code>img</code> element.</p>

   </li>

   <li><p>End the <span>synchronous section</span>, continuing the remaining steps <span>in parallel</span>,
   but without missing any data from the <span>fetch</span> algorithm.</p></li>

   <li>

    <p>As soon as possible, jump to the first applicable entry from the following list:</p>

    <dl class="switch">

     <dt>If the resource type is <code>multipart/x-mixed-replace</code></dt>

     <dd>

      <p>The next <span data-x="concept-task">task</span> that is <span data-x="queue a
      task">queued</span> by the <span>networking task source</span> while the image is being <span
      data-x="fetch">fetched</span> must run the following steps:</p>

      <ol>

       <li>

        <p>If <var>image request</var> is the <span>pending request</span>
        and at least one body part has been completely decoded,
        <span>abort the image request</span> for the <span>current request</span>,
        <span>upgrade the pending request to the current request</span>.</p>

       </li>

       <li>

        <p>Otherwise, if <var>image request</var> is the <span>pending request</span>
        and the user agent is able to determine that <var>image request</var>'s image
        is corrupted in some fatal way such that the image dimensions cannot be obtained,
        <span>abort the image request</span> for the <span>current request</span>,
        <span>upgrade the pending request to the current request</span>
        and set the <span>current request</span>'s state to <span data-x="img-error">broken</span>.</p>

       </li>

       <li>

        <p>Otherwise, if <var>image request</var> is the <span>current request</span>,
        it is in the <span data-x="img-none">unavailable</span> state,
        and the user agent is able to determine <var>image request</var>'s image's width and height,
        set the <span>current request</span>'s state to <span data-x="img-inc">partially available</span>.</p>

       </li>

       <li>

        <p>Otherwise, if <var>image request</var> is the <span>current request</span>,
        it is in the <span data-x="img-none">unavailable</span> state,
        and the user agent is able to determine that <var>image request</var>'s image
        is corrupted in some fatal way such that the image dimensions cannot be obtained,
        set the <span>current request</span>'s state to <span data-x="img-error">broken</span>.
        <!--XXX abort the fetch? fire error event?--></p>

       </li>

      </ol>

      <p>Each <span data-x="concept-task">task</span> that is <span data-x="queue a
      task">queued</span> by the <span>networking task source</span> while the image is being <span
      data-x="fetch">fetched</span> must update the presentation of the image, but as each new body
      part comes in, it must replace the previous image. Once one body part has been completely
      decoded, the user agent must set the <code>img</code> element to the <span
      data-x="img-all">completely available</span> state and <span>queue a task</span> to <span>fire
      a simple event</span> named <code data-x="event-load">load</code> at the <code>img</code>
      element. <!--XXX what if the image is broken? --></p>

      <p class="note">The <code data-x="event-progress">progress</code> and <code
      data-x="event-loadend">loadend</code> events are not fired for
      <code>multipart/x-mixed-replace</code> image streams.</p>

     </dd>

     <dt>If the resource type and data corresponds to a supported image format, <a
     href="#img-determine-type">as described below</a></dt>

     <dd>

      <p>The next <span data-x="concept-task">task</span> that is <span data-x="queue a
      task">queued</span> by the <span>networking task source</span> while the image is being <span
      data-x="fetch">fetched</span> must run the following steps:</p>

      <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 state 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 state to <span data-x="img-inc">partially available</span>.</p>

       </li>

       <li>

        <p>Otherwise, if the user agent is able to determine that <var>image request</var>'s image
        is corrupted in some fatal way such that the image dimensions cannot be obtained,
        and <var>image request</var> is <span>pending request</span>,
        <span>abort the image request</span> for the <span>current request</span> and the <span>pending request</span>,
        <span>upgrade the pending request to the current request</span>,
        set <span>current request</span> to the <span data-x="img-error">broken</span> state,
        <span>fire a simple event</span> named <code data-x="event-error">error</code> at the <code>img</code> element,
        <span>fire a simple event</span> named <code data-x="event-loadend">loadend</code> at the <code>img</code> element,
        and abort these steps.</p>

       </li>

       <li>

        <p>Otherwise, if the user agent is able to determine that <var>image request</var>'s image
        is corrupted in some fatal way such that the image dimensions cannot be obtained,
        and <var>image request</var> is <span>current request</span>,
        <span>abort the image request</span> for <var>image request</var>,
        <span>fire a simple event</span> named <code data-x="event-error">error</code> at the <code>img</code> element,
        <span>fire a simple event</span> named <code data-x="event-loadend">loadend</code> at the <code>img</code> element,
        and abort these steps.</p>

       </li>

      </ol>

      <p id="img-load">That <span data-x="concept-task">task</span>, and each subsequent <span
      data-x="concept-task">task</span>, that is <span data-x="queue a task">queued</span> by the
      <span>networking task source</span> while the image is being <span
      data-x="fetch">fetched</span>,
      if <var>image request</var> is the <span>current request</span>,
      must update the presentation of the image appropriately (e.g. if
      the image is a progressive JPEG, each packet can improve the resolution of the image).</p>

      <p>Furthermore, the last <span data-x="concept-task">task</span> that is <span data-x="queue a
      task">queued</span> by the <span>networking task source</span> once the resource has been
      <span data-x="fetch">fetched</span> must additionally run these steps:</p>

      <ol>

       <!--
       the download was successful
       the user agent was able to determine the image's width and height
       image request is current request or pending request
       pending request might be null or non-null
       -->

       <li><p>If <var>image request</var> is the <span>pending request</span>,
       <span>abort the image request</span> for the <span>current request</span>,
       <span>upgrade the pending request to the current request</span> and
       update the <code>img</code> element's presentation appropriately.</p></li>

       <li><p>Set <var>image request</var> to the <span data-x="img-all">completely
       available</span> state.</p></li>

       <li><p>Add the image to the <span>list of available images</span> using the key <var>key</var>, with the <span>ignore higher-layer caching</span> flag set.</p></li>

       <li><p><span>Fire a progress event or simple event</span> named <code data-x="event-load">load</code>
       at the <code>img</code> element, depending on the resource in <var>image request</var>.</p></li>

       <li><p><span>Fire a progress event or simple event</span> named <code data-x="event-loadend">loadend</code>
       at the <code>img</code> element, depending on the resource in <var>image request</var>.</p></li>

      </ol>

     </dd>

     <dt>Otherwise</dt>

     <dd>

      <p>The image data is not in a supported file format; the user agent must set
      <var>image request</var> to the <span data-x="img-error">broken</span> state,
      <span>abort the image request</span> for the <span>current request</span> and the <span>pending request</span>,
      <span>upgrade the pending request to the current request</span> if <var>image request</var> is the <span>pending request</span>,
      and then <span>queue a task</span> to first <span>fire a simple event</span> named <code
      data-x="event-error">error</code> at the <code>img</code> element and then <span>fire a simple
      event</span> named <code data-x="event-loadend">loadend</code> at the <code>img</code>
      element.</p>

     </dd>

    </dl>

   </li>

  </ol>

  <p>To <dfn>abort the image request</dfn> for an <span>image request</span> <var>image request</var> means to run the following steps:</p>

  <ol>

   <li><p>Forget <var>image request</var>'s <span data-x="img-req-data">image data</span>, if any.</p></li>

   <li><p>Abort any instance of the <span data-x="fetch">fetching</span> algorithm for <var>image request</var>,
   discarding any pending tasks generated by that algorithm.</p></li>

  </ol>

  <p>To <dfn>upgrade the pending request to the current request</dfn> for an <code>img</code> element means to run the following steps:</p>

  <ol>

   <li><p>Let the <code>img</code> element's <span>current request</span> be the <span>pending request</span>.</p></li>

   <li><p>Let the <code>img</code> element's <span>pending request</span> be null.</p></li>

  </ol>

  <p>To <dfn>fire a progress event or simple event</dfn> named <var>type</var> at an element <var>e</var>,
  depending on resource <var>r</var>, means to
  <span>fire a progress event</span> named <var>type</var> at <var>e</var> if <var>r</var> is <span>CORS-same-origin</span>,
  and otherwise <span>fire a simple event</span> named <var>type</var> at <var>e</var>.</p>

  <p>While a user agent is running the above algorithm for an element <var>x</var>, there
  must be a strong reference from the element's <span>node document</span> to the element <var>x</var>,
  even if that element is not <span data-x="in a Document">in its <code>Document</code></span>.</p>

  <p>When an <code>img</code> element is in the <span data-x="img-all">completely available</span>
  state <em>and</em> the user agent can decode the media data without errors, then the
  <code>img</code> element is said to be <dfn data-x="img-good">fully decodable</dfn>.</p>

  <p>Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code
  <span data-x="concept-http-equivalent-codes">or equivalent</span>) must be ignored when determining
  the image's type and whether it is a valid image.</p>

  <p class="note">This allows servers to return images with error responses, and have them
  displayed.</p>

  <p id="img-determine-type">The user agent should apply the <span data-x="Content-Type sniffing:
  image">image sniffing rules</span> to determine the type of the image, with the image's <span
  data-x="Content-Type">associated Content-Type headers</span> giving the <var>official
  type</var>. If these rules are not applied, then the type of the image must be the type given by
  the image's <span data-x="Content-Type">associated Content-Type headers</span>.</p>

  <p>User agents must not support non-image resources with the <code>img</code> element (e.g. XML
  files whose root element is an HTML element). User agents must not run executable code (e.g.
  scripts) embedded in the image resource. User agents must only display the first page of a
  multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an
  interactive fashion, but should honour any animation in the resource.</p>

  <p>This specification does not specify which image types are to be supported.</p>

  <hr>

  <p>An <code>img</code> element is associated with a <span>source set</span>.</p>

  <p>A <dfn>source set</dfn> is an ordered set of zero or more <span data-x="image source">image sources</span>
  and a <span>source size</span>.</p>

  <p>An <dfn>image source</dfn> is a <span>URL</span>,
  and optionally either a density descriptor, or a width descriptor.</p>

  <p>A <dfn>source size</dfn> is a <span>&lt;source-size-value></span>.
  When a <span>source size</span> has a unit relative to the viewport,
  it must be interpreted relative to the <code>img</code> element's <span>node document</span>'s viewport.
  Other units must be interpreted the same as in Media Queries. <ref spec=MQ></p>

  <p>A <span>source size</span> must not use CSS functions other than the <code data-x="">calc()</code> function.</p>

  <p>When asked to <dfn>select an image source</dfn> for a given <code>img</code> element <var>el</var>,
  user agents must do the following:</p>

  <ol>

   <li><p><span>Update the source set</span> for <var>el</var>.</p></li>

   <li><p>If <var>el</var>'s <span>source set</span> is empty,
   return null as the URL and undefined as the pixel density and abort these steps.</p></li>

   <li><p>Otherwise, take <var>el</var>'s <span>source set</span>
   and let it be <var>source set</var>.</p></li>

   <li><p>If an entry <var>b</var> in <var>source set</var> has the same associated density descriptor
   as an earlier entry <var>a</var> in <var>source set</var>, then remove entry <var>b</var>.
   Repeat this step until none of the entries in <var>source set</var> have the same associated density descriptor as an earlier entry.</p></li>

   <li><p>In a user agent-specific manner,
   choose one <span>image source</span> from <var>source set</var>.
   Let this be <var>selected source</var>.</p></li>

   <li><p>Return <var>selected source</var> and its associated pixel density.</p></li>

  </ol>

  <p>When asked to <dfn>update the source set</dfn> for a given <code>img</code> element <var>el</var>,
  user agents must do the following:</p>

  <ol>

   <li><p>Set <var>el</var>'s <span>source set</span> to an empty <span>source set</span>.</p></li>

   <li><p>If <var>el</var> has a parent node and that is a <code>picture</code> element,
   let <var>elements</var> be an array containing <var>el</var>'s parent node's child elements, retaining relative order.
   Otherwise, let <var>elements</var> be array containing only <var>el</var>.</p></li>

   <li>

    <p>Iterate through <var>elements</var>,
    doing the following for each item <var>child</var>:</p>

    <ol>

     <li>

      <p>If <var>child</var> is <var>el</var>:</p>

      <ol>

       <li><p>If <var>child</var> has a <code data-x="attr-img-srcset">srcset</code> attribute,
       <span data-x="parse a srcset attribute">parse <var>child</var>'s srcset attribute</span>
       and let the returned <span>source set</span> be <var>source set</var>.
       Otherwise, let <var>source set</var> be an empty <span>source set</span>.</p></li>

       <li><p><span data-x="parse a sizes attribute">Parse <var>child</var>'s sizes attribute</span> and
       let <var>source set</var>'s <span>source size</span> be the returned value.</p></li>

       <li><p>If <var>child</var> has a <code data-x="attr-img-src">src</code> attribute
       whose value is not the empty string
       and <var>source set</var> does not contain an
       <span>image source</span> with a density descriptor value of 1,
       and no <span>image source</span> with a width descriptor,
       append <var>child</var>'s <code data-x="attr-img-src">src</code> attribute value to <var>source set</var>.</p></li>

       <li><p><span>Normalise the source densities</span> of <var>source set</var>.</p></li>

       <li><p>Let <var>el</var>'s <span>source set</span> be <var>source set</var>.</p></li>

       <li><p>Abort this algorithm.</p></li>

      </ol>

     </li>

     <li><p>If <var>child</var> is not a <code data-x="picture-source">source</code> element,
     continue to the next child.
     Otherwise, <var>child</var> is a <code data-x="picture-source">source</code> element.</p></li>

     <li><p>If <var>child</var> does not have a <code data-x="attr-picture-source-srcset">srcset</code> attribute,
     continue to the next child.</p></li>

     <li><p><span data-x="parse a srcset attribute">Parse <var>child</var>'s srcset attribute</span> and
     let the returned <span>source set</span> be <var>source set</var>.</p></li>

     <li><p>If <var>source set</var> has zero <span data-x="image source">image sources</span>,
     continue to the next child.</p></li>

     <li><p>If <var>child</var> has a <code data-x="attr-picture-source-media">media</code> attribute,
     and its value does not <span data-x="matches the environment">match the environment</span>,
     continue to the next child.</p></li>

     <li><p><span data-x="parse a sizes attribute">Parse <var>child</var>'s sizes attribute</span>
     and let <var>source set</var>'s <span>source size</span> be the returned value.</p></li>

     <li><p>If <var>child</var> has a <code data-x="attr-picture-source-type">type</code> attribute,
     and its value is an unknown or unsupported <span>MIME type</span>,
     continue to the next child.</p></li>

     <li><p><span>Normalise the source densities</span> of <var>source set</var>.</p></li>

     <li><p>Let <var>el</var>'s <span>source set</span> be <var>source set</var>.</p></li>

     <li><p>Abort this algorithm.</p></li>

    </ol>

   </li>

  </ol>

  <p class="note">Each <code>img</code> element independently considers
  its previous sibling <code data-x="picture-source">source</code> elements
  plus the <code>img</code> element itself
  for selecting an <span>image source</span>, ignoring any other (invalid) elements,
  including other <code>img</code> elements in the same <code>picture</code> element,
  or <code data-x="picture-source">source</code> elements that are following siblings
  of the relevant <code>img</code> element.</p>

  <p>When asked to <dfn>parse a srcset attribute</dfn> from an element,
  parse the value of the element's <code data-x="">srcset</code> attribute as follows:</p>

  <ol>

   <li><p>Let <var>input</var> be the value passed to this algorithm.</p></li>

   <li><p>Let <var>position</var> be a pointer into <var>input</var>,
   initially pointing at the start of the string.</p></li>

   <li><p>Let <var>candidates</var> be an initially empty <span>source set</span>.</p></li>

   <li><p><i>Splitting loop</i>: <span>Collect a sequence of characters</span>
   that are <span data-x="space character">space characters</span> or U+002C COMMA characters.
   If any U+002C COMMA characters were collected, that is a <span data-x="concept-microsyntax-parse-error">parse error</span>.</p></li>

   <li><p>If <var>position</var> is past the end of <var>input</var>,
   return <var>candidates</var> and abort these steps.</p></li>

   <li><p><span>Collect a sequence of characters</span> that are not
   <span data-x="space character">space characters</span>, and let that be <var>url</var>.</p></li>

   <li><p>Let <var>descriptors</var> be a new empty list.</p></li>

   <li>

    <p>If <var>url</var> ends with a U+002C COMMA character (,),
    follow these substeps:</p>

    <ol>

     <li><p>Remove all trailing U+002C COMMA characters from <var>url</var>.
     If this removed more than one character,
     that is a <span data-x="concept-microsyntax-parse-error">parse error</span>.</p></li>

    </ol>

    <p>Otherwise, follow these substeps:</p>

    <ol>

     <li><p><i>Descriptor tokeniser</i>: <span>Skip whitespace</span></p></li>

     <li><p>Let <var>current descriptor</var> be the empty string.</p></li>

     <li><p>Let <var>state</var> be <i>in descriptor</i>.</p></li>

     <li>

      <p>Let <var>c</var> be the character at <var>position</var>.
      Do the following depending on the value of <var>state</var>.
      For the purpose of this step, "EOF" is a special character representing
      that <var>position</var> is past the end of <var>input</var>.</p>

      <dl class="switch">

       <dt><i title>In descriptor</i></dt>

       <dd>

        <p>Do the following, depending on the value of <var>c</var>:</p>

        <dl class="switch">

         <dt><span>Space character</span></dt>

         <dd><p>If <var>current descriptor</var> is not empty,
         append <var>current descriptor</var> to <var>descriptors</var>
         and let <var>current descriptor</var> be the empty string.
         Set <var>state</var> to <i>after descriptor</i>.</p></dd>

         <dt>U+002C COMMA (,)</dt>

         <dd><p>Advance <var>position</var> to the next character in <var>input</var>.
         If <var>current descriptor</var> is not empty,
         append <var>current descriptor</var> to <var>descriptors</var>.
         Jump to the step labeled <i>descriptor parser</i>.</p></dd>

         <dt>U+0028 LEFT PARENTHESIS (()</dt>

         <dd><p>Append <var>c</var> to <var>current descriptor</var>.
         Set <var>state</var> to <i>in parens</i>.</p></dd>

         <dt>EOF</dt>

         <dd><p>If <var>current descriptor</var> is not empty,
         append <var>current descriptor</var> to <var>descriptors</var>.
         Jump to the step labeled <i>descriptor parser</i>.</p></dd>

         <dt>Anything else</dt>

         <dd><p>Append <var>c</var> to <var>current descriptor</var>.</p></dd>

        </dl>

       </dd>

       <dt><i title>In parens</i></dt>

       <dd>

        <p>Do the following, depending on the value of <var>c</var>:</p>

        <dl class="switch">

         <dt>U+0029 RIGHT PARENTHESIS ())</dt>

         <dd><p>Append <var>c</var> to <var>current descriptor</var>.
         Set <var>state</var> to <i>in descriptor</i>.</p></dd>

         <dt>EOF</dt>

         <dd><p>Append <var>current descriptor</var> to <var>descriptors</var>.
         Jump to the step labeled <i>descriptor parser</i>.</p></dd>

         <dt>Anything else</dt>

         <dd><p>Append <var>c</var> to <var>current descriptor</var>.</p></dd>

        </dl>

       </dd>

       <dt><i title>After descriptor</i></dt>

       <dd>

        <p>Do the following, depending on the value of <var>c</var>:</p>

        <dl class="switch">

         <dt><span>Space character</span></dt>

         <dd><p>Stay in this state.</p></dd>

         <dt>EOF</dt>

         <dd><p>Jump to the step labeled <i>descriptor parser</i>.</p></dd>

         <dt>Anything else</dt>

         <dd><p>Set <var>state</var> to <i>in descriptor</i>.
         Set <var>position</var> to the <em>previous</em> character in <var>input</var>.</p></dd>

        </dl>

       </dd>

      </dl>

      <p>Advance <var>position</var> to the next character in <var>input</var>.
      Repeat this substep.</p>

      <p class="note">In order to be compatible with future additions,
      this algorithm supports multiple descriptors and descriptors with parens.</p>

     </li>

    </ol>

   </li>

   <li><p><i>Descriptor parser</i>: Let <var>error</var> be <i>no</i>.</p></li>

   <li><p>Let <var>width</var> be <i>absent</i>.</p></li>

   <li><p>Let <var>density</var> be <i>absent</i>.</p></li>

   <li><p>Let <var>future-compat-h</var> be <i>absent</i>.</p></li>

   <li>

    <p>For each descriptor in <var>descriptors</var>,
    run the appropriate set of steps from the following list:</p>

    <dl class=switch>

     <dt>If the descriptor consists of a <span>valid non-negative integer</span>
     followed by a U+0077 LATIN SMALL LETTER W character</dt>

     <dd>

      <ol>

       <li>

        <p>If the user agent does not support the <code data-x="attr-img-sizes">sizes</code> attribute,
        let <var>error</var> be <i>yes</i>.</p>

        <p class="note">A conforming user agent will support the <code data-x="attr-img-sizes">sizes</code> attribute.
        However, user agents typically implement and ship features in an incremental manner in practice.</p>

       </li>

       <li><p>If <var>width</var> and <var>density</var>
       are not both <i>absent</i>,
       then let <var>error</var> be <i>yes</i>.</p></li>

       <li><p>Apply the <span>rules for parsing non-negative integers</span> to the descriptor.
       If the result is zero, let <var>error</var> be <i>yes</i>.
       Otherwise, let <var>width</var> be the result.</p></li>

      </ol>

     </dd>

     <dt>If the descriptor consists of a <span>valid floating-point number</span>
     followed by a U+0078 LATIN SMALL LETTER X character</dt>

     <dd>

      <ol>

       <li><p>If <var>width</var>, <var>density</var> and <var>future-compat-h</var>
       are not all <i>absent</i>,
       then let <var>error</var> be <i>yes</i>.</p></li>

       <li>

        <p>Apply the <span>rules for parsing floating-point number values</span> to the descriptor.
        If the result is less than zero, let <var>error</var> be <i>yes</i>.
        Otherwise, let <var>density</var> be the result.</p>

        <p class="note">If <var>density</var> is zero,
        the intrinsic dimensions will be infinite.
        User agents are expected to have limits in how big images can be rendered,
        which is allowed by the <a href="#hardwareLimitations">hardware limitations</a> clause.</p>

       </li>

      </ol>

     </dd>

     <dt>If the descriptor consists of a <span>valid non-negative integer</span>
     followed by a U+0068 LATIN SMALL LETTER H character</dt>

     <dd>

      <p>This is a <span data-x="concept-microsyntax-parse-error">parse error</span>.</p>

      <ol>

       <li><p>If <var>future-compat-h</var> and <var>density</var>
       are not both <i>absent</i>,
       then let <var>error</var> be <i>yes</i>.</p></li>

       <li><p>Apply the <span>rules for parsing non-negative integers</span> to the descriptor.
       If the result is zero, let <var>error</var> be <i>yes</i>.
       Otherwise, let <var>future-compat-h</var> be the result.</p></li>

      </ol>

     </dd>

     <dt>Anything else</dt>

     <dd><p>Let <var>error</var> be <i>yes</i>.</p></dd>

    </dl>

   </li>

   <li><p>If <var>future-compat-h</var> is not <i>absent</i> and <var>width</var> is <i>absent</i>,
   let <var>error</var> be <i>yes</i>.</p></li>

   <li><p>If <var>error</var> is still <i>no</i>,
   then append a new <span>image source</span> to <var>candidates</var>
   whose URL is <var>url</var>,
   associated with a width <var>width</var> if not <i>absent</i>
   and a pixel density <var>density</var> if not <i>absent</i>.
   Otherwise, there is a <span data-x="concept-microsyntax-parse-error">parse error</span>.</p></li>

   <li><p>Return to the step labeled <i>splitting loop</i>.</p></li>

  </ol>

  <p>When asked to <dfn>parse a sizes attribute</dfn> from an element,
  <span>parse a comma-separated list of component values</span>
  from the value of the element's <code data-x="">sizes</code> attribute
  (or the empty string, if the attribute is absent),
  and let <var>unparsed sizes list</var> be the result. <ref spec=CSSSYNTAX></p>

  <p>For each <var>unparsed size</var> in <var>unparsed sizes list</var>:</p>

  <ol>

   <li><p>Remove all consecutive <span>&lt;whitespace-token></span>s
   from the end of <var>unparsed size</var>.
   If <var>unparsed size</var> is now empty,
   that is a <span data-x="concept-microsyntax-parse-error">parse error</span>;
   continue to the next iteration of this algorithm.</p></li>

   <li><p>If the last <span>component value</span> in <var>unparsed size</var>
   is a valid non-negative <span>&lt;source-size-value></span>,
   let <var>size</var> be its value
   and remove the <span>component value</span> from <var>unparsed size</var>.
   Any CSS function other than the <code data-x="">calc()</code> function is invalid.
   Otherwise, there is a <span data-x="concept-microsyntax-parse-error">parse error</span>;
   continue to the next iteration of this algorithm.</p></li>

   <li><p>Remove all consecutive <span>&lt;whitespace-token></span>s
   from the end of <var>unparsed size</var>.
   If <var>unparsed size</var> is now empty,
   return <var>size</var> and exit this algorithm.
   If this was not the last item in <var>unparsed sizes list</var>,
   that is a <span data-x="concept-microsyntax-parse-error">parse error</span>.</p></li>

   <li><p>Parse the remaining <span data-x="component value">component values</span> in <var>unparsed size</var>
   as a <span>&lt;media-condition></span>.
   If it does not parse correctly,
   or it does parse correctly but the <span>&lt;media-condition></span> evaluates to false,
   continue to the next iteration of this algorithm. <ref spec=MQ></p></li>

   <li><p>Return <var>size</var> and exit this algorithm.</p></li>

  </ol>

  <p>If the above algorithm exhausts <var>unparsed sizes list</var> without returning a <var>size</var> value,
  return <code data-x="">100vw</code>.</p>

  <p>A <dfn data-x="concept-microsyntax-parse-error">parse error</dfn> for the algorithms above
  indicates a non-fatal mismatch between input and requirements.
  User agents are encouraged to expose <span data-x="concept-microsyntax-parse-error">parse error</span>s somehow.</p>

  <p class="note">While a <span>valid source size list</span> only contains a bare <span>&lt;source-size-value></span>
  (without an accompanying <span>&lt;media-condition></span>)
  as the last entry in the <span>&lt;source-size-list></span>,
  the parsing algorithm technically allows such at any point in the list,
  and will accept it immediately as the size
  if the preceding entries in the list weren't used.
  This is to enable future extensions,
  and protect against simple author errors such as a final trailing comma.</p>

  <p>An <span>image source</span> can have a density descriptor,
  a width descriptor,
  or no descriptor at all accompanying its URL.
  Normalising a <span>source set</span> gives every <span>image source</span> a density descriptor.</p>

  <p>When asked to <dfn>normalise the source densities</dfn> of a <span>source set</span> <var>source set</var>,
  the user agent must do the following:</p>

  <ol>

   <li><p>Let <var>source size</var> be <var>source set</var>'s <span>source size</span>.</p></li>

   <li>

    <p>For each <span>image source</span> in <var>source set</var>:</p>

    <ol>

     <li><p>If the <span>image source</span> has a density descriptor,
     continue to the next <span>image source</span>.</p></li>

     <li>

      <p>Otherwise, if the <span>image source</span> has a width descriptor,
      replace the width descriptor with a density descriptor
      with a value of the width descriptor divided by the <span>source size</span>
      and a unit of <code data-x="">x</code>.</p>

      <p class="note">If the <span>source size</span> is zero,
      the density would be infinity,
      which results in the intrinsic dimensions being zero by zero.</p>

     </li>

     <li><p>Otherwise, give the <span>image source</span> a density descriptor of <code data-x="">1x</code>.</p></li>

    </ol>

   </li>

  </ol>

  <p id="img-environment-changes">The user agent may at any time run the following algorithm to update an <code>img</code>
  element's image in order to react to changes in the environment. (User agents are <em>not
  required</em> to ever run this algorithm; for example, if the user is not looking at the page any
  more, the user agent might want to wait until the user has returned to the page before determining
  which image to use, in case the environment changes again in the meantime.)</p>

  <ol>

   <li><p><span>Await a stable state</span>. The <span>synchronous section</span>
   consists of all the remaining steps of this algorithm until the algorithm says the
   <span>synchronous section</span> has ended. (Steps in <span data-x="synchronous
   section">synchronous sections</span> are marked with &#x231B;.)</p></li>

   <li><p>&#x231B; If the <code>img</code> element does not have a
   <code data-x="attr-img-srcset">srcset</code> attribute specified and
   it either has no parent or it is not a <code>picture</code> element,
   has image data whose resource type is <code>multipart/x-mixed-replace</code>,
   or the <span>pending request</span> is not null,
   then abort this algorithm.</p></li>

   <!-- we don't support replacing push-JPEG images because defining what happens with
   the tasks and events and so on in that case would become implausibly complicated. -->

   <li><p>&#x231B; Let <var>selected source</var> and <var>selected pixel
   density</var> be the URL and pixel density that results from <span data-x="select an image source">selecting an image source</span>, respectively.</p></li>

   <li><p>&#x231B; If <var>selected source</var> is null, then abort these steps.</p></li>
   <!-- not sure this can ever actually happen -->

   <li><p>&#x231B; If <var>selected source</var> and <var>selected pixel
   density</var> are the same as the element's <span>last selected source</span> and <span>current
   pixel density</span>, then abort these steps.</p></li> <!-- note that this check happens before
   base URL resolution, so changing the base URL doesn't trigger an update if nothing else changed
   -->

   <li><p>&#x231B; <span data-x="resolve a url">Resolve</span> <var>selected source</var>,
   relative to the element, and let the result be <var>absolute URL</var>.
   If that is not successful, abort these steps.</p></li>

   <li><p>&#x231B; Let <var>CORS mode</var> be the state of the element's <code
   data-x="attr-img-crossorigin">crossorigin</code> content attribute.</p></li>

   <li><p>&#x231B; Let <var>origin</var> be the <span>origin</span> of the <code>img</code> element's <span>node document</span>.</p></li>

   <li><p>&#x231B; Let <var>key</var> be a tuple consisting of <var>absolute URL</var>,
   <var>CORS mode</var>,
   and, if <var>CORS mode</var> is not <span data-x="attr-crossorigin-none">No CORS</span>, <var>origin</var>.</p></li>

   <li><p>&#x231B; Let <var>image request</var> be a new <span>image request</span>
   whose <span data-x="img-req-url">current URL</span> is <var>absolute URL</var></p></li>

   <li><p>&#x231B; Let the element's <span>pending request</span> be <var>image request</var>.</p></li>

   <li><p>End the <span>synchronous section</span>, continuing the remaining steps
   <span>in parallel</span>.</p></li>

   <li>

    <p>If the <span>list of available images</span> contains an entry for <var>key</var>,
    then set <var>image request</var>'s <span data-x="img-req-data">image data</span> to that of the entry.
    Continue to the next step.</p>

    <p>Otherwise, do a <span>potentially CORS-enabled fetch</span><!--FETCH--> of <var>absolute URL</var>,
    with the <i>mode</i> being <var>CORS mode</var>,
    the <i>origin</i> being <var>origin</var>,
    and the <i>default origin behaviour</i> set to <i>taint</i>.</p>

    <p>If this download fails in any way (other than the response code not being a 2xx code, as
    mentioned earlier), or if the image format is unsupported (as determined by applying the <span
    data-x="Content-Type sniffing: image">image sniffing rules</span>, again as mentioned earlier),
    or if the user agent is able to determine that <var>image request</var>'s image is corrupted in some fatal way such that the image dimensions cannot be obtained,
    or if the resource type is <code>multipart/x-mixed-replace</code>, then
    let <span>pending request</span> be null and abort these steps.</p>

    <p>Otherwise, wait for the <span>fetch</span> algorithm to queue its last task, and then
    continue with these steps.
    The resource obtained in this fashion, if any, is <var>image request</var>'s <span data-x="img-req-data">image data</span>.
    It can be either <span>CORS-same-origin</span> or <span>CORS-cross-origin</span>;
    this affects the <span>origin</span> of the image itself (e.g. when used on a <code>canvas</code>).</p>

   </li>

   <li>

    <p><span>Queue a task</span> to run the following substeps:</p>

    <ol>

     <li><p>If the <code>img</code> element has experienced <span>relevant mutations</span>
     since this algorithm started, then let <span>pending request</span> be null and abort these steps.</p>

     <li><p>Let the <code>img</code> element's <span>last selected source</span> be <var>selected source</var>
     and the <code>img</code> element's <span>current pixel density</span> be <var>selected pixel density</var>.</p></li>

     <li><p>Set <var>image request</var> to the <span data-x="img-all">completely available</span> state.</p></li>

     <li><p>Add the image to the <span>list of available images</span> using the key <var>key</var>,
     with the <span>ignore higher-layer caching</span> flag set.</p></li>

     <li><p><span>Upgrade the pending request to the current request</span>.</p></li>

     <li><p>Update the <code>img</code> element's presentation appropriately.</p></li>

     <li><p><span>Fire a simple event</span> named <code data-x="event-load">load</code> at the
     <code>img</code> element.</p></li>

    </ol>

   </li>

  </ol>

  <hr>

  <p>The <span>task source</span> for the <span data-x="concept-task">tasks</span> <span data-x="queue
  a task">queued</span> by algorithms in this section is the <span>DOM manipulation task
  source</span>.</p>

  <hr>

  <p>What an <code>img</code> element represents depends on the <code
  data-x="attr-img-src">src</code> attribute and the <code data-x="attr-img-alt">alt</code>
  attribute.</p>

  <dl class="switch">

   <dt>If the <code data-x="attr-img-src">src</code> attribute is set and the <code
   data-x="attr-img-alt">alt</code> attribute is set to the empty string</dt>

   <dd>

    <p>The image is either decorative or supplemental to the rest of the content, redundant with
    some other information in the document.</p>

    <p>If the image is <span data-x="img-available">available</span> and the user agent is configured
    to display that image, then the element <span>represents</span> the element's image data.</p>

    <p>Otherwise, the element <span>represents</span> nothing, and may be omitted completely from
    the rendering. User agents may provide the user with a notification that an image is present but
    has been omitted from the rendering.</p>

   </dd>

   <dt>If the <code data-x="attr-img-src">src</code> attribute is set and the <code
   data-x="attr-img-alt">alt</code> attribute is set to a value that isn't empty</dt>

   <dd>

    <p>The image is a key part of the content; the <code data-x="attr-img-alt">alt</code> attribute
    gives a textual equivalent or replacement for the image.</p>

    <p>If the image is <span data-x="img-available">available</span> and the user agent is configured
    to display that image, then the element <span>represents</span> the element's image data.</p>

    <p>Otherwise, the element <span>represents</span> the text given by the <code
    data-x="attr-img-alt">alt</code> attribute. User agents may provide the user with a notification
    that an image is present but has been omitted from the rendering.</p>

   </dd>

   <dt>If the <code data-x="attr-img-src">src</code> attribute is set and the <code
   data-x="attr-img-alt">alt</code> attribute is not</dt>

   <dd>

    <p>The image might be a key part of the content, and there is no textual equivalent of the image
    available.</p>

    <p class="note">In a conforming document, the absence of the <code
    data-x="attr-img-alt">alt</code> attribute indicates that the image is a key part of the content
    but that a textual replacement for the image was not available when the image was generated.</p>

    <p>If the image is <span data-x="img-available">available</span> and the user agent is configured
    to display that image, then the element <span>represents</span> the element's image data.</p>

    <p>Otherwise, the user agent should display some sort of indicator that there is an image that
    is not being rendered, and may, if requested by the user, or if so configured, or when required
    to provide contextual information in response to navigation, provide caption information for the
    image, derived as follows:</p>

    <ol>

     <!-- when editing this list, search for the two other occurrences of 'critical-no-alt' -->

     <!-- NOTE: the order of these steps is important; it's intended to make the innermost caption
     override the outer ones -->

     <li><p>If the image has a <code data-x="attr-title">title</code> attribute whose value is not
     the empty string, then the value of that attribute is the caption information; abort these
     steps.</p></li>

<!--CLEANUP-->
     <li><p>If the image is a descendant of a <code>figure</code> element that has a child
     <code>figcaption</code> element, and, ignoring the <code>figcaption</code> element and its
     descendants, the <code>figure</code> element has no <span>flow content</span> descendants other
     than <span>inter-element whitespace</span> and the <code>img</code> element, then the contents of the first such
     <code>figcaption</code> element are the caption information; abort these steps.</p></li>

     <li><p>There is no caption information.</p></li>

    </ol>

   </dd>

   <dt>If the <code data-x="attr-img-src">src</code> attribute is not set and either the <code
   data-x="attr-img-alt">alt</code> attribute is set to the empty string or the <code
   data-x="attr-img-alt">alt</code> attribute is not set at all</dt>

   <dd>

    <p>The element <span>represents</span> nothing.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>The element <span>represents</span> the text given by the <code
    data-x="attr-img-alt">alt</code> attribute.</p>

   </dd>

  </dl>

  <p>The <code data-x="attr-img-alt">alt</code> attribute does not represent advisory information.
  User agents must not present the contents of the <code data-x="attr-img-alt">alt</code> attribute
  in the same way as content of the <code data-x="attr-title">title</code> attribute.</p>

  <p>User agents may always provide the user with the option to display any image, or to prevent any
  image from being displayed. User agents may also apply heuristics to help the user make use of the
  image when the user is unable to see it, e.g. due to a visual disability or because they are using
  a text terminal with no graphics capabilities. Such heuristics could include, for instance,
  optical character recognition (OCR) of text found within the image.</p>

  <p class="warning">While user agents are encouraged to repair cases of missing <code
  data-x="attr-img-alt">alt</code> attributes, authors must not rely on such behaviour. <a
  href="#alt">Requirements for providing text to act as an alternative for images</a> are described
  in detail below.</p>

  <p>The <em>contents</em> of <code>img</code> elements, if any, are ignored for the purposes of
  rendering.</p>

  </div>

  <hr>

  <p>The <code data-x="attr-hyperlink-usemap">usemap</code> attribute,
  if present, can indicate that the image has an associated
  <span>image map</span>.</p>

  <p>The <dfn data-x="attr-img-ismap"><code>ismap</code></dfn>
  attribute, when used on an element that is a descendant of an
  <code>a</code> element with an <code
  data-x="attr-hyperlink-href">href</code> attribute, indicates by its
  presence that the element provides access to a server-side image
  map. This affects how events are handled on the corresponding
  <code>a</code> element.</p>

  <p>The <code data-x="attr-img-ismap">ismap</code> attribute is a
  <span>boolean attribute</span>. The attribute must not be specified
  on an element that does not have an ancestor <code>a</code> element
  with an <code data-x="attr-hyperlink-href">href</code> attribute.</p>

  <p class="note">The <code data-x="attr-hyperlink-usemap">usemap</code> and
  <code data-x="attr-img-ismap">ismap</code> attributes
  can result in confusing behaviour when used together with
  <code data-x="picture-source">source</code> elements with the
  <code data-x="attr-picture-source-media">media</code> attribute specified
  in a <code>picture</code> element.</p>

  <p>The <code>img</code> element supports <span>dimension
  attributes</span>.</p>

  <div w-nodev>

  <p>The <dfn data-x="dom-img-alt"><code>alt</code></dfn>, <dfn
  data-x="dom-img-src"><code>src</code></dfn>, <dfn
  data-x="dom-img-srcset"><code>srcset</code></dfn> and <dfn
  data-x="dom-img-sizes"><code>sizes</code></dfn> IDL attributes must <span>reflect</span> the
  respective content attributes of the same name.</p>

  <p>The <dfn data-x="dom-img-crossOrigin"><code>crossOrigin</code></dfn> IDL attribute must
  <span>reflect</span> the <code data-x="attr-img-crossorigin">crossorigin</code> content attribute.</p>

  <p>The <dfn data-x="dom-img-useMap"><code>useMap</code></dfn> IDL attribute must
  <span>reflect</span> the <code data-x="attr-hyperlink-usemap">usemap</code> content attribute.</p>

  <p>The <dfn data-x="dom-img-isMap"><code>isMap</code></dfn> IDL attribute must <span>reflect</span>
  the <code data-x="attr-img-ismap">ismap</code> content attribute.</p>

  </div>

<!--TOPIC:DOM APIs-->
  <dl class="domintro">

   <dt><var>image</var> . <code data-x="dom-img-width">width</code> [ = <var>value</var> ]</dt>
   <dt><var>image</var> . <code data-x="dom-img-height">height</code> [ = <var>value</var> ]</dt>

   <dd>

<!--CLEANUP-->
    <p>These attributes return the actual rendered dimensions of the
    image, or zero if the dimensions are not known.</p>

    <p>They can be set, to change the corresponding content
    attributes.</p>

   </dd>

   <dt><var>image</var> . <code data-x="dom-img-naturalWidth">naturalWidth</code></dt>
   <dt><var>image</var> . <code data-x="dom-img-naturalHeight">naturalHeight</code></dt>

   <dd>

<!--CLEANUP-->
    <p>These attributes return the intrinsic dimensions of the image,
    or zero if the dimensions are not known.</p>

   </dd>

   <dt><var>image</var> . <code data-x="dom-img-complete">complete</code></dt>

   <dd>

<!--CLEANUP-->
    <p>Returns true if the image has been completely downloaded or if
    no image is specified; otherwise, returns false.</p>

   </dd>

   <dt><var>image</var> . <code data-x="dom-img-currentSrc">currentSrc</code></dt>

   <dd>

    <p>Returns the image's <span>absolute URL</span>.</p>

   </dd>

   <dt><var>image</var> = new <code data-x="dom-image">Image</code>( [ <var>width</var> [, <var>height</var> ] ] )</dt>

   <dd>

<!--CLEANUP-->
    <p>Returns a new <code>img</code> element, with the <code
    data-x="attr-dim-width">width</code> and <code
    data-x="attr-dim-height">height</code> attributes set to the values
    passed in the relevant arguments, if applicable.</p>

   </dd>

  </dl>

  <div w-nodev>

  <p>The IDL attributes <dfn data-x="dom-img-width"><code>width</code></dfn> and <dfn
  data-x="dom-img-height"><code>height</code></dfn> must return the rendered width and height of the
  image, in CSS pixels, if the image is <span>being rendered</span>, and is being rendered to a
  visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is
  <i data-x="img-available">available</i> but not being rendered to a visual medium; or else 0, if
  the image is not <i data-x="img-available">available</i> or does not have intrinsic dimensions. <ref spec=CSS></p>

  <p>On setting, they must act as if they <span data-x="reflect">reflected</span> the respective
  content attributes of the same name.</p>

  <p>The IDL attributes <dfn data-x="dom-img-naturalWidth"><code>naturalWidth</code></dfn> and <dfn
  data-x="dom-img-naturalHeight"><code>naturalHeight</code></dfn> must return the intrinsic width and
  height of the image, in CSS pixels, if the image has intrinsic dimensions and is <i data-x="img-available">available</i>, or
  else 0. <ref spec=CSS></p>

  <p>The IDL attribute <dfn data-x="dom-img-complete"><code>complete</code></dfn> must return true if
  any of the following conditions is true:</p>

  <ul class="brief">

   <!--XXXX check picture parent-->

   <li>Both the <code data-x="attr-img-src">src</code> attribute and the <code
   data-x="attr-img-srcset">srcset</code> attribute are omitted.

   <li>The <code data-x="attr-img-srcset">srcset</code> attribute is omitted and the <code
   data-x="attr-img-src">src</code> attribute's value is the empty string. <!-- we only have this
   hack for src="", not srcset=""; present but empty or bogus srcset="" still means complete=false
   if it's not in the img-error state -->

   <li>The final <span data-x="concept-task">task</span> that is <span data-x="queue a
   task">queued</span> by the <span>networking task source</span> once the resource has been <span
   data-x="fetch">fetched</span> has been <span data-x="queue a task">queued</span>.

   <li>The <code>img</code> element is <span data-x="img-all">completely available</span>.

   <li>The <code>img</code> element is <span data-x="img-error">broken</span>.

  </ul>

  <p>Otherwise, the attribute must return false.</p>

  <p class="note">The value of <code data-x="dom-img-complete">complete</code> can thus change while
  a <span data-x="concept-script">script</span> is executing.</p>

  <p>The <dfn data-x="dom-img-currentSrc"><code>currentSrc</code></dfn> IDL attribute
  must return the <code>img</code> element's <span>current request</span>'s <span data-x="img-req-url">current URL</span>.</p>

  <p>A constructor is provided for creating <code>HTMLImageElement</code> objects (in addition to
  the factory methods from DOM such as <code data-x="">createElement()</code>): <dfn
  data-x="dom-image"><code>Image(<var>width</var>, <var>height</var>)</code></dfn>.
  When invoked as a constructor, this must return a new <code>HTMLImageElement</code> object (a new
  <code>img</code> element). If the <var>width</var> argument is present, the new object's
  <code data-x="attr-dim-width">width</code> content attribute must be set to <var>width</var>. If the <var>height</var> argument is also present, the new object's
  <code data-x="attr-dim-height">height</code> content attribute must be set to <var>height</var>.
  The element's <span>node document</span> must be the <span>active document</span> of the
  <span>browsing context</span> of the <code>Window</code> object on which the interface object of
  the invoked constructor is found.</p>

  </div>
<!--TOPIC:HTML-->

  <div class="example">

   <p>A single image can have different appropriate alternative text depending on the context.</p>

   <p>In each of the following cases, the same image is used, yet the <code
   data-x="attr-img-alt">alt</code> text is different each time. The image is the coat of arms of the
   Carouge municipality in the canton Geneva in Switzerland.</p>

   <p>Here it is used as a supplementary icon:</p>
   <pre>&lt;p>I lived in &lt;img src="carouge.svg" alt=""> Carouge.&lt;/p></pre>

   <p>Here it is used as an icon representing the town:</p>
   <pre>&lt;p>Home town: &lt;img src="carouge.svg" alt="Carouge">&lt;/p></pre>

   <p>Here it is used as part of a text on the town:</p>

   <pre>&lt;p>Carouge has a coat of arms.&lt;/p>
&lt;p>&lt;img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree.">&lt;/p>
&lt;p>It is used as decoration all over the town.&lt;/p></pre>

   <p>Here it is used as a way to support a similar text where the description is given as well as,
   instead of as an alternative to, the image:</p>

   <pre>&lt;p>Carouge has a coat of arms.&lt;/p>
&lt;p>&lt;img src="carouge.svg" alt="">&lt;/p>
&lt;p>The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.&lt;/p></pre>

   <p>Here it is used as part of a story:</p>

   <pre>&lt;p>He picked up the folder and a piece of paper fell out.&lt;/p>
&lt;p>&lt;img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S.">&lt;/p>
&lt;p>He stared at the folder. S! The answer he had been looking for all
this time was simply the letter S! How had he not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Marco had stuck his tongue out...&lt;/p></pre>

   <p>Here it is not known at the time of publication what the image will be, only that it will be a
   coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief
   caption for the image is provided, in the <code data-x="attr-title">title</code> attribute:</p>

   <pre>&lt;p>The last user to have uploaded a coat of arms uploaded this one:&lt;/p>
&lt;p>&lt;img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms.">&lt;/p></pre>

   <p>Ideally, the author would find a way to provide real replacement text even in this case, e.g.
   by asking the previous user. Not providing replacement text makes the document more difficult to
   use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth
   connections or who pay by the byte, or users who are forced to use a text-only Web browser.</p>

  </div>

  <div class="example">

   <p>Here are some more examples showing the same picture used in different contexts, with
   different appropriate alternate texts each time.</p>

   <pre>&lt;article>
 &lt;h1>My cats&lt;/h1>
 &lt;h2>Fluffy&lt;/h2>
 &lt;p>Fluffy is my favourite.&lt;/p>
 &lt;img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 &lt;p>She's just too cute.&lt;/p>
 &lt;h2>Miles&lt;/h2>
 &lt;p>My other cat, Miles just eats and sleeps.&lt;/p>
&lt;/article></pre>

   <pre>&lt;article>
 &lt;h1>Photography&lt;/h1>
 &lt;h2>Shooting moving targets indoors&lt;/h2>
 &lt;p>The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.&lt;/p>
 &lt;img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique.">
 &lt;h2>Nature by night&lt;/h2>
 &lt;p>To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.&lt;/p>
&lt;/article></pre>

   <pre>&lt;article>
 &lt;h1>About me&lt;/h1>
 &lt;h2>My pets&lt;/h2>
 &lt;p>I've got a cat named Fluffy and a dog named Miles.&lt;/p>
 &lt;img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 &lt;p>My dog Miles and I like go on long walks together.&lt;/p>
 &lt;h2>music&lt;/h2>
 &lt;p>After our walks, having emptied my mind, I like listening to Bach.&lt;/p>
&lt;/article></pre>

   <pre>&lt;article>
 &lt;h1>Fluffy and the Yarn&lt;/h1>
 &lt;p>Fluffy was a cat who liked to play with yarn. He also liked to jump.&lt;/p>
 &lt;aside>&lt;img src="fluffy.jpg" alt="" title="Fluffy">&lt;/aside>
 &lt;p>He would play in the morning, he would play in the evening.&lt;/p>
&lt;/article></pre>

  </div>

  <!-- END OF PICTURE SECTION -->