### [列表页响应式图片：漏写 sizes 会被忽略](https://www.huociguo.com/article/1859)

**Published:** 2026-10-04T03:22:49

**Author:** 米了

**Excerpt:** 🖼️ 列表页塞满缩略图，移动端却仍在拉大图，带宽白白浪费。问题常出在 的搭档 被漏写。误区：以为只要写了 浏览…

🖼️ 列表页塞满缩略图，移动端却仍在拉大图，带宽白白浪费。问题常出在 `srcset` 的搭档 `sizes` 被漏写。

误区：以为只要写了 `srcset="img-200.jpg 200w, img-400.jpg 400w"` 浏览器就会自动选小图。事实是，没有 `sizes` 时，浏览器默认按视口全宽（100vw）评估，结果往往选了最大那张。

![响应式图片合集示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-2084277.jpeg)

同一列表，不同屏宽应取不同图

正确写法必须成对：

```
<img src="img-400.jpg"
     srcset="img-200.jpg 200w, img-400.jpg 400w, img-800.jpg 800w"
     sizes="(max-width:600px) 50vw, 200px"
     alt="...">
```

`sizes` 告诉浏览器图片实际渲染宽度，浏览器据此从 `srcset` 选最接近的来源。列表项是两列布局，就写 `50vw`；固定宽度卡片写具体像素。⚠️ 只写 `srcset` 不写 `sizes`，响应式等于没做。

其余优化：配合 `loading="lazy"` 让屏外图延迟加载，首屏更轻。

**Tags:** sizes 属性, srcset, 列表页图片, 响应式图片, 带宽优化

**Categories:** HTML5

---