必须用显式声明格式降级链（avif→webp→jpg），必带正确type属性，末尾兜底且src和alt不可省略；开发中需监听error事件并用DocumentFragment批量插入提升性能。
直接用 <picture></picture> + <source type="image/webp"></source> + <img src="fallback.jpg" alt="HTML网页图片怎么做自动降级" > 就能实现自动降级，但必须满足三个硬性条件：type 值严格匹配 MIME、<source></source> 顺序正确、<img alt="HTML网页图片怎么做自动降级" > 的 src 指向真实可访问资源——缺一不可，否则旧浏览器直接留白。
为什么 <img src="a.webp" alt="HTML网页图片怎么做自动降级" > 在 Safari ≤13.1 里是空白
浏览器根本没尝试请求，因为它不识别 image/webp 这个 MIME 类型。不是加载失败，而是“格式被忽略”。Safari ≤13.1、IE、旧 Android WebView 都这样，控制台无报错，Network 面板里连请求都没有。
实操建议：
-
type必须写成type="image/webp"，不能是type="webp"或type="image/jpg" - 服务器返回的响应头
Content-Type也得是image/webp，二者必须一致 -
<img alt="HTML网页图片怎么做自动降级" >的src不能带查询参数（如logo.jpg?format=webp），否则不支持 WebP 的浏览器可能收到 406 或损坏数据
<source></source> 的 media 和 type 怎么配才真触发
<picture></picture> 不是“多选一”，而是从上到下逐条匹配：第一个 media 为真 且 type 被当前浏览器支持的 <source></source> 才会加载，其余全跳过。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：<source media="(min-width: 768px)" srcset="a.jpg"></source> 放在最前，结果 WebP 根本没机会加载。
实操建议：
- 把兼容性最高、最可能被用到的格式放最前，比如
<source type="image/webp" srcset="a.webp"></source> - 视口宽度判断比
resolution更可靠，推荐media="(max-width: 768px)"，少用(min-resolution: 2dppx) - 务必保留底部的
<img alt="HTML网页图片怎么做自动降级" >标签，它不是可选项，是语义必需 + 强制兜底节点
onerror 为什么总不触发，还误以为降级生效了
onerror 只响应“请求发出后失败”，对以下情况完全静默：
-
src=""或src=" "：没发请求，直接跳过 - 跨域图片没加
crossorigin，被 CORS 拦截：控制台报错，但onerror不触发 - 服务器返回占位图（如
/img/missing.png?text=404）且状态码是 200：浏览器认为“加载成功”
实操建议：
- 内联写法：
onerror="this.onerror=null;this.src='/assets/placeholder.svg'"，避免重复触发 - 占位图优先用
data:image/svg+xml;base64,...内联 SVG，彻底规避路径和网络依赖 - 动态创建的
<img alt="HTML网页图片怎么做自动降级" >，onerror绑定必须在appendChild()之前完成
loading="lazy" 降级失效时，页面为什么一片白
浏览器不支持 loading="lazy" 时，它不会读取 data-src，也不会报错，只是当这个属性不存在，然后按默认逻辑加载 src。如果此时 src 是空、占位图或非法路径，结果就是白屏。
实操建议：
-
src必须始终指向可用资源：1px GIF、LQIP 图，或 SSR 渲染出的真实小图；绝不能留空 -
data-src存高清图地址，且必须在 HTML 中静态存在（不能靠 JS 注入），否则断网时就丢了 - 关键图片（如商品主图、头图）跳过懒加载：直接写死
src，不加loading="lazy"
真正可靠的降级不是靠单一机制，而是「多层 fallback 路径 + 状态隔离 + 渲染前校验」三者同时成立。最容易被忽略的是：你以为 <img alt="HTML网页图片怎么做自动降级" > 是兜底，其实它自己也可能 404；你以为 onerror 能兜住所有失败，其实它连 CORS 都捕获不到。
