<picture> 标签按顺序匹配首个满足条件的 <source> 并加载其资源，后续忽略；必须包含合法 <img> 作为兜底，且其 src 需真实有效。
picture 标签本身不“多图加载”，它只让浏览器选一张——写错结构或条件，就只剩 <img> 的兜底图。
为什么写了多个 <source> 却只加载一张
浏览器对 <picture> 的处理是「顺序匹配、命中即停」：从上到下逐个检查 <source> 的 media 是否为真，第一个为真就加载它的 srcset（或 src），后面的全跳过。这不是并行下载，也不是预加载。
- 常见错误：把宽屏规则（如
min-width: 1200px）放在最后，结果小屏设备匹配了中间某条模糊断点，直接跳过了更精确的窄屏规则 - 断点重叠（如
(max-width: 768px)和(min-width: 768px)）会导致 768px 宽度行为未定义，部分浏览器选前一条，部分选后一条，调试困难 - 没写
<img>或写了但没src，页面对应区域直接留白——不是报错，是静默失败
media 断点怎么写才不踩坑
必须用合法 CSS 媒体查询语法，括号不能少，单位不能省，逻辑要互斥。
- ❌ 错误写法：
media="max-width: 768px"（缺括号）、media="768px"（不是媒体查询）、media="(width: 768px)"（width不是标准特性，应优先用max-width/min-width） - ✅ 推荐写法：用开区间避免临界冲突，例如
(max-width: 480px)→(min-width: 481px) and (max-width: 768px)→(min-width: 769px) - 别依赖
orientation: landscape：iOS Safari 对该特性支持不稳定，桌面浏览器可能完全忽略，实测失效率高
srcset 里混用 w 和 x 描述符会彻底失效
同一 srcset 值中只能用一种描述符。混用会导致整个 srcset 被浏览器忽略，退回到该 <source> 或 <img> 的 src（如果有的话）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确（x 描述符）：
srcset="hero@1x.jpg 1x, hero@2x.jpg 2x" - ✅ 正确（w 描述符）：
srcset="hero-400w.jpg 400w, hero-800w.jpg 800w"（此时必须配sizes） - ❌ 危险（混用）：
srcset="hero-400w.jpg 400w, hero@2x.jpg 2x"—— Safari 可能跳过整条，Chrome 行为未定义 - 3x 图建议放最后：
1x, 2x, 3x顺序比3x, 2x, 1x更稳妥，因为浏览器从左到右匹配，遇到第一个满足 DPR 的就停
type 和服务器 Content-Type 必须严格一致
写 type="image/webp"，但 Nginx 返回 Content-Type: image/jpg 或 text/plain，Chrome 会标记为 blocked:mime-type，这条 <source> 直接被跳过。
- 大小写敏感：
image/webp✅，image/WebP❌ - 拼写零容错：
image/jpg❌（正确是image/jpeg），webp❌（缺image/前缀） - 验证方式：打开 Network 面板，看请求响应头里的
Content-Type字段，不是看文件扩展名 - WebP 优先 + JPEG 降级的关键：把所有 WebP
<source>放 JPEG 前面，且确保每条都带合法type和真实可访问路径
最容易被忽略的是「<img> 必须存在、有 src、路径真实可用」——它不是可选项，是整个 <picture> 的最终保险丝。断点写错、type 不对、srcset 混用，都会让它成为唯一加载项；而如果它自己 404，整个图片区域就空了。
