Side rant: I have probably looked up more about this CLS (cumulative layout shift) thing that now I hate the word "just". "Just" do this, "just" do that. Bollocks. Tomorrow it will be something else. There are already at least three ways to handle image width and height. It is easy they say. Use the first approach if the image is an important of the main subject of the page. Use the second approach if the image is purely decorative and not an integral to the main subject of the page. Use the third approach if you are an idiot (I made this part up because I forgot what the third one was for).<p>I see this website does not have width and height in all of its images.
For example, in the image below, the author clearly knows the dimensions of the image are 1000px x 743px.
However, they didn't include the dimensions and the CLS is green under 0.1 (0.087 mobile and 0.045 desktop in my test [pagespeed]).<p>I opened developer tools in my firefox nightly browser, set throttling to GPRS, and disabled cache in my network tab and I reloaded the page.<p>I clearly see text push down as screenshots appear.
So do width and height / aspect ratio not matter any more (did they ever)?
I absolutely hate feeling like an idiot because I can't keep up with what matters and what does not.<p><pre>
<figure>
<picture>
<source srcset="/img/blog/build-1999/geocities1.webp" type="image/webp">
<img src="/img/blog/build-1999/geocities1.png" alt="A brightly coloured website that says 'Welcome to Tom &amp; Sherry's Proud Grandparents page. The Proud Grandparents page was created to show pictures of our grandchildren to family and friends, and an occasional Web surfer. The grandkids, our pride and joy, and their parents have made us very proud. Okay, let's see the pictures!'">
</picture>
<figcaption><a href="<a href="https://geocities.restorativland.org/Heartland/Ridge/1217/">The" rel="nofollow">https://geocities.restorativland.org/Heartland/Ridge/1217/">...</a> Proud Grandparents Page</a>
</figcaption></figure>
</pre><p>[pagespeed] <a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Flocalghost.dev%2Fblog%2Fbuilding-a-website-like-it-s-1999-in-2022%2F&form_factor=desktop" rel="nofollow">https://pagespeed.web.dev/report?url=https%3A%2F%2Flocalghos...</a>