picture标签的fallback机制本质是顺序匹配，浏览器从上到下检查的type或media是否匹配，首个匹配即加载；全部不匹配时才回退到内部——该是唯一兜底执行体，非可选之一。

picture标签的fallback机制本质是顺序匹配

浏览器会从上到下依次检查 <source></source> 标签的 type 或 media 属性是否匹配当前环境，一旦匹配就加载对应资源；所有 <source></source> 都不匹配时，才退回到内部的 <img> 标签——这个 <img> 就是 fallback 的唯一落点，不是“备用选项之一”，而是“兜底执行体”。

写错 fallback 的三个高频错误

很多人以为 fallback 是自动兜底的，其实只要写法稍有偏差，降级就会静默失败：

• 把 <img> 写在 <picture></picture> 外面，比如 <picture>...</picture><img src="jpg.jpg"> —— 这个 <img> 和 <picture></picture> 完全无关，不会触发降级
• <img> 缺少 src 属性，只写了 srcset 或 data-src —— 浏览器不识别，直接不渲染，也不报错
• <source></source> 的 type 值写成 image/webp 但拼错成 image/webpp 或漏了引号 —— 浏览器跳过该 <source></source>，但不会因此提前触发 <img>，而是继续往下找，直到耗尽所有 <source></source>

最简可用的 WebP + JPEG fallback 示例

这是经过验证、兼容 Chrome 50+ / Firefox 47+ / Safari 14.1+ / Edge 79+ 的最小可行写法：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<picture><source srcset="photo.webp" type="image/webp">
  @@##@@
</source></picture>

注意几点：

• <source></source> 必须在 <img src="photo.jpg" alt="描述性文字"> 之前，顺序不能颠倒
• <img> 必须有 src，且路径要真实可访问（否则 fallback 成空图）
• alt 属性必须保留在 <img> 上，<source></source> 不支持 alt
• 不需要加 width/height 到 <source></source>，它们只作用于 <img>

旧版 Safari（

所谓“不支持 WebP”的浏览器，实际指的是不支持 <picture></picture> + type 匹配机制，而非单纯不认 WebP 文件。IE 完全不支持 <picture></picture>，会直接忽略整个标签，只渲染内部的 <img>；而 Safari 12–13 虽能解析 <picture></picture>，但会因不识别 type="image/webp" 而跳过 <source></source>，最终也落到 <img>。真正需要额外处理的，其实是那些连 <picture></picture> 都不解析的极老环境（如 Android 4.3 WebView），这时 fallback 才可能失效——但这类场景现在基本可忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！