WebP 与 JPEG/PNG/GIF 性能与大小对比
通过真实案例与详细数据，直观了解 WebP 带来的压缩收益与加载速度提升。
真实案例对比
JPG
-42%
高清照片 (JPEG)
分辨率 1920×1080，质量 85
Original
1.2 MB
WebP
700 KB
PNG
-61%
透明插图 (PNG)
复杂渐变与透明背景
Original
980 KB
WebP
380 KB
GIF
-44%
动态图 (GIF)
短视频转换的动画
Original
1.6 MB
WebP
900 KB
对 Core Web Vitals 的影响
LCP (最大内容绘制)
更小的图片体积意味着更快的加载速度，显著改善 LCP 指标。
CLS (累积布局偏移)
配合显式宽高属性，快速加载的 WebP 有助于减少布局偏移。
详细数据对比
| 原图格式 | 原始大小 | WebP 大小 | 空间节省 |
|---|---|---|---|
| JPEG (Q85) | 1.2 MB | 700 KB | 42% |
| PNG (Transparent) | 980 KB | 380 KB | 61% |
| GIF (Animated) | 1.6 MB | 900 KB | 44% |
| PNG (Icon) | 45 KB | 12 KB | 73% |
注：以上数据基于典型使用场景的平均测试结果，实际压缩率可能因图像内容复杂度而异。