<picture>必须包含末尾的<img>且带src属性，否则图片不显示；浏览器按顺序匹配<source>的type和media，最后回退到<img>的src作为fallback。
<picture> 本身不加载图片，它只是个容器；真正起作用的是内部的 <source> 和末尾的 <img>。漏掉 <img> 或写错 src，图片就完全不显示——这是最常踩的坑。
必须配 <img> 且带 src 属性
<picture> 不是 <img> 的替代品，而是它的增强包装。浏览器会忽略 <picture> 内所有 <source>，直接渲染最后那个 <img> 元素。如果没写 <img>，或者写了但没填 src，页面就是空白。
-
<img>必须放在<picture>最后，不能省略 -
<img>的src是 fallback 路径，建议用 WebP 降级后的格式（如.jpg或.png） -
<img>可以带srcset和sizes，但只有在所有<source>都不匹配时才生效
<picture> <source type="image/webp" srcset="hero.webp"> <source media="(min-width: 768px)" srcset="hero-large.jpg"> <img src="hero-small.jpg" alt="Hero section"> </picture>
media 和 type 的匹配优先级
浏览器按 <source> 出现顺序从上到下匹配：先看 type（MIME 类型是否支持），再看 media（媒体查询是否为真）。只要某一项不满足，就跳过该 <source>，继续往下。
- 旧版 Safari 不支持
type="image/avif"，即使写了也会跳过，落到下一个<source>或最终<img> -
media查询不生效？检查是否漏了引号、括号不匹配，或用了不被支持的语法（如hover在移动设备上多数无效） - 不要把高分辨率
srcset和media混在同一<source>里试图“叠加控制”——srcset是像素密度逻辑，media是视口逻辑，应分开处理
响应式 + 格式切换的典型组合写法
兼顾现代格式（WebP/AVIF）和多尺寸适配时，推荐分层写法：最上面用 type 切格式，中间用 media 切布局，底部 <img> 做兜底。这样逻辑清晰，调试也方便。
立即学习“前端免费学习笔记（深入）”；
- 第一层
<source type="image/avif">：支持 AVIF 就用它（体积最小） - 第二层
<source type="image/webp">：AVIF 不支持就降级到 WebP - 第三层
<source media="(min-width: 1024px)">：大屏用大图，小屏用小图（此时用 JPG/PNG） - 最后一行
<img src="fallback.jpg">：所有都不匹配时的保底
<picture> <source type="image/avif" srcset="photo.avif"> <source type="image/webp" srcset="photo.webp"> <source media="(min-width: 1024px)" srcset="photo-large.jpg"> <img src="photo-small.jpg" alt="A scenic photo"> </picture>
真正难的不是写对标签，而是验证每种路径是否真被加载——别只靠 DevTools 的 Network 面板看请求，要关掉 WebP 支持、缩放窗口、切设备模拟器，一个个条件手动触发。很多“写了却没生效”的问题，其实只是没测全场景。
