浏览器在HTML解析阶段即根据srcset和sizes决定加载哪张图片，max-width或媒体查询无法阻止大图加载；srcset声明的是图片固有宽度（单位w），需配对sizes才能正确选择。
浏览器在 HTML 解析阶段就决定加载哪张图片，不等 CSS 或 JS 执行——所以靠 max-width: 100% 或媒体查询控制显示尺寸，完全无法阻止小屏加载 2000w 大图。
srcset 告诉浏览器“我有哪些图”，必须用 w 描述符
srcset 不是分辨率列表，而是**固有宽度（intrinsic width）** 的声明集合，单位必须是 w（如 photo-800w.jpg 800w）。它本身不触发选择逻辑，只是提供候选池。常见错误是混用 x 和 w 却没配对好 sizes，比如写了 srcset="a.jpg 2x, b.jpg 800w"，浏览器会忽略整个属性。
- 只写
srcset不写sizes→ 浏览器 fallback 到100vw，大概率选错 -
srcset里写320w表示这张图文件本身的宽度是 320 CSS 像素，不是“给 320px 屏幕用” - 旧版 Safari（w 描述符，得靠
<picture>+2x回退
sizes 告诉浏览器“这张图实际占多宽”，必须覆盖所有断点
sizes 是纯字符串，不是 CSS，也不支持 calc() 或 rem。它的作用是让浏览器算出“渲染宽度”：例如视口 390px × sizes="(max-width: 768px) 50vw" → 渲染宽度 = 195px，再乘设备 DPR（iPhone 13 是 3）→ 需要约 585 物理像素，最后从 srcset 中挑最接近且不小于它的 w 图。
- 漏写断点（如只有
(max-width: 768px) 100vw，没写更大屏的规则）→ 整个sizes被忽略，浏览器退化为只加载src - 写成
sizes="50vw"（无媒体条件）→ 现代浏览器可接受，但 Safari 13.1 之前需补兜底，如sizes="(max-width: 768px) 100vw, 50vw" - 值和真实布局不一致（比如 CSS 里卡片最大宽 600px，
sizes却写100vw）→ 小屏加载大图，浪费带宽
<picture> 不是“高级 <img>”，只用于两类明确场景
<picture> 的设计目标非常具体：一是美术裁剪（art direction），比如移动端用竖构图、桌面端用横构图；二是格式降级（format fallback），比如优先发 image/avif，不支持就跳过，再试 image/webp，最后 fallback 到 image/jpeg。它不解决“多尺寸适配”问题——那个仍是 <img> + srcset + sizes 的职责。
立即学习“前端免费学习笔记（深入）”；
-
<source>的media必须是合法 CSS 媒体查询，max-width: 768px缺括号 → 静默失效 -
<img>必须放在<picture>最末尾，且带src和alt，否则不渲染 - 顺序很重要：
type或media规则从上到下匹配，宽泛规则（如(min-width: 400px)）放前面，会挡住后面的高清规则
真正容易被忽略的是：viewport 标签必须正确且唯一，否则整个响应式图片链路从第一步就失效；而 src 属性永远不能省——它是所有浏览器都认的兜底地址，不是装饰项。
