How can I prevent jank and reduce layout shift with responsive sized images?

Question

My website hosts a lot of images of all sizes. These images are responsive and change size at all browser widths from desktop to mobile. I see in my Google Search Console that I have a poor CLS (cumulative layout shift) of .25s. The layout of my website shifts as the images load.

Since my images are responsive, I can't specify exact sizes of the images, or have placeholders to reserve the space.

What is a modern way to prevent CLS with responsive images?

Layout here: https://jsfiddle.net/exspwgab/

---

Update: I tried one suggestion on the internet which is to specify the image file's width and height within the img tag like:

<img src="photo.jpg" width="1504" height="752">

And then in CSS you do:

width: 100%;
height: auto;

This didn't seem to work in any browser. And the elements on my webpage still moved all over as the images loaded.

If anyone has a solution that works in all browsers please let me know. I essentially need placeholders to hold the space while the images load to prevent the page jank issue.

JSFiddle of my responsive layout here: https://jsfiddle.net/exspwgab/

Answer 1

I am not sure if this is exactly "a modern solution" to the CLS issue but just trying to be helpful as much as I can.

Obviously, it's not logically possible to put constant-sized placeholders for the responsive image elements. What if we use placeholders/elements with fixed-sizes for the responsive contents?

For example:

img.placeholder-image {
    width: 100%;
    height: 256px;
    object-fit: contain; 
}

With the fixed-height, this element won't add up anything negative to the CLS policy while keeping the whole image content inside the element itself even if the viewport gets resized.

I'd very much suggest you consider using <div>s instead of <image> elements to display image contents (using background property), however, I can't vouch that's not another violation of audit rules.

My two cents.