sizes属性告诉浏览器图片在页面中实际渲染的宽度，用于从srcset中选择最接近且不小于该宽度的图片；必须按从窄到宽顺序写媒体查询，单位不可省略，且需与CSS布局严格一致。
sizes 属性怎么告诉浏览器图片该占多宽
sizes 不是让图片“变大变小”，而是明确告诉浏览器：在某个屏幕宽度下，这张图在页面里**实际会渲染成多宽**。浏览器拿这个宽度去 srcset 里找最接近又不小于它的那张图。
常见错误是把 sizes 写成固定值，比如 sizes="500px"——这等于说“不管屏幕多宽，这张图永远占 500px”，结果小屏也加载大图。
-
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"：表示 ≤480px 时占满视口；481–768px 占一半；>768px 占视口 1/3 - 媒体查询顺序必须从窄到宽，否则后面的条件可能被跳过
- 每个条件后必须带单位，
50vw合法，50无效 - 如果用了 CSS Grid 或 Flex 布局让图片宽度动态变化，sizes 必须和实际布局一致，不能只按设计稿“估一个”
为什么写了 sizes 还是加载了最大图
核心原因通常是 sizes 计算出的“渲染宽度”比你预期的大，导致浏览器只能选 srcset 里最大的那个。
比如你在卡片里放一张图，CSS 设置了 max-width: 300px，但 sizes 写的是 sizes="(max-width: 768px) 100vw, 50vw"，而当前视口是 1200px，那浏览器就按 600px（50vw）去匹配——即使图片实际只显示 300px 宽，它也不会“向下选”，只会找 ≥600w 的图。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Network 面板，看请求头里有没有
Sec-CH-DPR或Width：没有说明响应式逻辑根本没触发 - 检查 sizes 中的断点是否覆盖了你真实使用的视口范围，比如漏了
900–1200px区间 - 确保
src存在：没有src，老浏览器直接不显示图，连 fallback 都没
srcset 里的 w 单位和 sizes 怎么配对
srcset 里的 480w 指的是图片文件本身的固有宽度（像素），不是分辨率或 DPI；sizes 里的 100vw 是它在页面中将占据的渲染宽度（CSS 像素）。两者单位不同，但浏览器会做换算。
假设设备 DPR=2（如 iPhone），视口宽度 400px，sizes 算出渲染宽度是 400px，那浏览器需要的“有效像素”是 400 × 2 = 800px，就会从 srcset 里挑 ≥800w 的图（比如 800w 或 1200w）。
- 别混用
w和x描述符：写srcset="img@1x.jpg 1x, img@2x.jpg 2x"就别配sizes；写480w就必须配sizes - srcset 列表里不要跳档，比如只有
400w和1200w，中间缺 800w，DPR=1.5 且渲染宽度 600px 时，浏览器只能选 1200w - CDN 自动生成多尺寸图时，注意输出的文件名和 width 值要严格对应，否则 sizes 匹配失效
什么时候该用 picture 而不是只靠 sizes + srcset
当同一张图在不同屏幕下需要**完全不同的裁剪区域或构图**（比如手机竖图、桌面横图），或者需要**强制指定格式优先级**（WebP → JPEG → GIF），<picture> 是唯一可靠方案。
sizes + srcset 只解决“同一内容、不同尺寸”的问题；<picture> 解决的是“不同内容、不同条件”的问题。
- 用
<source type="image/webp">放前面，<source type="image/jpeg">放后面，浏览器自动选支持的格式 - 每个
<source>可单独配media和srcset，比如media="(min-width: 768px)" srcset="hero-desktop-800w.webp 800w" -
<img>标签仍需保留，作为所有<source>都不匹配时的最终 fallback
