Image Formats Compared
Choosing the right image format can cut file sizes by 50% or more without visible quality loss. Here's when to use each format.
Format Comparison
| Format | Best For | Compression | Transparency | Browser Support |
|---|---|---|---|---|
| WebP | Photos & graphics | Lossy & lossless | Yes | 97%+ |
| AVIF | Photos (max compression) | Lossy & lossless | Yes | 92%+ |
| JPEG | Photos (legacy) | Lossy only | No | 100% |
| PNG | Graphics with transparency | Lossless only | Yes | 100% |
| SVG | Icons, logos, illustrations | Vector (scalable) | Yes | 100% |
| GIF | Simple animations | Lossless (256 colors) | Binary only | 100% |
Size Comparison (Typical Photo)
Approximate file sizes for a 1200×800 photograph at similar visual quality:
PNG (lossless)2,400 KB
JPEG (quality 85)180 KB
WebP (quality 85)120 KB
AVIF (quality 85)80 KB
Quick Decision Guide
Photograph → WebP (with JPEG fallback)
Best balance of compression, quality, and compatibility. Use AVIF if you can handle the <picture> element.
Icon or logo → SVG
Infinitely scalable, tiny file size, perfect for retina. Falls back to PNG if needed.
Screenshot or graphic with text → PNG or WebP
Lossy compression can blur text. Use PNG for pixel-perfect or WebP lossless.
Animation → MP4 video or animated WebP
GIF files are massive. A 5-second GIF can be 10MB; the same as MP4 is ~500KB.
Using the <picture> Element
Serve modern formats with automatic fallback:
<picture> <source srcset="photo.avif" type="image/avif" /> <source srcset="photo.webp" type="image/webp" /> <img src="photo.jpg" alt="Description" width="800" height="600" /> </picture>
See what image formats your website is currently serving.
Scan Your Website