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

Question

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

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

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

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

---

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

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

然后在 CSS 中你这样做：

width: 100%;
height: auto;

这似乎不适用于任何浏览器。加载图像时，我网页上的元素仍然到处移动。

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

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

Answer 1

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

显然，为响应式图像元素放置固定大小的占位符在逻辑上是不可能的。如果我们为响应式内容使用固定大小的占位符/元素会怎样？

例如：

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

使用固定高度，即使视口调整大小，此元素也不会对 CLS 策略产生任何负面影响，同时将整个图像内容保留在元素本身内。

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

我的两分钱。

Answer 2

HTML：

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

CSS：

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

目标浏览器：

• 铬 88+
• Edge 88+

文章：

• MDN
• Caniuse

Answer 3

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

https://web.dev/optimize-cls/ 上已隐含说明

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

Answer 4

如果你需要做你正在做的事……别担心。

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

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

Answer 5

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

由于我所有的图像都有不同的高度，我将填充底部百分比作为每个图像的内联样式。