图片降级是确保浏览器能力不足或网络异常时仍能加载可用内容，核心是提供可访问、不依赖js的明确fallback路径：src必须指向真实资源（如1px gif），data-src静态写死，首屏图禁用lazy，intersectionobserver需内联并配fallback逻辑。
图片降级不是“让图变差”，而是让浏览器在能力不足或网络异常时，仍能加载出可用内容——核心在于提供明确 fallback 路径，且 fallback 本身必须可访问、不依赖 JS。
loading="lazy" 必须配 src + data-src 双源
只写 loading="lazy" 不解决任何问题。浏览器不支持时它直接忽略，此时若 src 是空值、占位图路径错误或指向未部署的 LQIP，就会白屏。
-
src必须始终指向一个真实可加载资源：1px GIF（data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==）、内联 SVG 占位符，或 SSR 渲染出的小图 -
data-src存高清图地址，且必须静态写死在 HTML 中（不能靠 JS 注入），否则断网时 JS 加载失败，data-src根本不存在 - 首屏关键图（如 banner、商品主图）应跳过懒加载：直接写
src，不加loading属性，也不设data-src
IntersectionObserver 初始化必须内联 + 兜底赋值
如果懒加载逻辑全靠外部 JS，那 JS 请求失败 = 所有 data-src 图片永不加载。不能只检测 API 是否存在，检测失败后必须立刻补救。
- 把初始化代码内联进
<script></script>，避免因网络拦截或 CDN 故障导致脚本缺失 - 用
if ('IntersectionObserver' in window)检测后，**必须跟一段 fallback 逻辑**：document.querySelectorAll('img[data-src]').forEach(img => { img.src = img.dataset.src; }); - 避免在 CSS 中用
display: none隐藏图片容器——Safari 和多数 WebView 会直接跳过该元素，即使后续显示也不会触发加载
预加载和响应式图片别混用降级逻辑
<link rel="preload"> 和 srcset 都不是降级手段，它们是调度策略。滥用反而增加无效请求，尤其在网络受限时。
-
<link rel="preload" href="..." as="image">必须放在，且href是静态路径（不能含 JS 变量），否则 404 也照发请求 - 非首屏图、hover 后才可能展示的图，不要预加载；iOS Safari 在
navigator.connection?.effectiveType === '2g'时会静默丢弃请求 -
srcset的 fallbacksrc必须是真实可用图，不能是占位图路径——否则旧浏览器或解析失败时，看到的就是空白
最容易被忽略的是：降级不是“JS 失败了就不管”，而是从 HTML 结构开始就确保每张图至少有一条通路。只要 src 可访问、data-src 存在、兜底逻辑内联且执行，哪怕断网+禁 JS+老旧浏览器，用户也能看到内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
