---
title: HTML 响应式图片规范：img/picture + srcset 完整指南
slug: html-img
date: 2025-12-23
author: Frankie 徐
category: fullstack
tags: ['html', 'responsive-images', 'img', 'picture', 'srcset', 'sizes']
description: 详解 HTML 响应式图片的正确使用方法，包括 img、picture、srcset、sizes 的核心原则、强制规则和标准模板，确保图片选择正确、流量优化、清晰度保证。
permalink: https://www.210k.cc/html-img
---
> 本规范用于指导在真实项目中，如何**正确、可维护、可审查**地使用
> `![]()
` / `` + `srcset` + `sizes`，以达到：
>
> - 正确选图
> - 避免浪费流量
> - 保证清晰度
> - 行为可预测
---
## 一、核心原则（必须理解）
### 原则 1：浏览器不会“猜布局”
浏览器**不会**根据 DOM / CSS / 容器实际宽度来推断图片尺寸
它**只会**相信开发者写在 HTML 里的 `sizes`
---
### 原则 2：响应式图片 = 声明 + 执行
- 开发者：声明「图片在布局中会显示多宽」
- 浏览器：根据 DPR + srcset 选择最合适的资源
---
### 原则 3：srcset（w） ≠ sizes
- `srcset`：我有哪些尺寸的图片
- `sizes`：图片最终会显示多宽（CSS px）
两者**必须配对使用**
---
## 二、强制规则（违反即不规范）
### 规则 1：只要使用 `srcset`（w 描述符），必须写 `sizes`
❌ 错误
```html
![]()
```
✅ 正确
```html
![]()
```
---
### 规则 2：桌面端优先使用 `px`，而不是 `vw`
❌ 不规范
```html
sizes="(max-width: 1024px) 100vw, 40vw"
```
✅ 规范
```html
sizes="(max-width: 1024px) 100vw, 600px"
```
说明：
- 桌面布局通常是**内容区设计常量**
- 使用 `vw` 会把 viewport ≠ content 的差异放大
---
### 规则 3：`vw` 只用于真正随 viewport 变化的场景
允许使用 `vw`：
- Hero / Banner
- Masonry / auto grid
- 全宽轮播
不允许使用 `vw`：
- 固定列数卡片
- 固定宽 sidebar
- 内容区内的列布局
---
### 规则 4：`sizes` 描述的是“设计意图”，不是 CSS 实现
❌ 不规范（试图复刻布局）
```html
sizes="calc((100vw - 80px) / 2)"
```
✅ 规范（表达意图）
```html
sizes="600px"
```
---
### 规则 5：`sizes` 必须有兜底值
❌ 错误
```html
sizes="(max-width: 768px) 100vw"
```
✅ 正确
```html
sizes="(max-width: 768px) 100vw, 600px"
```
---
## 三、标准使用模板（直接可复用）
### 模板 1：内容区 1200，一行两列（单图）
```html
sizes="
(max-width: 1024px) 100vw,
600px
"
```
---
### 模板 2：桌面三列卡片（1200 / 3）
```html
sizes="
(max-width: 640px) 100vw,
(max-width: 1024px) 50vw,
400px
"
```
---
### 模板 3：Hero / Banner（最大内容宽 1440）
```html
sizes="
(max-width: 768px) 100vw,
(max-width: 1280px) 90vw,
1440px
"
```
---
### 模板 4：缩略图 / 列表图
```html
sizes="
(max-width: 640px) 120px,
240px
"
```
---
### 模板 5：Avatar / Icon（不用 sizes）
```html
```
---
## 四、picture 的规范用法
```html
```
---
## 五、自检清单（Code Review 用）
- [ ] 是否使用了 srcset 却没有 sizes？
- [ ] 桌面端是否错误使用了 vw？
- [ ] sizes 是否能一句话解释清楚？
- [ ] 同一页面是否所有图片 sizes 一样？
- [ ] 是否明确区分 Hero / Card / Thumb？
任一项失败 → 需要修改
---
## 六、终极结论（牢记）
> **sizes 是你和浏览器之间的“布局合同”。
> 合同写错，浏览器一定严格执行错的结果。**
```
✅ 正确
```html