HTML 的 srcset 属性若仅用宽度描述符（如 400w、800w）而未配合 sizes 属性，浏览器将直接忽略 srcset，始终加载 src 指定的默认图片。
html 的 `srcset` 属性若仅用宽度描述符（如 `400w`、`800w`）而未配合 `sizes` 属性，浏览器将直接忽略 `srcset`，始终加载 `src` 指定的默认图片。
在响应式网页开发中，<img> 标签的 srcset 属性是实现“根据设备像素比和视口宽度选择最优图片”的关键机制。但一个常见误区是：仅声明 srcset 中的宽度描述符（w 单位），却遗漏了必需的 sizes 属性——这会导致浏览器无法判断图片在页面中的渲染尺寸，从而放弃响应式逻辑，退化为始终加载 src 或最大候选图。
根据 MDN 官方规范，当 srcset 使用 w 描述符（表示图像源的固有宽度）时，sizes 属性为强制要求。sizes 的作用是向浏览器提前声明：该图片在不同视口条件下的预期显示宽度（CSS 像素），浏览器据此结合设备 DPR（device pixel ratio）计算出最匹配的 srcset 候选图。
✅ 正确示例（修复后）：
<img
style="width: 100%"
src="https://fakeimg.pl/400x267"
srcset="https://fakeimg.pl/400x267 400w,
https://fakeimg.pl/825x550 800w"
sizes="(max-width: 600px) 400px,
800px"
alt="Responsive example"
>? 关键说明：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- (max-width: 600px) 400px：视口 ≤ 600px 时，图片显示宽度为 400px（CSS 像素）；
- 800px：其余情况（如桌面端）显示宽度为 800px；
- 浏览器会基于此 sizes 值 + 当前设备 DPR（例如 2x Retina 屏），从 srcset 中选出最接近「所需物理像素 = sizes 值 × DPR」的图片。例如在 2x 设备上、视口 > 600px 时，需约 800 × 2 = 1600px 宽度，此时 825px 图仍偏小，建议补充 1600w 候选图以获得更优效果。
⚠️ 注意事项：
- sizes 中的长度单位必须是 CSS 长度（px, em, vw 等），不可省略单位；
- src 作为降级兜底，仍需保留（尤其对不支持 srcset 的旧浏览器）；
- 可通过浏览器开发者工具 → Network 面板查看实际加载的图片 URL，验证响应式是否生效；
- 若希望按 DPR 切换（如 1x/2x），应改用 x 描述符（如 srcset="low.jpg 1x, high.jpg 2x"），此时 sizes 非必需，但 src 仍需保留。
总结：srcset（w 描述符）与 sizes 是一对协同工作的响应式图片“黄金搭档”。缺一不可——srcset 提供多分辨率资源，sizes 提供布局上下文，二者结合才能让浏览器做出智能选择。
