Use AVIF to serve images on the web, JPEG XL to archive JPEGs you already have, and WebP as the fallback. AVIF gives much smaller files and works in almost every browser. JPEG XL can shrink a JPEG with no loss at all and give the very same file back later, but not every browser shows it yet. WebP is the most widely supported of the three, though it rarely wins on size.
Which browsers support each format?
These are the figures Can I use showed on Oct 31, 2026.
| Format | Global browser support | Notes |
|---|---|---|
| WebP | 97.18% | Safari since version 16 in full |
| AVIF | 96.35% | Chrome 85, Firefox 93, Safari 16.4, Edge 121 |
| JPEG XL | 60.19% | On by default in Chrome 155 and Firefox 158; partial in Safari; not in Edge |
JPEG XL is the one that is moving fastest, so check its row again before you rely on it. If you serve it today, always offer a fallback.
How much smaller are the files?
We took the 40 newest JPEGs on the public wall that Heart Photos could hand back as JPEGs, and compared each one with two things:
- the AVIF Heart Photos already serves for it (lossy, at its default quality of 50), and
- the same JPEG run through
cjxl --lossless_jpeg=1 -e 7, which is JPEG XL's lossless recompression.
The typical image was about 2 megapixels, which is 1080p.
| Median file | Median size vs the JPEG | All 40 together | |
|---|---|---|---|
| Original JPEG | 2.00 MB | 100% | 65.0 MB |
| JPEG XL, lossless | 1.64 MB | 82% | 52.3 MB |
| AVIF, quality 50 | 334 KB | 27% | 20.8 MB |
Two things to keep in mind when reading that table:
- These do not do the same job. The AVIF is lossy: it throws information away, and it is that much smaller partly for that reason. The JPEG XL file loses nothing, so it is the fairer choice for keeping an original and AVIF is the fairer choice for showing one.
- Your images will differ. AVIF's result ranged from 1% to 84% of the JPEG across these 40, and JPEG XL's from 38% to 91%. The sample is one wall's photos, many of them landscapes, not a scientific test set.
JPEG XL's own site claims an "average 20% savings" when transcoding JPEGs. Our 40 images came in at 18% by median and 20% in total, so that figure held up here.
We did not measure WebP in this test, because a size only means something next to a matching quality, and we had no fair setting to compare. That test deserves a post of its own.
When should you use each one?
| If you want to | Use |
|---|---|
| Make web pages load faster | AVIF, with a fallback |
| Support nearly every browser with one modern format | WebP |
| Shrink a folder of JPEGs with no quality loss | JPEG XL |
| Keep an exact original you can get back | JPEG XL, or the original file |
| Edit and re-save an image many times | A lossless format, such as lossless JPEG XL or PNG |
| Send a file to someone with unknown software | JPEG |
How do you serve a modern format with a fallback?
The HTML picture element lets each browser take the first format it understands:
<picture>
<source srcset="photo.jxl" type="image/jxl">
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="What the image shows" width="1920" height="1080">
</picture>
MDN's guide to this element covers the details. Keep width and height on the img so the page does not jump while the image loads.
Frequently asked questions
Is AVIF better than JPEG XL?
For showing images on the web today, yes, mainly because far more browsers can display it. For keeping JPEGs you already have, JPEG XL does something AVIF cannot: it makes them smaller without losing anything.
Does converting a JPEG to JPEG XL lose quality?
Not with lossless recompression. The JPEG XL project describes the process as reversible, so the original JPEG can be restored. Converting to JPEG XL in its lossy mode is a different thing, and that does lose information.
Does converting a JPEG to AVIF lose quality?
Yes, in the usual lossy mode, and the original cannot be rebuilt from the AVIF. Keep the original if you may need it again.
Should I replace WebP with AVIF?
If you are serving new images, AVIF is usually worth it. On our photos it was far smaller than the JPEG originals. There is little need to convert a working WebP library in a hurry, though, since WebP's browser support is still the widest of the three.
What Heart Photos does
Heart Photos follows the same split. Every image you upload is served as AVIF in the sizes each screen needs, and a JPEG original is kept as JPEG XL, so the download hands you back the very JPEG you uploaded, byte for byte. You do not have to choose, and you do not lose your original.
To see it on your own images, open Heart Photos and upload one. How the library stores files is in the docs, if you want the details.