picture标签的fallback机制本质是顺序匹配，浏览器从上到下检查的type或media是否匹配，首个匹配即加载；全部不匹配时才回退到内部——该是唯一兜底执行体，非可选之一。
picture标签的fallback机制本质是顺序匹配
浏览器会从上到下依次检查 <source></source> 标签的 type 或 media 属性是否匹配当前环境，一旦匹配就加载对应资源；所有 <source></source> 都不匹配时，才退回到内部的 <img alt="HTML picture标签怎么降级？fallback代码教程" > 标签——这个 <img alt="HTML picture标签怎么降级？fallback代码教程" > 就是 fallback 的唯一落点，不是“备用选项之一”，而是“兜底执行体”。
写错 fallback 的三个高频错误
很多人以为 fallback 是自动兜底的，其实只要写法稍有偏差，降级就会静默失败：
- 把
<img alt="HTML picture标签怎么降级？fallback代码教程" >写在<picture></picture>外面，比如<picture>...</picture><img src="jpg.jpg" alt="HTML picture标签怎么降级？fallback代码教程" >—— 这个<img alt="HTML picture标签怎么降级？fallback代码教程" >和<picture></picture>完全无关，不会触发降级 -
<img alt="HTML picture标签怎么降级？fallback代码教程" >缺少src属性，只写了srcset或data-src—— 浏览器不识别，直接不渲染，也不报错 -
<source></source>的type值写成image/webp但拼错成image/webpp或漏了引号 —— 浏览器跳过该<source></source>，但不会因此提前触发<img alt="HTML picture标签怎么降级？fallback代码教程" >，而是继续往下找，直到耗尽所有<source></source>
最简可用的 WebP + JPEG fallback 示例
这是经过验证、兼容 Chrome 50+ / Firefox 47+ / Safari 14.1+ / Edge 79+ 的最小可行写法：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<picture> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="描述性文字"> </picture>
注意几点：
立即学习“前端免费学习笔记（深入）”；
-
<source></source>必须在<img alt="HTML picture标签怎么降级？fallback代码教程" >之前，顺序不能颠倒 -
<img alt="HTML picture标签怎么降级？fallback代码教程" >必须有src，且路径要真实可访问（否则 fallback 成空图） -
alt属性必须保留在<img alt="HTML picture标签怎么降级？fallback代码教程" >上，<source></source>不支持alt - 不需要加
width/height到<source></source>，它们只作用于<img alt="HTML picture标签怎么降级？fallback代码教程" >
旧版 Safari（
所谓“不支持 WebP”的浏览器，实际指的是不支持 <picture></picture> + type 匹配机制，而非单纯不认 WebP 文件。IE 完全不支持 <picture></picture>，会直接忽略整个标签，只渲染内部的 <img alt="HTML picture标签怎么降级？fallback代码教程" >；而 Safari 12–13 虽能解析 <picture></picture>，但会因不识别 type="image/webp" 而跳过 <source></source>，最终也落到 <img alt="HTML picture标签怎么降级？fallback代码教程" >。真正需要额外处理的，其实是那些连 <picture></picture> 都不解析的极老环境（如 Android 4.3 WebView），这时 fallback 才可能失效——但这类场景现在基本可忽略。
