Picking the right image format is one of the highest-leverage performance decisions you can make. The wrong format wastes bandwidth, slows pages, and degrades visual quality. This guide compares the major web image formats and gives you a decision framework.
Format Comparison
| Format | Type | Transparency | Best for | Notes |
|---|---|---|---|---|
| JPEG | Lossy bitmap | No | Photographs | Universal support; tunable quality |
| PNG | Lossless bitmap | Yes | Screenshots, icons, line art | Larger files; perfect for sharp edges |
| WebP | Lossy or lossless | Yes | Most web images | 25-35% smaller than JPEG/PNG |
| AVIF | Lossy or lossless | Yes | Hero images, large assets | ~50% smaller than JPEG |
| SVG | Vector XML | Yes | Logos, icons, illustrations | Infinite scale; CSS-stylable |
| GIF | Lossless animation | 1-bit | Legacy only | MP4/WebM almost always better |
The Decision Framework
- Is it a logo, icon, or geometric illustration? → SVG.
- Does it need to be a small animation? → MP4 or WebM, not GIF.
- Is it a photograph or photographic asset? → AVIF primary, WebP fallback, JPEG for legacy.
- Does it need transparency or pixel-perfect edges (screenshots, UI assets)? → WebP lossless primary, PNG fallback.
- Is it a complex composite that needs both? → Use
<picture>with AVIF → WebP → JPEG/PNG fallback.
The <picture> Pattern
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="..." width="1600" height="900" loading="lazy">
</picture>Browsers pick the first supported format. Always include the img as the last child — it's the universal fallback and the element actually rendered.
Typical Savings
- JPEG → WebP: 25-35% smaller at same visual quality.
- JPEG → AVIF: 40-55% smaller at same visual quality.
- PNG → WebP lossless: 25% smaller.
- GIF animation → MP4: 80-95% smaller.