响应式图片先分场景：同一张图按屏幕换清晰度，用 srcset 加 sizes；不同屏幕要不同构图，用 <picture>。用 JS 判断窗口宽度或改用 CSS background-image 的做法，都拿不到标签层的提前加载优势。
只换清晰度
<img
src="cover-800.jpg"
srcset="cover-800.jpg 800w, cover-1600.jpg 1600w, cover-2400.jpg 2400w"
sizes="(max-width: 600px) 100vw, 720px"
width="1600" height="900"
alt="产品封面"
loading="lazy">
srcset 中的 w 描述符声明文件固有宽度，sizes 声明这张图在版式里占多宽。两者齐备，浏览器才能在 HTML 预解析阶段挑出合适资源。
换构图
<picture>
<source media="(max-width: 600px)" srcset="cover-square.jpg">
<source type="image/webp" srcset="cover.webp">
<img src="cover.jpg" alt="产品封面">
</picture>
source 自上而下匹配，命中第一个可用项后停止。末尾的 img 是必填兜底，缺失时不会渲染任何图像。
只适配高分屏
<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x" alt="站点图标">
x 描述符对应设备像素比，适合尺寸固定的图标与头像。涉及排版宽度的图片一律用 w，两种描述符不要混在同一条 srcset 里。
浏览器的选择过程
有效像素等于 sizes 算出的 CSS 宽度乘以设备像素比。浏览器用该值逐个比对候选资源的 w 值，取第一个不低于判断阈值的资源。计算发生在 HTML 预解析阶段，图片请求因此能早于 CSS 与 JS 发出；换成 CSS 或 JS 方案后，请求推迟到样式与脚本执行之后。
五个错点
- sizes 写成屏幕宽度。sizes 表达的是图片在版式中的宽度，三列布局里每行图只占三分之一时不能写 100vw。
- w 值与文件真实宽度不符。浏览器下载后才发现偏差，会再补一次请求。
- 省略 width 与 height。缺少内在宽高会丢 CLS 分，页面出现跳动。
- 给首屏图加 loading=”lazy”。首屏图用 loading=”eager” 并补 fetchpriority=”high”。
- 把 picture 当万能方案。只换清晰度时套 picture 会让 srcset 的自动选择失效。
上线前核对项
- srcset 中每个 w 值与文件真实宽度一致；
- sizes 表达式与断点处的实际列宽一致；
- 首屏图带 fetchpriority=”high”，非首屏图带 loading=”lazy”；
- alt 描述图像内容，纯装饰图写 alt=””；
- 使用 picture 时保留末尾 img 的兜底地址。