图片太多加载慢？按屏加载优化技巧

图片加载性能优化不能只靠“懒加载”一招鲜，而需多管齐下：优先采用浏览器原生 `loading="lazy"` 属性实现轻量高效按屏加载，首屏关键图设为 `eager` 并务必声明 `width`/`height` 防止布局偏移；结合 `` + `srcset` 与媒体查询，让不同设备自动获取最小合适尺寸的资源；对复杂交互场景，用 `Intersection Observer` 精准控制提前加载；更深层的提速则依赖 WebP/AVIF 格式转换、CDN 高效缓存（带哈希指纹与合理 Cache-Control）以及构建或 CDN 层的自动转码能力——真正影响首屏速度的，往往是图片未压缩、未适配、缓存失效这三大隐形瓶颈。

图片懒加载（Lazy Loading）必须用 loading="lazy"

现代浏览器原生支持的懒加载是最轻量、兼容性足够（Chrome 76+、Firefox 75+、Safari 15.4+）的方案，不需要 JS 库也能生效。关键在于给 标签加上 loading="lazy" 属性，浏览器会自动在图片进入视口前不发起请求。

注意：loading="lazy" 对 background-image 无效，只作用于 和