直接用是最稳降级方案，因在Safari≤13.1、IE等浏览器中不识别WebP/AVIF，既不加载也不fallback，导致空白；而通过显式声明格式并强制兜底，确保兼容性与SEO。
直接用 <picture></picture> 是最稳的降级方案，其他方式要么漏支持、要么发多余请求、要么破坏 SEO。
为什么不能只写 <img src="x.webp" alt="HTML图片降级使用技巧" >
浏览器不识别 WebP 或 AVIF 时，不会自动 fallback 到 JPEG——它就卡在加载失败状态，最终只显示 alt 文字或空白。Safari 13.1 之前、旧版 Edge、所有 IE 都会这样。你看到的“图片没出来”，不是懒加载问题，是格式不被认。
-
<img alt="HTML图片降级使用技巧" >标签本身没有格式协商能力，src是单值，不是备选列表 - CDN 动态转码（如
xxx.jpg?format=avif）在不支持浏览器里可能返回 406 或损坏二进制，照样白屏 - 想靠 CSS
background-image做格式切换？不行。background-image不支持type或srcset，也无法声明 MIME 类型
<picture></picture> 的 <source></source> 顺序必须严格按支持强度排列
浏览器从上到下扫描 <source></source>，匹配第一个 type 支持且 media 条件满足的就停。顺序错，现代格式永远不生效。
- AVIF 放最前：
<source srcset="a.avif" type="image/avif"></source> - WebP 次之：
<source srcset="a.webp" type="image/webp"></source> - JPEG/PNG 必须落在
<img alt="HTML图片降级使用技巧" >的src里，不能写成第三个<source></source> - IE 完全忽略
<picture></picture>，只渲染内部<img alt="HTML图片降级使用技巧" >——这反而是优势，前提是<img src alt="HTML图片降级使用技巧" >指向真实可用的 JPEG
<img alt="HTML图片降级使用技巧" > 在 <picture></picture> 里不是可选项，是强制兜底载体
<img alt="HTML图片降级使用技巧" > 不是“备用 source”，它是 <picture></picture> 渲染链的终点。若它的 src 也 404，整个结构就退化为纯文本。
立即学习“前端免费学习笔记（深入）”；
-
<img alt="HTML图片降级使用技巧" >必须带src和alt，且不能自闭合（<img alt="HTML图片降级使用技巧" >在部分旧 WebView 中会出错） -
src应指向高可用路径，比如 CDN 托管的占位图或主图，别写相对路径./images/fallback.jpg——嵌套路由下极易 404 - 不要给
<img alt="HTML图片降级使用技巧" >加srcset或sizes，它只负责兜底，不是响应式主力 - 如果要用
onerror动态修正，写成<img onerror="this.src='/fallback.jpg'" alt="HTML图片降级使用技巧" >即可，但注意：多次触发可能重复请求
所有格式图片必须尺寸一致、构图一致
AVIF/WebP/JPEG 三张图如果宽高比或关键内容位置不同，用户滚动或缩放时会出现视觉跳变——比如桌面图人脸居中，手机图却切掉半张脸。
- 艺术指导式裁剪要提前导出多张独立图（
hero-mobile.jpg、hero-desktop.jpg），而不是指望浏览器实时裁剪 -
<source></source>的srcset值里所有图片，分辨率档位、质量参数、裁剪比例必须对齐 -
fetchpriority="high"要加在<img alt="HTML图片降级使用技巧" >上，不是<source></source>——否则无效
