The decision table
| Image role | Use | Why |
|---|---|---|
| Photos / hero images | WebP (AVIF if your stack automates it) | 25–35% smaller than JPG; universal support |
| Logos, icons | SVG | Vector: infinitely sharp, tiny, styleable |
| Screenshots, UI images | WebP | Crisp text without PNG weight |
| Images with transparency | WebP | Alpha channel at a fraction of PNG size |
| og:image (social previews) | JPG | Every scraper handles it predictably |
| Email-embedded images | JPG / PNG | Email clients lag browsers by years |
| Animations | Video (MP4/WebM), else WebP | GIF is 10× the size of equivalent video |
Summary: WebP is the workhorse, SVG owns vector graphics, JPG survives for compatibility edges. PNG's remaining niche is pixel-perfect masters and the rare consumer of lossless raster with alpha that can't read WebP.
What about AVIF?
AVIF compresses ~20% smaller than WebP and supports HDR — it is the technically superior format, and all modern browsers now decode it. The catch is workflow: encoding is slow, tooling is thinner, and the win over WebP is modest compared to WebP's win over JPG. Practical guidance: if your CDN or image pipeline serves AVIF automatically (many do), enable it; if you hand-manage files, WebP is the effort-to-benefit sweet spot.
Formats are half the story — sizing is the other half
A WebP hero exported at 4000 px wastes more bytes than a JPG exported at the right size. Format choice and sizing work together:
- Resize to the largest displayed size: 1920 px full-width, ~1200 px content, ~600 px thumbnails.
- Serve responsive variants with
srcsetso phones get phone-sized files. - Set explicit
width/height(prevents layout shift) andloading="lazy"below the fold.
Budgets and the Core Web Vitals connection are covered in Compress images for websites.
A pragmatic migration path
You don't need to convert a whole site in one heroic weekend: