图片降级抖动的根本原因是浏览器无法预知新格式图片宽高，导致重排；解决方案是用aspect-ratio+width稳住容器、确保所有图片源像素尺寸一致且与fallback匹配。
图片降级后布局抖动的根本原因
降级本身不导致抖动，真正的问题是浏览器在加载新格式图片前，完全不知道它的宽高——<source></source>没提供尺寸信息，<img>的src又指向不同分辨率的图，导致渲染时反复重排（CLS）。你看到的“跳动”，其实是盒模型从占位尺寸突然撑开到真实图片尺寸的过程。
用 aspect-ratio + width 稳住原始容器高度
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持原生宽高比控制，这是防抖最轻量的方案：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
aspect-ratio: 16/9必须写在<img>或其父容器上，不能只靠 CSS 宽高设置 - 搭配
width: 100%即可自动推算高度，无需 JS 或 padding-bottom 技巧 - 降级前后只要所有图片源保持相同宽高比（如全部 16:9），容器就不会变
- Safari 15.3 及更早需回退：
height: 0; padding-bottom: 56.25%，但必须确保父容器position: relative
srcset 和 sizes 配对错误会放大抖动
如果 sizes="(max-width: 768px) 100vw, 50vw"，但 srcset 里只提供 photo-400w.jpg 400w 和 photo-1200w.jpg 1200w，小屏可能加载 1200w 图却只显示 375px 宽——解码后实际尺寸远超预期，触发二次重排。
- 每个
<source></source>的srcset必须覆盖对应sizes下的所有可能宽度（例如小屏下 100vw → 提供 320w/480w/768w） - 不要混用
w和x描述符；统一用w更易与sizes对齐 - 验证方法：DevTools → Network → 模拟 iPhone SE（375px 宽 + 2x DPR）→ 看加载的是不是 768w 图；如果是 1200w，说明
sizes没生效或srcset缺失中间档
fallback 图必须和降级图尺寸一致
末尾 <img src="fallback.jpg"> 不只是语义兜底，更是布局锚点。如果 fallback 是 800×600，而 WebP 降级图是 1200×900，即使都设了 aspect-ratio，浏览器仍可能因解码时机差异造成瞬时错位。
- 所有格式的图片源（AVIF/WebP/JPG）应生成完全相同的像素尺寸，而非仅相同比例
- 用 ImageMagick 批量检查：
identify -format "%wx%h %m\n" *.webp *.jpg - CDN 自动转码时务必关闭“自适应宽高”选项，否则 AVIF 可能被缩成 75% 尺寸，JPG 却保持原样
- 如果无法统一像素尺寸，至少保证 fallback 图是最大尺寸（如 1200×900），其他降级图不小于它——避免容器先撑大再收缩
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
