type属性必须精确匹配合法mime类型（如image/webp），大小写、参数、空格错误均导致浏览器忽略；source按顺序短路匹配，avif应置于webp前但需考虑safari16.4+兼容性；img是必需fallback且src不可省；调试应查currentsrc而非network。
type 属性必须精确匹配 MIME 类型
浏览器只认 type 值是否与当前支持的 MIME 类型完全一致，写错一个字符就会跳过整条 <source></source>。比如 image/webp 写成 webp、image/webp;charset=utf-8 或 image/WebP（大小写敏感），Safari 和多数安卓 WebView 都会直接忽略，不加载也不报错。
常见合法值只有这几个：image/webp、image/avif、image/jpeg、image/png。别加空格、分号、参数或大小写变形。
source 顺序决定格式优先级
浏览器从上到下扫描 <source></source>，遇到第一个 type 支持且媒体条件满足的就用它，后面的全跳过。这不是“多选”，是“短路匹配”。所以 WebP 要放 AVIF 前面，AVIF 要放 JPEG 前面——不是因为谁更好，而是因为顺序即策略。
- 想让 Chrome 93+ 用户优先用 AVIF？把
<source type="image/avif"></source>放最上面 - 但 Safari 16.4 才开始支持 AVIF，上线前得查 caniuse 当前覆盖率，不能只看 Chrome
- 别把
image/jpeg和image/png都塞进<source></source>：它们没格式优势差异，纯增加 HTML 解析开销
img 标签是必填 fallback，不能省
<img> 不只是“兜底”，它是整个 <picture></picture> 的强制闭合项。漏掉它，或只写 <img> 没带 src，会导致部分旧浏览器渲染空白，或者所有浏览器都回退到单图加载，失去格式切换意义。
示例中这个结构是安全的：
<picture><source srcset="hero.avif" type="image/avif"><source srcset="hero.webp" type="image/webp"> @@##@@ </source></source></picture>
注意：<img src="hero.jpg" alt="hero"> 的 src 必须存在，且应是兼容性最广的格式（通常是 JPG 或 PNG）；它不参与 type 匹配，只在所有 <source></source> 都失效时启用。
调试时别只看 Network 面板
Network 里看到的请求，未必是浏览器最终渲染用的图。真正生效的是 <img> 元素的 currentSrc 属性——它反映浏览器实际选择的资源路径。
检查方式很简单：
- 右键图片 → “检查元素” → 在 Elements 面板找到对应
<img> - 在 Console 里输入
$0.currentSrc（$0 是当前选中元素） - 如果返回的是
hero.jpg，但你期望是hero.webp，说明type="image/webp"没被识别，大概率是 MIME 类型写错了
格式切换的成败，藏在 currentSrc 里，不在请求列表里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
