必须用<picture>且末尾<img src>不可省略，这是唯一零JS、SEO友好、原生支持的降级路径；WebP未生效主因是MIME类型不匹配——type属性与服务器Content-Type响应头必须严格一致，且<source>顺序决定加载优先级，<img>是老浏览器唯一入口，缺则空白。
必须用 <picture>，且末尾 <img src> 不可省略——这是唯一不发额外请求、零 JS、SEO 友好、原生支持的降级路径。
为什么 <picture> 里写了 type="image/webp" 却还是加载 JPEG
不是浏览器“不支持 WebP”，而是链路中某处 MIME 类型没对上。浏览器只认标准 type 字符串，且必须和服务器返回的 Content-Type 响应头完全一致：
- 服务器返回
Content-Type: text/plain或空 → 浏览器静默跳过该<source> - Nginx 未配置
types { image/webp webp; }→.webp文件被当成application/octet-stream - CDN 没透传
Accept: image/webp请求头 → 后端无法判断客户端能力，统一返回 JPEG
<source> 的顺序为什么不能调换
浏览器从上到下逐个尝试 <source>，遇到第一个 type 可解码且 media 条件满足的就加载并停止。这不是“建议顺序”，是执行逻辑本身：
-
image/avif必须放最前：<source srcset="a.avif" type="image/avif"> -
image/webp居中：<source srcset="a.webp" type="image/webp"> - JPEG/PNG 回退必须放在
<img>的src属性里，不能写成第三个<source> - 把
<source type="image/jpeg">放在 WebP 前面，哪怕设备支持 WebP，也永远加载不到
<img> 的 src 是强制兜底，不是可选项
<picture> 本身不加载图片，真正触发加载的是内部匹配成功的 <source> 或必需的 <img>。没有 <img>，就不会渲染任何内容，也不会发请求：
立即学习“前端免费学习笔记（深入）”；
-
<img>不是“备用 source”，而是所有不支持type的老浏览器（如 IE、旧 Android WebView）唯一能识别的入口 -
<img src>不能是带查询参数的动态地址（如?format=webp），也不能是 404 路径；否则整个<picture>会退化为仅显示alt文本 - 首屏关键图应在
<img>上加fetchpriority="high"，提升 LCP；加在<source>上无效
路径写错导致降级失效的常见坑
所有格式图片必须尺寸一致、构图一致，否则响应式切换时会出现拉伸或视觉跳变；但更基础的问题是：路径一错，连兜底都进不去：
- 本地双击打开 HTML 时，
src="logo.png"可能失败，而src="./logo.png"更可靠 - 路径中所有斜杠必须是正斜杠
/，Windows 显示反斜杠\，但 HTML 里一律不用 -
../images/logo.jpg表示上一级目录里的images文件夹，注意..后必须跟/，写成..images/logo.jpg就错 - 绝对路径如
file:///C:/project/logo.jpg理论可行，但跨设备即失效，开发阶段禁用
最容易被忽略的是：所有格式的图片（AVIF、WebP、JPEG）必须真实存在且路径准确——缺一个，整条降级链就断在那一环，用户看到的不是“稍差一点的图”，而是空白或 alt 文本。
