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

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; 
}

使用固定高度，即使调整视口(viewport)大小，该元素也不会对 CLS 策略产生任何负面影响，同时将整个图像内容保留在元素本身内。
我非常建议您考虑使用 <div> s 而不是 <image>显示图像内容的元素(使用 background 属性)，但是，我不能保证这不是另一个违反审计规则的行为。
我的两分钱。