图片优化全攻略：AVIF、懒加载与响应式图片

图片往往占据网页传输体积的一半以上，是性能优化最值得投入的方向。本文给出一套系统化的图片优化方案。

选择正确的格式

现代图片格式的压缩率差异巨大：

格式	压缩率	支持情况
PNG	无损	全支持
JPEG	有损	全支持
WebP	高	现代浏览器
AVIF	更高	现代浏览器

AVIF 相比 JPEG 可节省 50% 以上体积，但编码耗时更长。用 <picture> 做渐进增强：

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="描述" />
</picture>

响应式图片

不同设备需要不同尺寸的图片。用 srcset 让浏览器按需选择：

<img
  srcset="img-480.jpg 480w, img-800.jpg 800w, img-1200.jpg 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  src="img-800.jpg"
  alt="描述"
/>

配合 sizes 告诉浏览器不同视口下的显示宽度，避免移动端下载桌面大图。

懒加载

对首屏之外的图片，用原生懒加载：

<img loading="lazy" src="..." alt="..." />

注意首屏图片不要懒加载，否则会延迟 LCP。

构建图片管线

在工程层面，接入图片处理管线自动化：

• 构建时生成多尺寸、多格式的图片；
• 用 sharp 等工具批量压缩；
• 图片服务（如 CDN 的图片处理）动态裁剪。

关键原则

• 永远给图片设 width/height 或 aspect-ratio，避免 CLS；
• 首屏主图用 preload 预加载；
• 图标优先用 SVG 或字体图标，而非位图。

结语

图片优化的核心是「在合适的场景给用户合适的图片」：合适的格式、尺寸、时机。把管线自动化，才能持续受益。