title: How to properly use width & height attributes in RWD layouts?
body: <p>I know that width &amp; height in HTML are presentational attributes, getting overrode by any other styling declaration. Still, they help browsers to reserve some space during image loading phase, and thus prevent layout shift.</p>
  <pre><code>&lt;img src=&quot;kitten.jpg&quot; width=&quot;XXX&quot; height=&quot;YYY&quot;&gt;
  </code></pre>
  <p>But... what exactly should I put there, in fluid layouts? Let's say I have an image, that is 100% wide on mobile resolutions. Then, on small tablets it gets fixed width 200x400px. On normal tablets and small desktops it has 800x400px, and on desktops and up it gets fixed dimensions of 1000x500px.</p>
  <p>Which should I pick, so it works as intended and indeed prevents layout shifting - instead of, perhaps, creating new shifting problems?</p>