Image Optimization for the Web: Formats, Sizing & Delivery
Images are most of the web's weight. Getting them right is the single highest-leverage performance work on most sites — and it's four decisions: format, dimensions, quality, delivery.
1. Format
| Format | Best for | Notes |
|---|---|---|
| AVIF | Photos, everything modern | Smallest; encode support varies — see our AVIF converter |
| WebP | Photos & graphics, wide support | ~30% smaller than JPG; the safe modern default |
| JPG | Photos, maximum compatibility | Quality 75–85 is the sweet spot |
| PNG | Screenshots, transparency, sharp edges | Lossless; huge for photos — avoid |
| SVG | Icons, logos, illustrations | Vector — see SVG optimization |
Practical pattern: <picture> with AVIF → WebP → JPG fallbacks, or simply ship WebP everywhere modern.
2. Dimensions
Never ship pixels the layout will throw away. A 4000px camera photo in a 800px column wastes ~90% of its bytes. Resize to the largest displayed size × device pixel ratio (2× covers most screens) — our resizer and srcset handle the rest:
<img srcset="hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 900px) 100vw, 800px" src="hero-800.webp" alt="…">3. Quality
Quality 80 JPG/WebP is visually indistinguishable from 100 for most photos at a fraction of the size. Compare live in the image compressor — go as low as the image tolerates, not a fixed number.
4. Delivery
Lazy-load below-the-fold images (loading="lazy"), but never the LCP hero — mark that fetchpriority="high". Always set width/height (or aspect-ratio) to prevent layout shift. Serve via CDN with far-future caching.