应为非首屏图片添加 loading="lazy" 以降低加载权重，首屏关键图用 loading="eager" 或默认；禁用空 src，改用透明 base64 占位；配合 fetchpriority="low/high" 微调优先级，注意 picture/srcset 中 lazy 必须写在 img 上。
用 loading="lazy" 批量控制图片加载优先级
列表页图片批量降级，本质不是压缩或改格式，而是降低它们的加载权重——让浏览器默认不急着下载。最直接有效的方式就是统一加 loading="lazy" 属性。它不需要 JS 监听、不依赖第三方库，一行 HTML 就能触发浏览器原生的懒加载调度逻辑。
注意：这个属性对 <img> 和 <iframe></iframe> 有效，但对 CSS 背景图、<picture></picture> 内部的 <source></source> 无效。
- 所有非首屏图片（比如商品列表第 2 页起的图、评论区头像）都应加
loading="lazy" - 首屏关键图（如 Banner、主商品图）必须用
loading="eager"或干脆不写该属性（默认行为是 eager） - 不要给
loading="lazy"的图片再配data-src+ JS 加载逻辑，两者混用会冲突，反而增加判断开销
降级 ≠ 不加载：避免误设空 src 或坏占位图
有些团队想“彻底降级”，把 src 清空或设成 src=""，这是危险操作。浏览器会立即报 Failed to load resource: net::ERR_INVALID_URL，同时触发 layout shift，还可能被 Lighthouse 标为严重可访问性问题。
正确做法是保留一个最小、合法、语义清晰的占位资源：
- 用 1×1 的透明
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==作为src值（不会发请求，且兼容所有浏览器） - 如果需要视觉占位，用
background-image配合background-size: cover实现，确保容器有固定宽高，防止重排 - 绝对不要用
src="about:blank"或src="#"，它们在部分浏览器中仍会触发无效请求或解析错误
服务端配合：用 fetchpriority 进一步微调
当列表页同时存在关键图和大量普通图时，仅靠 loading 不足以拉开优先级差距。现代浏览器支持 fetchpriority 属性，可与 loading 协同使用：
- 首屏大图加
fetchpriority="high"（即使没loading，也会提升 fetch 队列位置） - 列表中普通商品图加
loading="lazy" fetchpriority="low"，明确告诉浏览器：“这图可以晚点、低带宽下跳过” -
fetchpriority="low"在 Chrome 101+、Edge 101+ 支持，Safari 尚未支持，但不影响降级逻辑回退到loading="lazy"
容易被忽略的边界：响应式图片 + 懒加载的组合陷阱
用 <picture></picture> 或 srcset 时，loading="lazy" 必须写在最外层 <img> 上，而不是 <source></source>。否则无效。
更关键的是：如果 srcset 里包含高分辨率图（如 2x），而设备 DPR 较低，浏览器仍可能提前下载大图。这时要配合 fetchpriority="low" 或服务端 User-Agent 判断，动态输出适配分辨率的 srcset 值。
另外，loading="lazy" 对通过 CSS content 插入的伪元素图片完全无效——这类图必须走 JS 控制或改为 <img> 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
