浏览器按顺序选择第一个匹配的<source>，而非最优解；media必须完整、sizes不可缺、type需服务器配合，否则静默回退到<img src>。
浏览器怎么决定用哪个？顺序 + 第一个匹配
浏览器不会“综合判断”所有media 匹配成功、或 type 受支持且 srcset 有可用候选的 <source>，就立刻加载它，后面所有 <source> 全部跳过。这不是“最优解”，而是“第一个合法解”。
常见错误是把宽泛规则（如 (max-width: 768px)）写在前面，结果小屏设备永远只走这条，大屏根本没机会匹配后面的 (min-width: 1200px)。
- 把更具体的断点（如
(min-width: 1440px)）放在最上面 - 把通用 fallback（如
(max-width: 480px)）放在最下面 -
media值必须是完整媒体查询，768px或screen and (max-width: 768px)都无效 - 如果所有
<source>都不匹配，浏览器静默回退到<img src>，不会报错也不会提示
为什么写了 <source> 却总加载 <img src>？
90% 的失效不是浏览器不支持，而是所有 <source> 都被跳过了——要么语法错，要么条件没命中，要么服务器不配合。
-
media写成media="max-width: 768px"（缺括号）→ 浏览器直接忽略该<source> -
srcset单独出现但没配media或type→ 该<source>不参与选择 -
type="image/webp"但服务器返回Content-Type: text/plain→ Chrome 标记为(blocked:mime-type)，不加载 - 漏掉
<img>，或写了但没src→ 页面留白，不是报错，是静默失败
srcset + sizes 在 <picture> 里怎么协同工作？
当 <source> 同时带 srcset 和 sizes，浏览器先按 media 选中这个 <source>，再根据 sizes 计算出图在页面中的“有效宽度”，最后结合设备 DPR，从 srcset 中挑最接近的 w 或 x 图源。
立即学习“前端免费学习笔记（深入）”；
-
sizes必须存在且语法合法，例如sizes="(max-width: 600px) 100vw, 50vw"；只写srcset不写sizes，w描述符会失效 - 用
x描述符（如photo@2x.jpg 2x）时，sizes仍需存在，否则浏览器无法确定“这张图占多宽”，DPR 判断就失去上下文 - 多个
x图要按 DPR 升序排：1x, 2x, 3x，不能倒着写；浏览器从左到右匹配，找到第一个 ≥ 当前 DPR 的就停
什么时候该用 <picture>，而不是直接用 <img srcset>？
<picture> 不是“更高级的 <img>”，它是为构图变化、格式降级、艺术方向裁剪这类需求设计的。如果只是适配不同 DPR 或视口宽度下的同一张图，<img srcset> 更轻量、容错更强。
- 需要换构图：比如移动端用竖构图裁剪版，桌面端用横构图全图 → 必须用
<picture> - 需要 WebP 优先 + JPEG 降级：把 WebP
<source>放 JPEG 前面，靠type属性触发格式选择 - 只适配 DPR（如 iPhone 14 Pro 加载 @3x 图）：直接用
<img src="1x.jpg" srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x">就够了，<picture>反而增加出错概率
真正容易被忽略的是：每个 <source> 都是一个独立决策节点，它的 media、srcset、sizes、type 必须全部合法且协同，少一个环节，整条路径就断了。
