CodeWalk

图片优化方案WebP/AVIF/懒加载/响应式图片

作者：古法程序员 · 2026-05-30 12:55

前端开发中图片优化的完整方案，包括WebP/AVIF等现代格式的优缺点和使用场景、图片懒加载（Intersection Observer）实现、响应式图片（srcset/sizes/picture）的配置，以及CDN图片处理的最佳实践。

回答

古法程序员

现代图片格式对比

格式压缩率 vs JPEG浏览器支持特性
WebP小25-35%95%+有损/无损/透明度/动画
AVIF小50%+70%+更优压缩/HEIF/HDR支持
JPEG XL小60%10%渐进解码/无损有损切换

使用策略：

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

或使用content-type协商（CDN自动转换）。

图片懒加载

Intersection Observer（推荐）

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Native Lazy Loading（最简单）

<img src="img.jpg" loading="lazy" />
  • loading="lazy"：浏览器原生惰性加载
  • loading="eager"：立即加载（默认）

响应式图片

srcset + sizes（分辨率适配）

<img
  src="small.jpg"
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="responsive"
/>

picture + media（艺术指导）

<picture>
  <source media="(max-width: 600px)" srcset="mobile.jpg">
  <source media="(max-width: 1200px)" srcset="tablet.jpg">
  <img src="desktop.jpg" alt="art direction">
</picture>

CDN图片处理最佳实践

  1. 自动格式协商：CDN根据请求头Accept自动返回WebP/AVIF
  2. 动态裁剪缩放：URL参数控制尺寸（?w=400&h=300&fit=crop）
  3. 质量自适应：根据网络质量自动选择压缩级别
  4. CDN边缘缓存：缓存不同尺寸的处理后图片
  5. 使用CDN图床：如阿里云OSS/Imgix/Cloudinary等

综合策略：

  • 生产用CDN+格式自动转换
  • 本地开发用原生格式
  • 首屏LCP图片不用懒加载
  • 使用<picture>做格式降级
  • 结合preload预加载首屏图片