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

问题

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/

回答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.

回答2:

I ended up using the solution found here: http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/#:~:text=And%20here%20is%20the%20formula,flashes%20on%20lazy%20loaded%20images.

HTML

<a class="thumb lazy-container" href="#">
 <img class="lazy" data-original="image.jpg" alt="">
</a>

CSS

.lazy-container {
 display: block;
 position: relative;
 height: 0;
}

.post .lazy-container {
 padding-bottom: 55.3%;
}

.lazy-container img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Since all of my images have a different height, I put the padding-bottom percentage as an inline style for each image.

回答3:

HTML:

<img width="300" height="450" src="300x450.jpg">

CSS:

    img {
        height: auto;
        aspect-ratio: 2/3;
        max-width: 100%;
    }

Target browsers:

• Chrome 88+
• Edge 88+

Articles:

• MDN
• Caniuse

回答4:

If you need to do what you're doing... don't worry about it.

Tools that identify potential problems with your site don't know the context. For example, suppose my site had a huge 20 MB image that took several seconds to load. Google's tools would undoubtedly flag this as a problem. But, maybe in my example, my site is hosting scientific imagery or something that requires a lossless large image size. My users would happily spend a few seconds loading the data they need.

If the layout of your site requires that you load images that are then resized dynamically, then that's what it requires and you shouldn't worry about it.

来源：https://stackoverflow.com/questions/64036464/how-can-i-prevent-jank-and-reduce-layout-shift-with-responsive-sized-images