响应式图片加载慢本身不直接导致布局抖动，真正引发抖动（cls）的是浏览器首次渲染时无法确定图片容器高度——哪怕用了srcset和sizes，只要缺少内联width和height，就一定会抖。
响应式图片加载慢本身不直接导致布局抖动，真正引发抖动（CLS）的是浏览器首次渲染时无法确定图片容器高度——哪怕你用了 srcset 和 sizes，只要 <img> 缺少内联 width 和 height，就一定会抖。
必须写内联 width/height，CSS 不行
浏览器在 HTML 解析阶段就要预留空间，这个动作发生在 CSS 计算之前。只靠 style="width: 100%; height: auto" 或 aspect-ratio: 16/9 是不够的，尤其在 Safari 15.4 以下、Firefox 89 以下版本中会完全失效。
-
<img src="hero.jpg" style="max-width:90%" style="max-width:90%">✅ 浏览器首帧即知宽高比，能准确预留高度 -
<img src="hero.jpg" style="max-width:90%">❌ 没有内联尺寸，旧版浏览器 fallback 失效，抖动必现 - 响应式场景下，
width/height值按原始图比例填即可，不是“显示尺寸”，而是告诉浏览器“这张图本来多宽多高”
sizes 必须匹配真实容器宽度逻辑
sizes 不是可选配置，它是浏览器决定下载哪张 srcset 图的关键依据。写错或不写，会导致拉错尺寸的图（比如只占 300px 宽的图却下了 1920w 的），既浪费带宽又拖慢首屏感知速度。
- 查你实际用到的媒体查询断点，例如：
@media (max-width: 768px)→ 对应sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 避免写
sizes="100vw"这种一刀切表达式，侧边栏、卡片内嵌图会因此下超大图 - 如果容器用
grid或flex动态计算宽度（如minmax(300px, 1fr)），sizes表达不了，改用<picture></picture>+media更可靠
srcset 别堆冗余候选项
浏览器解析 srcset 是同步行为，每多一个 400w、640w 就多一次条件判断，哪怕你 CSS 根本没定义对应断点。这会拖慢预加载时机，间接加剧“白屏→闪出”的抖动感。
- 用 Chrome DevTools → Network → Disable cache 刷几次，看哪些
img请求始终 pending 或没发出 → 这些就是冗余项，删掉 - 同一
<source></source>内别混用w和x单位，否则部分浏览器直接忽略整条srcset - WebP/AVIF 图必须放在
<source></source>中，但最终兜底的<img src="fallback.jpg">仍要带内联width/height
懒加载和响应式不能互相掩盖缺陷
loading="lazy" 只控制请求时机，不解决占位问题；srcset+sizes 只优化下载尺寸，不提供初始高度锚定。三者叠加时，任何一个缺失都会让抖动重现。
- 首屏关键图（如 banner、商品主图）别加
loading="lazy"，该 eager 就 eager，配合<link rel="preload">提前抓取 - 占位图必须通过
src属性注入，且尺寸要和真实图一致：<img src="placeholder.svg" style="max-width:90%" style="max-width:90%" loading="lazy"> - 父容器若设了
transform、overflow: hidden或局部滚动（overflow: auto），IntersectionObserver 可能失效，导致占位图一直挂着，真实图永不加载
最易被忽略的一点：所有优化都建立在「HTML 解析完成那一刻，浏览器就知道这张图该占多高」这个前提上。一旦这个前提塌了，后续任何 JS、CSS、CDN、压缩策略都只是给抖动打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
