直接写在Safari≤13.1、IE或旧安卓WebView中会静默留白，因浏览器根本不识别image/webp MIME类型，既不发起请求也不报错；必须用显式声明并以JPEG/PNG的作强制兜底，且该src须为静态直访路径。
直接写 <img src="x.webp" alt="HTML如何实现图片降级" > 在 Safari ≤13.1、IE 或旧安卓 WebView 中会静默留白，不是加载失败，而是浏览器根本不识别格式、连请求都不发——必须用 <picture></picture> 显式声明降级链，且 <img alt="HTML如何实现图片降级" > 的 src 必须指向真实可访问的 JPEG/PNG。
为什么 <source type="image/webp"></source> 写了却还是加载 JPEG
不是浏览器“不支持 WebP”，而是 MIME 类型没对上。浏览器只认完全一致的标准字符串，且要求服务器返回的 Content-Type 响应头也必须匹配：
-
type="image/webp"必须对应服务器返回Content-Type: image/webp；写成type="webp"或type="image/jpg"都会跳过 - Nginx 未配置
types { image/webp webp; }→ .webp 文件被当成application/octet-stream，<source></source>被忽略 - CDN 没透传
Accept: image/webp请求头 → 后端无法协商，统一返回 JPEG - 本地双击打开 HTML 时，
src="logo.webp"可能因协议限制（file://）失败，而src="./logo.webp"更可靠
<picture></picture> 中 <source></source> 顺序和兜底 <img alt="HTML如何实现图片降级" > 为什么不能省
<source></source> 是按顺序逐条匹配的，第一个 type 可解码且 media 条件满足的就加载并停止，后面全跳过：
-
image/avif必须放最前：<source type="image/avif" srcset="a.avif"></source> -
image/webp居中：<source type="image/webp" srcset="a.webp"></source> -
<img src="a.jpg" alt="HTML如何实现图片降级" >是强制兜底，不是可选项——漏掉整个结构就空白 -
<img alt="HTML如何实现图片降级" >的src不能带查询参数（如?format=webp），也不能是动态 CDN 转码地址（如?x-oss-process=image/format,avif），必须是静态、直访即显示的 JPEG/PNG
onerror 在 <picture></picture> 里为什么总不触发
onerror 只监听 <img alt="HTML如何实现图片降级" > 自身的 src 加载失败，对 <source></source> 的失败完全无感。而且它只响应网络错误或非 2xx 状态，以下情况它静默失效：
立即学习“前端免费学习笔记（深入）”；
-
src=""、src=" "、src="#"→ 根本不发起请求，onerror不触发 - 跨域图片没加
crossorigin，被 CORS 拦截 → 控制台报错但onerror不调用 - 服务器对 404 返回占位图（HTTP 200）→ 浏览器认为“加载成功”
- 正确做法是：内联写
onerror="this.onerror=null;this.src='/assets/placeholder.svg'"，占位图优先用data:image/svg+xml;base64,...内联 SVG，彻底规避路径风险
轮播图和首屏关键图的降级特殊处理
轮播图 JS 初始化失败时，用户看到的不该是一堆破碎 <img alt="HTML如何实现图片降级" >，而应至少保证首张图可见：
- 第一张图必须写死在 HTML 中，带有效
src和alt；其余图用data-src存，不生成真实src - JS 初始化前检查容器是否存在，
try/catch包裹实例化，失败后显式显示首图区域 - 首屏关键图（如商品主图、头图）跳过
loading="lazy"，直接写死src；若需懒加载，src必须指向 LQIP 或 1px GIF，绝不能为空或非法路径 -
<img alt="HTML如何实现图片降级" >的alt不是“图挂了才用”，而是强制必需属性；空状态图的alt要含状态语义 + 可操作提示，例如alt="暂无收藏内容，点击右上角加号添加"
最容易被忽略的是：<picture></picture> 结构本身不保安全，真正起作用的是每个 src 地址是否真实可访问、服务端是否返回正确 Content-Type、以及 <img alt="HTML如何实现图片降级" > 是否始终处于“可加载”状态——降级不是靠语法，而是靠每层资源的实际可用性。
