<img> intro: use the width and height attributes on <source>

Author: zcorpan

source

@@ -30640,17 +30640,15 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
 &lt;/figure></code></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 and height for
-  legacy user agents, using CSS just for the user agents that support <code>picture</code>:</p>
+  data-x="attr-dim-height">height</code> attributes can be used on the <code>source</code> and
+  <code>img</code> elements to provide the width and height:</p>
 
-  <pre><code class="html">&lt;style media="(max-width: 600px)">
- #a { width: 100px; height: 100px; }
-&lt;/style>
+  <pre><code class="html">
 &lt;figure>
  &lt;picture>
-  &lt;source srcset="a-square.png" media="(max-width: 600px)">
+  &lt;source srcset="a-square.png" media="(max-width: 600px)" width="100" height="100">
   &lt;img src="a-rectangle.png" width="300" height="150"
-  alt="Barney Frank wears a suit and glasses." id="a">
+  alt="Barney Frank wears a suit and glasses.">
  &lt;/picture>
  &lt;figcaption>Barney Frank, 2011&lt;/figcaption>
 &lt;/figure></code></pre>