同一张照片,JPG 300KB、WebP 180KB、AVIF 90KB——四种格式体积能差 5 倍。选错了白花带宽和加载时间。关键是理解每种格式擅长什么。
四种格式一览
| 格式 | 压缩 | 透明 | 动画 | 浏览器支持 |
|---|---|---|---|---|
| JPG | 有损 | ✗ | ✗ | 100%(古老) |
| PNG | 无损 | ✓ | ✗ | 100% |
| WebP | 有损+无损 | ✓ | ✓ | 97%(IE 不支持) |
| AVIF | 有损+无损 | ✓ | ✓ | 94%(2020+ 浏览器) |
按场景选
照片 / 高颜色复杂度 → AVIF > WebP > JPG 有损压缩擅长处理连续渐变。AVIF 在同等画质下比 JPG 小 50%-70%,比 WebP 小 20%。
图标 / 纯色 / 截图 → PNG 或 WebP 无损 这类图色块纯、边缘锐利。JPG 有损压缩会在色块边界产生彩色噪点(伪影),看起来很脏。PNG 无损,体积小;追求更小可用 WebP 无损模式。
需要透明通道 → PNG / WebP / AVIF JPG 不支持透明。PNG 最成熟稳妥;如果目标浏览器现代,WebP 透明支持好且体积小得多。
动图 → WebP > GIF > APNG GIF 颜色限制 256 色、体积大、无高清。WebP 同画质能小 50%-70%。
AVIF 目前的门槛
- 编码慢:一张图 AVIF 压缩比 WebP 慢 5-10 倍,大批量处理要多预留时间
- Safari 16+ 才完整支持(2022 年底)
- 老旧浏览器 fallback 仍需 JPG/PNG
实践方案:用 HTML <picture> 标签多源头:
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="">
</picture>
浏览器从上到下挑第一个能解码的,老浏览器自动回退到 JPG。
质量参数怎么设
JPG:80-85% 是最佳点。往下降肉眼可见伪影,往上升体积暴涨但画质提升有限。
WebP 有损:75-85%,比 JPG 低 5-10% 的数值通常视觉等价。
AVIF:50-70% 就能达到 JPG 85% 的画质。别简单复用 JPG 的数值——会过度压缩或过度保真。
PNG 优化:不止是压缩
PNG 无损,但体积差距来自元数据、过滤算法选择、颜色索引等。一个没优化的 1MB PNG 经过 pngquant + oxipng 可能能压到 250KB 且视觉无损。浏览器保存的 PNG 基本都是没优化的,值得走一遍压缩工具。
一个常见错误:用 PNG 存照片
PNG 对渐变和噪点效率差,存一张 JPG 800KB 的照片可能变成 5MB 的 PNG。照片永远用有损格式。只有当你需要透明或像素级精确时才选 PNG。
批量压缩
把一堆图拖进去,选目标格式和质量,客户端本地压缩(不上传服务器),下载压缩包——对照原图看体积和画质的平衡点。