图片优化终极指南：WebP/AVIF 选型、懒加载与 CDN 配置

为什么图片决定首屏体验

图片通常占页面总传输量的 40%+，直接影响 LCP、CLS 与交互稳定性
目标：LCP ≤ 1s（移动 4G），首屏图片 ≤ 200KB，避免布局抖动与阻塞渲染

格式选型：WebP 与 AVIF

WebP：广泛支持、编码快、体积小于 JPEG/PNG，适合通用场景
AVIF：更优压缩与质量，低码率下仍能保真；编码时间更长，转换管线需优化
建议：首屏与大图优先 AVIF，普通图与图标用 WebP；保留 PNG/JPEG 作为回退

响应式与回退（picture/srcset/sizes）

html 复制代码

<picture>
  <source type="image/avif" srcset="/img/hero-640.avif 640w, /img/hero-1200.avif 1200w" />
  <source type="image/webp" srcset="/img/hero-640.webp 640w, /img/hero-1200.webp 1200w" />
  <img
    src="/img/hero-1200.jpg"
    alt="hero"
    width="1200"
    height="800"
    loading="eager"
    fetchpriority="high"
    decoding="async"
    srcset="/img/hero-640.jpg 640w, /img/hero-1200.jpg 1200w"
    sizes="(max-width: 640px) 640px, 1200px"
  />
</picture>

关键 LCP 图像：loading="eager" + fetchpriority="high"；其他图像 loading="lazy"
提供固有尺寸（width/height）或 CSS aspect-ratio，避免 CLS

懒加载策略（IntersectionObserver 与原生）

原生：<img loading="lazy"> 适合非关键图像
JS 懒加载：

js 复制代码

const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      const img = e.target
      img.src = img.dataset.src
      img.srcset = img.dataset.srcset || ''
      io.unobserve(img)
    }
  })
})
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img))

注意：不要懒加载首屏 LCP 图像；列表中分批加载与占位骨架结合

CDN 与边缘配置（内容协商/缓存/压缩）

Vary 与回退：根据 Accept 返回 AVIF 或 WebP，未支持时返回 JPEG/PNG

nginx 复制代码

map $http_accept $img_format {
  default jpg;
  ~*avif avif;
  ~*webp webp;
}
server {
  location ~* ^/img/(.*)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    add_header Vary "Accept";
    try_files /img/$1.$img_format /img/$1.jpg =404;
  }
}

压缩与协议：开启 Brotli/Gzip；CDN 启用 HTTP/2/3 与 TLS 会话复用
资源提示：对 LCP 图像使用 preload as=image；其余用 prefetch

动态处理与转换（Cloudflare/Cloudinary/自建）

URL 转换：/img/hero.jpg?format=avif&width=640&quality=65 由边缘进行转换与裁剪
缓存层：设置 TTL 与 Key（路径+查询），避免重复转换
失真控制：按素材类型选择质量（人像 70--80、插画 60--70、背景 50--60）

构建管线（Sharp/Imagemin/Vite 插件）

批量转换脚本（Sharp）：

js 复制代码

import fs from 'node:fs'
import sharp from 'sharp'
async function convert(input, base) {
  const img = sharp(input)
  await img.resize(1200).avif({ quality: 65 }).toFile(`${base}-1200.avif`)
  await img.resize(640).avif({ quality: 65 }).toFile(`${base}-640.avif`)
  await img.resize(1200).webp({ quality: 75 }).toFile(`${base}-1200.webp`)
  await img.resize(640).webp({ quality: 75 }).toFile(`${base}-640.webp`)
}
for (const f of fs.readdirSync('src/img')) {
  const base = `public/img/${f.replace(/\.(png|jpe?g)$/,'')}`
  await convert(`src/img/${f}`, base)
}

Vite：结合 vite-imagetools 或 Rollup image-plugin 管理派生资源与 srcset

字体与图标（配套优化）

字体子集化与 font-display: swap；图标优先 SVG Sprite/组件，避免位图图标

验证与监控

Lab：Lighthouse、WebPageTest；检查 LCP/CLS 与图片计量（传输体积）
Field：RUM 上报 LCP 与 UA-specific memory；阈值：LCP > 1s 告警、CLS > 0.1 告警
版本对比：发布前后对比首屏路由包体与 LCP，形成报告

常见坑与修复

懒加载 LCP 图像：改为 eager + fetchpriority="high"
未提供尺寸导致 CLS：补充 width/height 或 aspect-ratio
过度 preload：仅关键图像使用；其他用 prefetch
srcset 与 sizes 不匹配：导致下载错误尺寸；校对断点与容器宽度
转换质量过低：检查素材类型与压缩参数，必要时单独策略

落地清单（12 项）

为 LCP 图像设置 preload 与高优先级；其余懒加载
全量转换管线：生成 AVIF/WebP/回退 JPEG 与响应式版本
CDN 配置 Vary: Accept 与 try_files 回退
设置缓存策略：immutable 静态资源；合理 TTL 与 Key
资源提示与连接：preconnect CDN 域名
骨架与占位：避免白屏与 CLS
构建与脚本：Sharp/Imagemin/Vite 插件自动化
质量策略：素材分类与质量分档
监控与告警：LCP/CLS 与图片体积阈值
文档与规范：图片提交要求与命名约定
回归脚本：关键路由的 LCP 对比与体积审计
每月复盘：命中率、转化率与性能趋势

总结

图片优化是前端性能的关键抓手；通过格式选型、响应式与 CDN 配置协同，能显著降低首屏延迟
使用"度量→转换→提示→缓存→监控"的闭环，持续保持图片性能与体验稳定