是当前唯一能按格式、分辨率、像素密度实现多级图片降级的原生方案，必须将置于前且类型声明正确，否则直接回退到；webp降级需通过无痕模式+canplaytype验证，srcset仅支持同格式响应式切换，不支持格式降级。
用 <picture></picture> 实现多级图片降级
浏览器不支持 WebP 或 AVIF 时，<picture></picture> 是唯一能按格式、分辨率、像素密度做条件加载的原生方案。它不是“可选”，而是当前最可靠的方式。
关键点在于：<source></source> 标签必须写在 <img> 之前，且所有 <source></source> 的 type 或 media 必须有明确匹配逻辑；否则浏览器会跳过所有 <source></source>，直接加载 <img> 的 src。
-
<source type="image/avif"></source>放最前（最新格式优先） - 接着是
<source type="image/webp"></source> - 最后用
<img src="fallback.jpg" alt="...">作为无条件兜底（注意：这里不能省略src，否则降级失败） - 所有
<source></source>的srcset和media要对齐设计断点，避免高 DPR 设备加载低质图
当 WebP 不被支持时，如何验证降级是否生效
不能只靠开发者工具看 Network 面板——有些浏览器（如旧版 Safari）会缓存 Accept 请求头结果，导致误判。真实验证需两步：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 在无痕窗口中打开页面，并禁用所有扩展（尤其图像优化类插件）
- 在控制台执行
navigator.userAgent和document.createElement('source').canPlayType('image/webp')，后者返回空字符串即代表不支持 WebP - 检查最终渲染的
<img>元素的currentSrc属性值，确认它指向的是 JPG/PNG 而非 WebP 路径
<img srcset> 和 <picture></picture> 的降级能力差异
srcset 只能根据视口宽度或设备像素比切换同一格式的图片（比如不同尺寸的 JPG），它无法触发格式降级。一旦你写了 srcset="a.webp 1x, b.webp 2x"，不支持 WebP 的浏览器仍会尝试加载 WebP 并失败，然后才退到 src——但此时可能已触发 404 或空白占位。
-
<img src="fallback.jpg" srcset="a.webp 1x, b.webp 2x">：WebP 加载失败后才用 JPG，存在闪白或延迟 -
<picture></picture>中每个<source></source>是独立判断，不支持 WebP 就完全跳过那行，直接走下一行或<img> - 如果只需响应式尺寸切换（无格式变化），用
srcset更轻量；一旦涉及格式、艺术指导（art direction），必须用<picture></picture>
CDN 或构建工具自动注入备用图的风险点
很多现代构建工具（如 Vite 插件）或 CDN（Cloudflare、Imgix）声称“自动添加 WebP 备用”，但它们通常只改 srcset，不会生成 <picture></picture> 结构。这意味着你拿到的 HTML 看似有 WebP，实际不具备格式降级能力。
- 检查生成后的 HTML 源码：是否存在
<picture></picture>包裹？还是只有<img>加一堆srcset？ - 某些 CDN 会把
Accept: image/webp响应头当成服务端降级依据，但这不可靠——客户端 JS 可能动态创建<img>，此时请求头已丢失 - 若用 Webpack +
responsive-loader，务必确认它输出的是<picture></picture>，而非仅生成多个srcset值
真正可靠的降级，依赖的是 HTML 结构层面的声明式控制，而不是运行时猜测或服务端协商。只要 <picture></picture> 的 <source></source> 顺序和类型声明正确，浏览器自己就知道该加载哪个——不需要 JS、不需要 polyfill、也不需要祈祷 CDN 配置没出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
