图片过多加载慢？按屏加载优化方案

图片加载性能优化不能只靠“懒加载”，而需结合现代浏览器原生的 `loading="lazy"` 属性（首屏关键图设为 `eager`）、严格的宽高或 `aspect-ratio` 防布局偏移（CLS）、`` + `srcset` 实现响应式按需加载、Intersection Observer 进行精准提前加载，以及 WebP/AVIF 格式转换与带哈希指纹的 CDN 强缓存协同发力——这四层组合拳缺一不可，否则再完善的懒加载也难救首屏体验。

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

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

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