ToolBox Image — PNG vs WebP vs AVIF — 哪种格式最节省空间？
我们在真实图像上比较 PNG、WebP 和 AVIF 压缩——照片、截图、标志和图形——看看哪种格式在文件大小、质量和兼容性方面胜出。
If you regularly save images for the web, you have noticed that file sizes vary wildly between formats. A PNG that looks identical to a WebP can be three times as large. An AVIF can be half the size of a JPEG at the same quality.
Photograph: the landscape shot
A 4000 × 2250 landscape photo shot on a modern smartphone. This is the kind of image that benefits most from modern compression.
| Format | File size (quality 80) | Savings vs PNG | Transparency |
|---|---|---|---|
| PNG (lossless) | 14.2 MB | — | Yes |
| JPEG | 1.8 MB | 87% | No |
| WebP (lossy) | 1.2 MB | 92% | Yes |
| AVIF | 720 KB | 95% | Yes |
For photographs, AVIF wins decisively — it is nearly 60% smaller than WebP and 97% smaller than the original PNG.
Screenshot: the desktop capture
A 2560 × 1440 screen capture showing a code editor with syntax highlighting.
| Format | File size | Savings vs PNG | Artefacts |
|---|---|---|---|
| PNG (lossless) | 980 KB | — | None |
| WebP (lossy) | 340 KB | 65% | Minor |
| WebP (lossless) | 620 KB | 37% | None |
| AVIF | 260 KB | 73% | Visible |
Lossless WebP hits a sweet spot: 37% smaller than PNG with zero quality loss.
Logo with transparency
A 1200 × 400 brand logo with transparent background.
| Format | File size | Transparency | Best use |
|---|---|---|---|
| PNG (lossless) | 140 KB | Yes | Universal |
| WebP (lossless) | 95 KB | Yes | Web, 97% support |
| AVIF | 52 KB | Yes | Modern browsers |
Which format should you use?
- Photographs: AVIF for modern browsers; WebP lossy for wider support
- Screenshots with text: WebP lossless
- Logos and icons: WebP lossless for web, PNG for max compatibility
- Infographics: WebP lossless
- Email and social media: JPEG