一张 2MB 的头图能吃掉整页一半的加载时间。图片优化是提速清单里 ROI 最高的一项：格式、尺寸、压缩三步，一张 2MB 的图能压到 80KB 还不糊。
下面是可直接跑的命令和参数。
核心结论
- ✓照片 AVIF/WebP，图标 SVG，截图 PNG 只在必要时
- ✓按展示宽度输出多档，srcset 交给浏览器选
- ✓压缩一次到位：质量 75–82 是甜点区
- ✓首屏 preload，其余懒加载
格式选择
- ·照片/头图：AVIF 优先，不兼容回退 WebP
- ·Logo/图标：SVG，无限缩放零体积
- ·简单图形：PNG-8；透明复杂图才用 PNG-24
压缩命令
# 转 AVIF（质量 75）
# avifenc input.png -o output.avif --min 0 --max 32
# 或用 sharp 一次生成多尺寸
# sharp input.png --resize 1200 --webp "{quality:80}" -o hero-1200.webp响应式输出
<img src="/hero-800.webp"
srcset="/hero-480.webp 480w, /hero-800.webp 800w, /hero-1200.webp 1200w"
sizes="(max-width: 640px) 100vw, 800px"
width="1200" height="630" alt="WebTagr 分析结果" loading="lazy">CDN 参数
图床/CDN 一般支持 ?format=auto&width=800 这类参数，迁移期先用参数顶住，再逐步换本地多尺寸文件。
上线前检查清单
- 01首屏图是否 preload + 定宽高
- 02是否有 AVIF/WebP 多档
- 03质量是否在 75–82
- 04非首屏是否懒加载
- 05单图是否 < 150KB
常见问题
AVIF 兼容性够了吗？
2026 年主流全支持，配 WebP 回退即可放心用。
压多少算过头？
文字边缘发虚、渐变断层就是过头，回调 5 个点。
GIF 动图怎么办？
转 WebM/MP4，体积差一个数量级，体验更好。