使用srcset时如何配置属性以降低CLS并预留图片空间？

浏览器如何确定图片的预留显示空间？ #

当仅使用带宽度描述符（w）的srcset时，浏览器无法直接获取图片的宽高比，默认情况下只能等到图片开始加载、拿到原始尺寸后，才能计算出对应的布局空间。这种延迟计算就会导致图片加载时页面布局突然跳动，直接推高CLS值。

是否需要在img标签中指定height和width属性？ #

必须指定。给<img>标签添加width和height属性，本质是告诉浏览器图片的原始宽高比。哪怕你用CSS设置了响应式样式（比如width: 100%; height: auto;），浏览器也能通过这两个属性提前算出应该预留的空间，从根源避免加载时的布局偏移。

修改后的示例代码：

<img srcset="small.jpg 256w,
             medium.jpg 512w,
             large.jpg 1024w"
     src="medium.jpg"
     alt="It’s responsive!"
     width="512"
     height="384" /> <!-- 填写对应图片的原始宽高数值 -->

配合响应式CSS：

img {
  width: 100%;
  height: auto;
}

使用srcset时确保低CLS的核心要点 #

• 强制设置width/height属性：对应图片原始尺寸，让浏览器提前计算宽高比
• 可选：用CSS锁定宽高比：现代浏览器支持aspect-ratio属性，比如aspect-ratio: 4/3;，和width/height配合使用，容错性更强
• 避免动态修改图片尺寸：图片加载完成后，不要通过JS或CSS突然改变其显示尺寸，否则仍会触发布局偏移
• 优先用轻量图片格式：WebP、AVIF等格式加载速度更快，减少图片加载等待时间，间接降低CLS风险

内容的提问来源于stack exchange，提问作者kavu