抖动主因是内部缺失width/height属性，导致首帧0×0占位及加载后重排；srcset/sizes不提供尺寸信息，必须显式声明原生像素值并确保父容器结构稳定。

标签本身不渲染内容，抖动实际来自它内部的 ；没设 width 和 height 属性，浏览器首帧就按 0×0 占位，图片加载后重排——抖动照旧。

为什么里写了srcset和sizes还是抖

浏览器解析 时，只看内部 的 HTML 属性，srcset 和 sizes 是加载策略，不是尺寸声明。它可能先用默认尺寸占位（比如 1em 高），等 匹配完成、真实图加载后，再调整一次——两次偏移，CLS 更高。

• 必须作为 的**最后一个子元素**，且必须带 width 和 height 属性（取原始像素值，如 width="800" style="max-width:90%"）
• 不要指望 能替代尺寸信息
• 若不同 对应不同宽高比（比如横屏图 vs 竖屏图），优先统一设计比例，或 fallback 到固定容器 + object-fit

响应式场景下怎么安全写width/height

响应式不等于不能写原生尺寸。浏览器只要在首帧拿到确定性宽高，就能预留空间；后续 CSS 会自然覆盖显示效果。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 写死原始像素值：，再用 CSS 控制响应式：img { width: 100%; height: auto; }
• 若原始图宽高比固定（如 4:3），可配合 aspect-ratio: 4/3，但需注意 Safari 15.4+ / Firefox 89+ 才稳定支持；旧版仍要 fallback 到 width/height
• 绝对不要只写 width="100%" 或 height="auto" —— 这些是 CSS 值，HTML 解析器直接忽略

嵌套或动态内容时的坑

极少见但危险：有人把 放进 （非法 HTML），或用 JS 动态替换 内容。此时即使原 有宽高，新插入节点也无尺寸锚定，必然抖。

• 只接受 和 为子元素，其他标签会导致解析异常，部分浏览器静默降级为仅渲染
• JS 替换 的 src 或整个 DOM 节点时，必须同步更新 width/height 属性，不能只改 style
• 第三方广告或视频封面若走 流程，务必确认 SDK 输出的 是否含原生尺寸——很多库默认不写，得手动 patch

最易被忽略的一点：就算你给 写了 width/height，如果父容器是 flex 且没设 min-width 或 aspect-ratio，或者外层套了 transform，浏览器可能无法正确继承尺寸锚点，抖动仍会发生。结构确定性必须从 HTML 层穿透到 layout 层，缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！