弱网图片降级需三层协作：格式兜底（picture+srcset+type）、加载超时干预（fetch+AbortController）、加载时机控制（禁用lazy）；WebP必须放source中，img的src用JPEG/PNG作fallback。
弱网下图片不降级，不是“没加属性”，而是没建立可触发的 fallback 链路。HTML 本身不感知网络状态，必须靠组合策略主动干预。
用 srcset + type 实现格式降级
这是最轻量、浏览器原生支持的降级方式，适用于 WebP → JPEG/PNG 的质量/体积权衡：
- WebP 在 Chrome/Firefox/Safari（16.4+）中已全面支持，但低端 Android WebView 或旧版 UC 浏览器可能不识别
type="image/webp"，会跳过该 - 务必把 WebP 放在
src必须是 JPEG 或 PNG——这是降级生效的前提，不是可选项 - 不要依赖
media属性做“弱网判断”，它只响应视口宽度，和网络无关
<picture><source srcset="hero.webp" type="image/webp"> @@##@@ </source></picture>
用 fetch() + AbortController 主动探测并切换图片
当需要真正基于网络延迟或超时做降级（比如 2G 下自动切为低清图），HTML 标签无能为力，必须用 JS 控制：
-
AbortController的timeout是关键，设为 1500ms 可覆盖大部分弱网首包延迟 - 失败后切换
src，注意要清除原有src再赋新值，否则可能复用缓存导致降级无效 - 不能只监听
onerror，因为图片加载失败可能是 404、CORS 或渲染中断，和网络质量无关
const img = document.getElementById('main-img');
const controller = new AbortController();
setTimeout(() => controller.abort(), 1500);
fetch('https://cdn.example.com/high-res.jpg', { signal: controller })
.then(() => { img.src = 'https://cdn.example.com/low-res.jpg'; })
.catch(() => { img.src = 'https://cdn.example.com/low-res.jpg'; });
避免在 ![]()
loading="lazy" 加剧弱网白屏
在弱网下，loading="lazy" 会进一步推迟图片加载时机，与降级目标冲突：
- 首屏核心图片（如 banner、头像）必须移除
loading="lazy"，否则可能因滚动未触发而永远不加载 - 非首屏图片若需 lazy，建议配合 IntersectionObserver 手动控制，而非依赖原生 lazy —— 它在低端 Android 上行为不一致
- 部分安卓 WebView 会忽略
loading属性，但依然执行懒加载逻辑，造成不可控延迟
真正的弱网降级不是加一个属性就完事，它依赖「格式兜底」+「加载超时干预」+「加载时机控制」三层协作。最容易被忽略的是：没有主动 abort 就谈不上降级，只靠 onerror 会漏掉大量弱网超时却未报错的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
