google search console – How do you avoid cumulative layout shift with responsively sized images?

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.


<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 />


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, 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);}


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:

style part 1

style part 2

Computed model

Computed model