必须用显式声明格式降级链（avif→webp→jpg），必带正确type属性，末尾兜底且src和alt不可省略；开发中需监听error事件并用DocumentFragment批量插入提升性能。

直接用 + + 就能实现自动降级，但必须满足三个硬性条件：type 值严格匹配 MIME、 顺序正确、 的 src 指向真实可访问资源——缺一不可，否则旧浏览器直接留白。

为什么 在 Safari ≤13.1 里是空白

浏览器根本没尝试请求，因为它不识别 image/webp 这个 MIME 类型。不是加载失败，而是“格式被忽略”。Safari ≤13.1、IE、旧 Android WebView 都这样，控制台无报错，Network 面板里连请求都没有。

实操建议：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• type 必须写成 type="image/webp"，不能是 type="webp" 或 type="image/jpg"
• 服务器返回的响应头 Content-Type 也得是 image/webp，二者必须一致
• 的 src 不能带查询参数（如 logo.jpg?format=webp），否则不支持 WebP 的浏览器可能收到 406 或损坏数据

的 media 和 type 怎么配才真触发

不是“多选一”，而是从上到下逐条匹配：第一个 media 为真 且 type 被当前浏览器支持的 才会加载，其余全跳过。

常见错误写法： 放在最前，结果 WebP 根本没机会加载。

实操建议：

• 把兼容性最高、最可能被用到的格式放最前，比如
• 视口宽度判断比 resolution 更可靠，推荐 media="(max-width: 768px)"，少用 (min-resolution: 2dppx)
• 务必保留底部的 标签，它不是可选项，是语义必需 + 强制兜底节点

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，彻底规避路径和网络依赖
• 动态创建的 ，onerror 绑定必须在 appendChild() 之前完成

loading="lazy" 降级失效时，页面为什么一片白

浏览器不支持 loading="lazy" 时，它不会读取 data-src，也不会报错，只是当这个属性不存在，然后按默认逻辑加载 src。如果此时 src 是空、占位图或非法路径，结果就是白屏。

实操建议：

• src 必须始终指向可用资源：1px GIF、LQIP 图，或 SSR 渲染出的真实小图；绝不能留空
• data-src 存高清图地址，且必须在 HTML 中静态存在（不能靠 JS 注入），否则断网时就丢了
• 关键图片（如商品主图、头图）跳过懒加载：直接写死 src，不加 loading="lazy"

真正可靠的降级不是靠单一机制，而是「多层 fallback 路径 + 状态隔离 + 渲染前校验」三者同时成立。最容易被忽略的是：你以为 是兜底，其实它自己也可能 404；你以为 onerror 能兜住所有失败，其实它连 CORS 都捕获不到。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！