直接用会导致Safari≤13.1、IE、旧Android WebView静默不加载而页面留白；必须用+显式声明+JPEG/PNG格式的强制兜底，三者缺一不可。
直接用 <img src="x.webp" alt="如何在HTML中设置图片降级加载规则" > 会出问题：Safari ≤13.1、IE、旧 Android WebView 静默不加载，页面留白；必须用 <picture></picture> + 正确 type 声明 + <img alt="如何在HTML中设置图片降级加载规则" > 强制兜底，三者缺一不可。
type 属性必须写标准 MIME 类型，且与服务器 Content-Type 严格一致
浏览器靠 type 值做“准入判断”，不是靠后缀或内容嗅探。写错就等于主动拒绝该 <source></source>。
- ✅ 正确：
type="image/avif"、type="image/webp"、type="image/jpeg"、type="image/png" - ❌ 错误：
type="webp"（缺image/）、type="image/jpg"（应为image/jpeg）、type="image/webp;charset=utf-8"（MIME 不允许参数） - 服务器返回的响应头
Content-Type必须和type完全一致，否则 Safari 等会静默跳过——哪怕图片本身能打开
source 顺序决定实际加载结果，不是“备选”而是“优先级队列”
浏览器从上到下逐条检查，遇到第一个 type 支持 *且* 资源可解码（文件存在、网络可达、格式合法）的就停止，不再往下看。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- AVIF 放最前：
<source srcset="logo.avif" type="image/avif"></source>（Chrome 120+/Firefox 120+/Edge 120+ 已稳定支持） - WebP 次之：
<source srcset="logo.webp" type="image/webp"></source>（覆盖 iOS 14+ Safari、Android 4.0+、全部桌面现代浏览器） - JPEG/PNG 不要再写成第三个
<source></source>：它只是格式 fallback，必须落在<img src="logo.jpg" alt="如何在HTML中设置图片降级加载规则" >的src里才起作用 - 别把
image/jpeg放最前——那样 AVIF-capable 浏览器永远用不上 AVIF
img 标签是强制兜底，漏掉整个结构就空白
<picture></picture> 本身不渲染、不请求，真正触发加载的是匹配成功的 <source></source> 或最终的 <img alt="如何在HTML中设置图片降级加载规则" >。没有它，降级就断了。
立即学习“前端免费学习笔记（深入）”；
-
<img alt="如何在HTML中设置图片降级加载规则" >必须带src和alt，否则语义缺失、无障碍失败、SEO 受损 -
src必须指向一个静态可直访的 JPEG 或 PNG 路径，不能带查询参数（如logo.jpg?format=webp），否则旧浏览器可能返回 406 或损坏数据 - 不建议把
<img src alt="如何在HTML中设置图片降级加载规则" >指向 WebP 或 AVIF：它无法被旧浏览器识别，起不到降级作用 - 即使你写了三个
<source></source>，只要浏览器一个都不认（比如全写错type或服务器未透传Accept头），页面就会空白——除非<img alt="如何在HTML中设置图片降级加载规则" >存在且可访问
常见错误现象与调试要点
白屏、控制台无报错、Network 面板里没发请求——这些都不是“浏览器不支持”，而是降级链路某处断了。
- 检查
<img alt="如何在HTML中设置图片降级加载规则" >是否真的存在、src是否可访问（直接粘贴 URL 到新标签页试） - 用 Chrome DevTools → Network → 点开图片请求，确认响应头
Content-Type和 HTML 中type是否完全一致 - 在 Safari（尤其是旧版本）中禁用 WebP/AVIF 支持（开发者菜单 → “Disable Images” 后手动启用部分格式），验证是否落到
<img alt="如何在HTML中设置图片降级加载规则" > - 别依赖
onerror监听来补救：如果<source></source>全部被跳过，<img alt="如何在HTML中设置图片降级加载规则" >才会触发加载，它的onerror是最后一道防线，不是降级逻辑的一部分
