Guide
AVIF vs WebP vs JPEG
All three can show the same photograph. The difference is how many bytes it takes, whether older software can open the file, and how long you are willing to wait for the encoder. Here is the short version, then the trade-offs.
The one-line answer
Use WebP as your default for photographs and screenshots. Add AVIF for visitors on modern browsers when you care about the last 30% of bytes. Keep JPEG for anything that has to open on unknown software, and PNG only for flat colour or lossless requirements.
What each format is actually good at
JPEG has been the baseline since 1992: every camera, printer, editor and email client reads it, and its artefacts are familiar and predictable. WebP (2010) is roughly 25–35% smaller than JPEG at matched quality across the board, and it adds transparency. AVIF (2019, from the AV1 video codec) pushes another 20–50% below WebP on photographs, especially at low bitrates, but encoding is several times slower and support, while good on current browsers, is thinner in older software. JPEG XL (2021) is the modern challenger with the best high-quality efficiency and lossless re-encoding of existing JPEGs, but browser support is still uneven — treat it as an option, not a default.
Where each one breaks
JPEG falls apart on sharp text, line art and flat gradients: block artefacts appear around edges and colours band. WebP handles those better but can look soft on very fine texture at low quality. AVIF is excellent on gradients and dark scenes, but its encoder is slow and its decode cost on low-end phones is measurably higher. For screenshots and icons, all three lossy formats do worse than a good lossless PNG or lossless WebP.
Fallbacks are not optional
Serve modern formats through <picture>: an AVIF source first, a WebP source second, and an <img> pointing at the JPEG. Browsers pick the first type they can decode, so old devices get the file they can actually open and new ones get the small one. Everything here is generated locally, so producing all three from one source takes a minute.
Test it on your own image
Generic percentages are a starting point, not a promise: a foggy landscape and a screenshot of code behave completely differently. Drop your image into the editor, set the right pane to WebP, then switch it to AVIF and to JXL while watching both the size readout and the preview. The format that wins on your images is the one to ship.
What to expect
| JPEG | WebP | AVIF | JPEG XL | |
|---|---|---|---|---|
| Size vs JPEG | baseline | 25–35% smaller | 50–70% smaller | 50–65% smaller |
| Transparency | no | yes | yes | yes |
| Animation | no | yes | limited | yes |
| Browser support | everything | all modern browsers | Chrome, Firefox, Safari 16+ | newer builds only |
| Encode speed | fast | fast | slow | medium |
| Lossless JPEG re-encoding | no | no | no | yes |
Ranges are for photographs at matched visual quality. Measure your own files before committing to a pipeline.
Questions
Is AVIF always smaller than WebP?
Usually, on photographs — typically 20–50% at matched quality. On flat graphics and screenshots the gap narrows, and WebP lossless can even win.
Can I just use AVIF everywhere?
Not yet. Anything older than Safari 16 cannot decode it, and some desktop software still cannot open AVIF files at all. Without a fallback you will show a broken image to a slice of your audience.
Does converting JPEG to WebP lose quality?
Yes, because it is a new lossy encoding on top of an already lossy file. Convert from the original when you can; otherwise use a high quality setting so the second generation is visually clean.