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

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

我最终使用了这里找到的解决方案： http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/# :~:text=And%20here%20is%20the%20formula,flashes %20on%20lazy%20loaded%20images。

超文本标记语言

<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 百分比设置为每个图像的内联样式。