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

fruge365

发布于 2025-12-15 09:20:12

3940

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

为什么图片决定首屏体验

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

格式选型：WebP 与 AVIF

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

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

<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 懒加载：

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

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）：

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)
}