首屏图片加载优化核心是优先加载关键图、延迟非关键图。具体包括：HTML靠前写主图标签、用WebP/AVIF格式、srcset响应式、data URL内联小图；非首屏图用loading="lazy"或IntersectionObserver预加载；设置宽高、骨架屏、LQIP和淡入动画提升体验；服务端配合CDN转码、压缩及preload。
首屏图片资源的加载时机，直接决定用户“第一眼看到内容”的快慢。优化核心不是让所有图都立刻加载，而是确保首屏关键图尽快呈现，非关键图延迟或按需加载。
优先加载首屏关键图片
首屏可见区域内的图片必须第一时间加载，不能被其他资源阻塞。关键做法包括：
- 把首屏主图的 <img> 标签写在 HTML 靠前位置，避免被 JS 或 CSS 阻塞解析
- 使用 WebP/AVIF 格式 替代 JPEG/PNG，同等质量下体积减少 30%–50%
- 对首屏图做响应式处理：通过 srcset + sizes 属性匹配设备宽度，避免下载远超显示尺寸的大图
- 关键图可考虑内联为 data URL（仅限极小图标或背景图），彻底消除 HTTP 请求
延迟加载非首屏图片
视口外的图片完全没必要在首屏阶段请求，应推迟到即将进入可视区域时再加载。
- 原生支持：直接加 loading="lazy" 属性，现代浏览器自动处理（兼容性已覆盖 98%+）
- 精准控制：用 IntersectionObserver 实现提前加载（如设置
rootMargin: '200px'），让图片在滚动到前就发起请求，避免进入视口时白屏 - 降级方案：不支持 Observer 的老浏览器，可用 getBoundingClientRect() + scroll 事件模拟判断
用占位与渐进式体验降低感知延迟
即使图片还没加载完，用户也不该看到大片空白或布局跳动。
- 给 <img> 设置明确的 width/height，防止加载时重排重绘
- 添加轻量 骨架屏 或低质量占位图（LQIP），先渲染模糊缩略图，再替换为高清图
- 配合 CSS 淡入动画（如
opacity: 0 → 1），让图片出现更自然，提升感知速度
服务端协同减少首屏图片压力
前端策略需和服务端配合，才能发挥最大效果。
- CDN 开启 WebP 自动转码，请求时根据 Accept 头返回最优格式，无需改代码
- 服务端开启 Gzip/Brotli 压缩，对 HTML、CSS、JS 等文本资源有效，但注意不要重复压缩已压缩图片
- 首屏图片走 HTTP/2 Server Push（谨慎使用）或 <link rel="preload"> 提前声明，让浏览器尽早发起请求
