选择正确的图像格式可以在不影响视觉质量的情况下将页面重量减少 50% 或更多。 JPEG、PNG、WebP、AVIF、GIF 和 SVG 都在竞争，您如何决定？
TL;DR: 对于照片和复杂图像，默认为 WebP。对于需要具有锐利边缘的透明度的图形，请使用 PNG。使用 SVG 作为图标和徽标。如果您可以提供后备服务，请考虑AVIF。
格式细分
JPEG
网络默认照片格式已有 30 年。可以很好地处理摄影内容，但在相同的视觉质量下生成的文件比 WebP 更大。没有透明度。 使用时间： 最大电子邮件兼容性或非常旧的系统。
PNG
无损格式，非常适合包含文本、屏幕截图和需要 Alpha 透明度的图像的图形。生成巨大的照片文件 - 切勿将 PNG 用于照片。
网页P
由谷歌开发。有损和无损两种。生成的文件比 JPEG 小 25–35%，比 PNG 小 26%。支持透明度和动画。到 2026 年，浏览器支持率将超过 97%。最佳的网络全能工具。
AVIF
下一代格式提供的文件比 WebP 小 20–50%。编码速度较慢，浏览器支持~93%。非常适合 WebP/JPEG 后备 <picture>.
GIF
过时了。仅限 256 种颜色，动画文件大小巨大。替换为 WebP 动画或 MP4/WebM 视频，文件小 80–90%。
文件大小比较
| 格式 | 照片（1920×1080） | 图形（800×600） | 注释 |
|---|---|---|---|
| JPEG (q80) | 285 KB | 145 KB | 基线 |
| PNG | 2.1 MB | 95 KB | 非常适合图形，但不适合照片 |
| WebP (q80) | 195 KB | 68 KB | 比 JPEG 小 32% |
| AVIF (q80) | 142 KB | 52 KB | 比 JPEG 小 50% |
决策流程图
- 徽标、图标或插图？ → SVG
- 需要透明度？ → WebP（有损或无损）或 PNG
- 照片？ → WebP（有损，q75–85）
- 最大压缩？ → 带有 WebP/JPEG 后备的 AVIF
- 电子邮件？ → JPEG（最佳电子邮件客户端支持）
✅ 如何提供多种格式
使用 HTML <picture> 元素与 <source> AVIF 和 WebP 标签，在 <img> 标签。浏览器选择它支持的第一种格式。
结论
对于 2026 年的大多数网站来说，WebP 是正确的默认设置。它提供了压缩、质量、浏览器支持和功能的最佳平衡。使用 PNG 实现锐边透明，使用 SVG 实现矢量，并考虑使用 AVIF 实现性能关键型页面。