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.
Getting Compression Quality Right
Format choice sets the ceiling; the quality setting decides where you land under it. A few rules that hold up in practice:
- Photos (lossy): quality 75–85 is the sweet spot for JPEG and WebP — visually indistinguishable from the original at a fraction of the size. Below ~60 you start seeing blocky artefacts and smeared detail.
- AVIF holds up lower: quality 50–60 often matches JPEG 80, so push it harder than you would a JPEG.
- Flat graphics, screenshots, text: use lossless (PNG or WebP-lossless). Lossy compression turns sharp edges and coloured text into visible halos.
- Resize before you compress. Serving a 4000px image into an 800px slot wastes far more bytes than any quality tweak — match pixel dimensions to the display size first.
- Always set explicit
widthandheightto reserve layout space, and addloading="lazy"to below-the-fold images.