WebP vs AVIF vs JPEG XL: which format to use in 2026
All three promise lighter images than JPEG and PNG, but they aren't interchangeable. This guide sums up their real differences and how to combine them.
Quick summary
- AVIF: the best compression you can serve to almost every browser today. Use it as the main format for photos.
- WebP: universal support and fast encoding. The best AVIF fallback and a solid choice on its own.
- JPEG XL: technically the most complete, but with limited browser support. Useful for archiving and as an extra source in
<picture>.
If you only have time for one decision: generate AVIF + WebP (or AVIF + JPEG if you need older software support) and serve both with <picture>.
How they compress
All three formats rely on similar ideas —split the image into blocks, transform them into the frequency domain and discard what the eye notices least— but with tools from different generations.
WebP (2010) derives from the VP8 video codec. It uses fixed-size blocks, intra-frame prediction and a deblocking filter that smooths block edges. Its lossy mode always halves color resolution (4:2:0).
AVIF (2019) uses AV1, a much more modern video codec. It supports variable block sizes (from 4×4 up to 128×128), dozens of prediction modes, restoration filters and 10- or 12-bit depth. That's why it shines at medium and low qualities: where JPEG shows blocks and WebP smears, AVIF keeps clean edges.
JPEG XL (2021) was designed specifically for images. It combines a variable transform (VarDCT) with a lossless modular mode, true progressive decoding and the ability to losslessly recompress an existing JPEG, saving around 20%.
File size
Exact numbers depend on each image, but for photos at equal perceived quality the usual order is:
| Format | Size relative to JPEG (MozJPEG) |
|---|---|
| JPEG | 100% |
| WebP | 70–80% |
| JPEG XL | 55–70% |
| AVIF | 50–65% |
AVIF's advantage grows as compression gets more aggressive. At very high qualities (near-lossless), JPEG XL usually matches or beats it.
For flat graphics —screenshots, diagrams, icons— the winner changes: lossless WebP and lossless JPEG XL usually beat AVIF, and both improve on PNG.
Visual quality and artifacts
Each format fails differently when pushed too far:
- JPEG: 8×8 blocks and "mosquito noise" around edges.
- WebP: loss of fine texture, a "plastic" look and color bleeding on saturated edges due to 4:2:0.
- AVIF: smoothing of very fine textures (grass, fabric) at low qualities, although edges stay sharp.
- JPEG XL: more gradual, noise-like degradation that's less noticeable.
For screenshots or images with text, chroma subsampling matters more than the format. AVIF and JPEG XL support 4:4:4; lossy WebP doesn't, which is why lossless WebP is the better choice for text.
Encoding and decoding speed
WebP is by far the fastest to encode. AVIF is the slowest: a large photo can take several seconds at high effort. JPEG XL sits in between and decodes very quickly.
For a website, encoding time only matters when publishing. Decoding does affect users, but in all three formats it's fast enough on current devices not to be an issue.
Browser support in 2026
| Format | Chrome / Edge | Firefox | Safari | Approximate coverage |
|---|---|---|---|---|
| WebP | Yes | Yes | Yes (14+) | ~97% |
| AVIF | Yes (85+) | Yes (93+) | Yes (16.4+) | ~95% |
| JPEG XL | In progress | In progress | Yes (17+) | Limited |
Outside the browser, WebP and AVIF open on Windows 11, recent macOS, Android and iOS. JPEG XL has good support in professional editors (Photoshop, GIMP, Affinity) but not in every viewer.
Which format to use for each case
| Case | Recommendation |
|---|---|
| Hero image | AVIF 55–65 + WebP or JPEG fallback |
| Product photos | AVIF 60–65 + WebP |
| Thumbnails and listings | WebP 75–80 (AVIF's extra savings are small on small images) |
| Screenshots and UI | Lossless WebP, or AVIF 4:4:4 at high quality |
| Logos | SVG; if raster, lossless WebP |
| Photo archive | Lossless JPEG XL or JPEG recompression |
| Email, documents, social | JPEG optimized with MozJPEG |
Serving them together
The <picture> element lets you offer several formats and have the browser pick the first one it supports:
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" width="1600" height="900" alt="Description">
</picture>
Order matters: from most efficient to most compatible. If you include JPEG XL, put it first; Safari will use it and other browsers will ignore it. The picture element guide covers the details.
Frequently asked questions
Is AVIF always better than WebP?
For photos at medium qualities, almost always. For small images, flat graphics or when you need very fast encoding, WebP can be the better choice.
Is JPEG XL worth using on a website?
Only as an extra source inside <picture>. On its own, most users wouldn't be able to see it.
Do I still need to generate JPEG?
If your audience uses modern browsers, AVIF + WebP is enough. JPEG is still useful for Open Graph (some networks don't accept modern formats), emails and downloads.
Which qualities are equivalent across formats?
As a guideline: AVIF 60 ≈ JPEG XL 75–80 ≈ WebP 80 ≈ JPEG 85. Always check with your own images in the comparer.