浏览器按<source>从上到下顺序匹配，首个同时满足media和/或type的即加载并停止；漏<img>或其src错误会导致彻底空白，所有<source>不匹配时静默回退至<img src>。
漏掉 <img> 或写错 src，<picture> 就会彻底不显示图片——这是最常发生的空白问题。
为什么写了 <source> 却始终加载 <img> 的 src？
浏览器按 <source> 从上到下的顺序逐条匹配，遇到第一个同时满足 media 和/或 type 的就停止，跳过后续所有 <source> 和 <img> 的 srcset（但 <img> 本身仍必须存在）。常见失效原因：
-
<source>缺media也缺type→ 整条被忽略 -
media="(max-width: 768px)"写成media="max-width: 768px"（漏括号）→ 不匹配 - 服务器返回
image/webp文件但响应头是Content-Type: image/jpeg→ 浏览器静默跳过该<source> -
<img>没写src，Safari 16.4 之前版本直接渲染为空白
<picture> 中的 <source> 必须带 srcset，不能用 src
<source> 只认 srcset，写了 src 会被完全忽略。它不是备用图，而是“条件性资源声明”：
- 每个
<source>的srcset必须对应一个独立裁剪/构图版本（不是简单缩放原图） - 若用
w描述符（如"hero-mobile.jpg 400w"），必须配sizes属性，且值要含媒体条件 + 宽度单位，例如sizes="(max-width: 768px) 100vw, 50vw" - 若用
x描述符（如"hero@2x.jpg 2x"），只适配设备像素比，不依赖sizes -
srcset中各项必须用逗号分隔，且每项都得带单位（w或x），不能混用
<img> 是 fallback 节点，不是可选项
<img> 必须放在 <picture> 最后，且至少带 src 和 alt —— 这是唯一强制渲染的节点。它不参与匹配逻辑，只在所有 <source> 都不匹配时兜底：
立即学习“前端免费学习笔记（深入）”；
- 路径必须真实可访问，不能是占位符或空字符串
-
alt不可省略，否则影响可访问性和 SEO - 不要指望它“自动降级”：Chrome 支持
image/avif就用它，不支持就跳过，不会尝试下一个<source> - 所有
<source>和最终<img>的宽高比最好一致，否则object-fit补救容易失真
真正容易被忽略的是：断点值必须互斥，比如 max-width: 768px 和 min-width: 769px 才安全；写成 min-width: 768px 会导致 768px 视口同时命中两条规则，浏览器取第一条，第二条永远无效。
