Choosing an image format used to mean choosing between "small" and "supported". That is no longer true. Four formats can now produce a photograph under 200 KB, and the right answer depends on what you are optimising for.
The numbers
For the same 3000 × 2000 photograph, roughly:
| Format | File size | Encode time (server) | Notes |
| JPG q82 | 480 KB | 40 ms | Universal | | WebP q82 | 195 KB | 320 ms | Alpha, universal | | AVIF q55 | 96 KB | 4,800 ms | Alpha, universal | | PNG | 2,100 KB | 210 ms | Lossless, alpha |
The pattern is consistent: each step up the ladder buys roughly 50% fewer bytes and costs dramatically more CPU.
Use AVIF when you can
If your audience is on current browsers and you generate images at build time, AVIF wins on every axis that matters — file size is the only axis. The counter-argument is encoding cost: 4.8 seconds per image is real money on a build server, and it is the reason AVIF adoption stalled for years.
Two ways around it:
- Cache aggressively. Convert once, store the output, serve it forever.
- Prefer WebP on small images. Below about 100 KB the gap between AVIF and
WebP narrows enough that the encoding cost is not worth it.
Use WebP as the default
WebP is 25–35% smaller than JPG at matched quality, supports alpha, and every browser in use decodes it. Encoding is fast enough to do on a request if you really want to. This is the correct answer for the vast majority of sites.
Use PNG when it is lossless that matters
Screenshots with flat UI, logos with hard edges, diagrams with text. Below a certain colour count PNG can still win, because lossless beats lossy regardless of file size. WebP's lossless mode is usually better than PNG, but lossy WebP at quality 95 is often a better compromise.
Use JPG only for genuine legacy
Email clients, very old CMS installations and print workflows. It is the only format you can be certain will open everywhere.
Serve both with
The correct modern pattern gives each browser its best option:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" width="1600" height="900" alt="...">
</picture>Browsers take the first source they can decode. The JPG fallback is only ever downloaded by software that predates 2020.
A note on transparency
Only PNG, WebP, AVIF and GIF carry an alpha channel. Converting a transparent PNG to JPG forces you to flatten it onto a background colour — pick that colour deliberately, because white and black both look wrong often enough to matter.