### [HTML picture 元素：多分辨率图片的正确写法](https://www.huociguo.com/article/1492)
**Published:** 2026-09-30T04:16:20
**Author:** 米了
**Excerpt:** 响应式图片先分场景：换清晰度用 srcset 加 sizes，换构图用 picture。含三个代码示例、浏览器…
响应式图片先分场景：同一张图按屏幕换清晰度，用 `srcset` 加 `sizes`；不同屏幕要不同构图，用 ``。用 JS 判断窗口宽度或改用 CSS background-image 的做法，都拿不到标签层的提前加载优势。
## 只换清晰度
```html
```
`srcset` 中的 w 描述符声明文件固有宽度，`sizes` 声明这张图在版式里占多宽。两者齐备，浏览器才能在 HTML 预解析阶段挑出合适资源。
## 换构图
```html
```
source 自上而下匹配，命中第一个可用项后停止。末尾的 `img` 是必填兜底，缺失时不会渲染任何图像。
## 只适配高分屏
```html
```
x 描述符对应设备像素比，适合尺寸固定的图标与头像。涉及排版宽度的图片一律用 w，两种描述符不要混在同一条 srcset 里。
## 浏览器的选择过程
有效像素等于 sizes 算出的 CSS 宽度乘以设备像素比。浏览器用该值逐个比对候选资源的 w 值，取第一个不低于判断阈值的资源。计算发生在 HTML 预解析阶段，图片请求因此能早于 CSS 与 JS 发出；换成 CSS 或 JS 方案后，请求推迟到样式与脚本执行之后。
## 五个错点
1. sizes 写成屏幕宽度。sizes 表达的是图片在版式中的宽度，三列布局里每行图只占三分之一时不能写 100vw。
2. w 值与文件真实宽度不符。浏览器下载后才发现偏差，会再补一次请求。
3. 省略 width 与 height。缺少内在宽高会丢 CLS 分，页面出现跳动。
4. 给首屏图加 loading=”lazy”。首屏图用 loading=”eager” 并补 fetchpriority=”high”。
5. 把 picture 当万能方案。只换清晰度时套 picture 会让 srcset 的自动选择失效。
## 上线前核对项
- srcset 中每个 w 值与文件真实宽度一致；
- sizes 表达式与断点处的实际列宽一致；
- 首屏图带 fetchpriority=”high”，非首屏图带 loading=”lazy”；
- alt 描述图像内容，纯装饰图写 alt=””；
- 使用 picture 时保留末尾 img 的兜底地址。
**Tags:** picture元素, srcset, 响应式图片, 延迟加载, 网页性能
**Categories:** HTML5
---
```
`srcset` 中的 w 描述符声明文件固有宽度，`sizes` 声明这张图在版式里占多宽。两者齐备，浏览器才能在 HTML 预解析阶段挑出合适资源。
## 换构图
```html