How do you avoid cumulative layout shift with responsively sized images?

Question

On my site Google Webmaster Tools says that a bunch of pages have cumulative layout shift (CLS) errors. Otherwise known as jerky loading.

On my page images are always in a div with a class that sets it to a percentage of the content block.

E.g.

<DIV class=picr>

<img src="/Images/trees/Betula/Birch_Late-Fall_Pond-edge.jpg" width=900 height=1200 alt="Birch by pond" id="birchbypond" />

<p>Birch along a pond. In the landscape birch look good in random small clumps.</p>

<hr />

</div>

The computed width ends up being 281. (Yes, I know. I should be using srcsets.)

I tried adding the actual dimensions of the image with width=900 height=1200. In this situation the page does scale the horizontal dimension, but not the vertical.

Google's web dev page suggests putting the dimensions in. Both the text on this page, and the video seems to suggest that this would work, but it doesn't. But this no longer leaves the page responsive. They also suggest using CSS aspect boxes. Alas, CanIUse.com says that this is not supported on ANY browser out of the box.

This article suggests the following:

img { aspect-ratio: attr(width) / attr(height);}

But

The W3C CSS checker responds with:

img Property aspect-ratio doesn't exist : attr(width) / attr(height)

But Can I use would suggest that aspect-ratio is only partially supported on firefox, experimental (have to enable) in chrome and nowhere else.

I'm missing something here.

What is the best way to reserve space and reduce CLS on random size images on a static page?

I could settle on a small number of standard sizes. This would require that I manually resize/recrop every image I use. Then each size, or rather size ratio would have a custom css class defined. This is time consuming. (I currently have 2300 images on my site.)

Edit: In response to a comment, here's the CSS and computed model from the element in question:

Computed model

Answer 1

I think the key part you are missing is height: auto; in the CSS.

Earlier this year, all the major browsers made a change whereby they take the width and height defined in the HTML img tag as the aspect ratio for the image. Some background here

To reserve the correct space you first need to set the width/height attributes as you’ve already done. (Technically this doesn’t need to be the true pixel size of the image but don’t use a 1000px wide image if it will never be displayed that large.)

If you do not apply any CSS to the image, it will display at exactly the pixel dimensions you specified, and the browser will reserve that space while the image is loading.

Of course with responsive design, often the image will be too large. The best CSS to use is this:

img {
  max-width: 100%;
  height: auto;
}

Now if the parent element (e.g. a column) is smaller, the image won’t expand bigger, and the browser will still reserve the correct amount of space.