Images are usually 60–80% of page weight. Choosing the right format is the single biggest performance lever you have.
The decision table
- Photos: AVIF (best compression, ~50% smaller than JPEG) → WebP fallback
- Icons/logos/illustrations: SVG — infinitely sharp, tiny, stylable with CSS
- Screenshots with text: PNG or WebP-lossless (JPEG smears text)
- Animation: video (
<video autoplay muted loop>) — GIFs are 10x larger
Serving modern formats safely
<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="..." width="1200" height="600" loading="lazy"> </picture>
The browser takes the first format it supports; old browsers fall back to JPEG.
Free conversion tools
- Squoosh.app — Google's in-browser converter with live quality preview
- SVGOMG — strips SVG bloat (often 50%+ smaller)
Rule of thumb: hero images under 200KB, thumbnails under 30KB.