title: How to create a Picture in HTML with the correct height
body: <p>I have a header which I want responsive so that it only loads the relevant sized image.  I've been using a Picture tag but it causes a CLS (Cumulative Layout Shift) because it will only size the height for 20px rather than 48px.  I've not set any style to affect the picture so can't work out why the Picture reserves only 20px and then when the image loads, it sizes to 48px.  When I specify the width, the width works correctly.  Any tips?</p>
  <pre><code>&lt;html&gt;
      &lt;header&gt;
          &lt;picture&gt;
              &lt;source media=&quot;(min-width:624px)&quot; type=&quot;image/webp&quot; srcset=&quot;/pictures/site.webp&quot;/&gt;
              &lt;source media=&quot;(min-width:624px)&quot; type=&quot;image/png&quot; srcset=&quot;/pictures/site.png&quot;/&gt;
              &lt;source media=&quot;(max-width:623px)&quot; type=&quot;image/webp&quot; srcset=&quot;/pictures/site.webp&quot;/&gt;
              &lt;img src=&quot;/pictures/ugweb.png&quot; width=&quot;340&quot; height=&quot;48&quot; alt=&quot;Site&quot; title=&quot;Site&quot;/&gt;
          &lt;/picture&gt;
      &lt;/header&gt;
      &lt;body&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>