如何使用响应式大小的图像防止卡顿并减少布局偏移？

Question

我的网站上有很多各种尺寸的图片。这些图像是响应式的，并且会在从桌面到移动设备的所有浏览器宽度下改变大小。我在 Google Search Console 中看到我的 CLS（累积布局偏移）很差，为 0.25 秒。我的网站布局会随着图像加载而变化。

由于我的图片是响应式的，我无法指定图片的确切尺寸，也无法使用占位符来保留 space。

使用响应式图像防止 CLS 的现代方法是什么？

此处布局：https://jsfiddle.net/exspwgab/

更新： 我在互联网上尝试了一个建议，即在 img 标签内指定图像文件的宽度和高度，如：

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

然后在 CSS 你做：

width: 100%;
height: auto;

这似乎在任何浏览器中都不起作用。而且我网页上的元素仍然随着图像的加载而到处移动。

如果有人有适用于所有浏览器的解决方案，请告诉我。我基本上需要占位符来保存 space，同时加载图像以防止页面卡顿问题。

这里是我的响应式布局的 JSFiddle： https://jsfiddle.net/exspwgab/

Answer 1

如果您需要做您正在做的事情...别担心。

识别您网站潜在问题的工具不知道上下文。例如，假设我的站点有一个 20 MB 的巨大图像，需要几秒钟才能加载。 Google 的工具无疑会将此标记为问题。但是，也许在我的例子中，我的网站正在托管科学图像或需要无损大图像尺寸的东西。我的用户很乐意花几秒钟加载他们需要的数据。

如果您的网站布局要求您加载图像然后动态调整大小，那么这就是它的要求，您不必担心。

Answer 2

我不确定这是否正是 CLS 问题的“现代解决方案”，但我只是尽力提供帮助。

显然，为 响应式图像元素 放置 constant-sized 占位符在逻辑上是不可能的。如果我们使用 placeholders/elements 和 fixed-sizes 作为 响应式内容 会怎么样？

例如：

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

使用 fixed-height，此元素不会对 CLS 政策造成任何负面影响，同时即使调整视口大小也会将整个图像内容保留在元素本身内。

我非常建议您考虑使用 <div>s 而不是 <image> 元素来显示图像内容（使用 background 属性），但是，我可以不能保证这不是又一次违反审计规则。

我的两分钱。

Answer 3

我最终使用了此处找到的解决方案： 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%;
}

由于我所有的图片都有不同的高度，我将 padding-bottom 百分比作为每张图片的内联样式。

Answer 4

HTML:

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

CSS:

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

目标浏览器：

Chrome88+
边 88+

文章：

MDN
Caniuse

Answer 5

我遇到了完全相同的问题。解决方案是将 width: 100% 更改为 max-width: 100%

这是在 https://web.dev/optimize-cls/

上隐含说明的

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

如何使用响应式大小的图像防止卡顿并减少布局偏移？

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

html

css

image

responsive-design