AVIF vs JPEG-XL - Which Image Format is Better?
JPEG-XL and AVIF are two of the most advanced modern image formats available today. Both aim to replace older formats like JPEG and PNG by delivering smaller file sizes without sacrificing image quality. Choosing between the two, however, is not straightforward. They were built on different codecs, have different levels of browser support, and perform differently depending on the type of image and use case.
If you care about web performance, Core Web Vitals, and delivering the best possible experience to your visitors, picking the right format matters more than ever.
AVIF currently offers better browser support and is production-ready for most websites. JPEG XL offers superior compression and a richer feature set, but its browser support remains limited as of 2026. Our recommendation is to use AVIF for production websites today, with an eye on JPEG XL as ecosystem support continues to mature.
Let's dive deep into both formats and find out which one is the better choice for your website or next web project.
Introduction
JPEG XL
JPEG XL (also written as JXL) is a royalty-free image format developed by the Joint Photographic Experts Group, the same organization behind the original JPEG standard. It was designed from the ground up to be a long-term replacement for JPEG, PNG, and even GIF.
JPEG XL supports both lossless and lossy compression, HDR imagery, wide color gamuts, animation, alpha transparency, and even progressive rendering. One of its most remarkable features is its ability to losslessly transcode existing JPEG files into JXL format with a file size reduction of roughly 20%, and then decode them back to the exact original JPEG with zero quality loss.
The format is based on the Pik codec (developed by Google) and FLIF (Free Lossless Image Format), combining the strengths of both into a single specification finalized in 2022.
AVIF
AVIF (AV1 Image File Format) was introduced by the Alliance for Open Media (AOM) in 2019. It is derived from keyframes of the AV1 video codec, which is the same technology behind high-efficiency video streaming on platforms like YouTube and Netflix.
AVIF supports lossless and lossy compression, HDR, wide color gamut, transparency, and animation. Its compression is based on the highly efficient AV1 codec, which allows it to produce significantly smaller files than JPEG and WebP at comparable quality levels.
Because AVIF is built on an open, royalty-free video codec that major browser vendors already invested in for video support, it earned browser adoption faster than JPEG XL.
The Main Differences
Compression
Both formats offer exceptional compression compared to older standards. At equivalent quality settings, AVIF images are typically around 50% smaller than JPEG files. JPEG XL is competitive at similar levels, with lossy JPEG XL files coming in roughly 40 to 60% smaller than JPEG depending on the image content.
For lossless compression, JPEG XL has a clear edge. Lossless JPEG XL files are noticeably smaller than lossless AVIF files, especially for photographic images. AVIF's lossless mode is generally considered less competitive compared to its impressive lossy performance.
Winner: JPEG XL (lossless), AVIF (lossy, general web use)
Image Quality
Both formats are capable of producing exceptional image quality, but they handle different types of content differently.
AVIF excels at photographic images. Its AV1-based compression handles fine textures and natural gradients very well. It also supports HDR and a wide color gamut (up to 12-bit color depth), making it a strong choice for high-fidelity photography on the web.
JPEG XL also supports HDR, wide gamut, and up to 32-bit per channel, making it technically superior for professional imaging workflows. For non-photographic content like illustrations, logos, and flat graphics, JPEG XL tends to hold up better than AVIF, which can introduce subtle artifacts in smooth gradients at lower quality settings.
Winner: JPEG XL (technical ceiling and non-photographic content), AVIF (photographic content at typical web quality settings)
Encoding Speed
Encoding speed refers to how quickly an image can be compressed and saved in a given format. This matters most for build pipelines, CDN optimization workflows, and tools that generate image variants on the fly.
AVIF encoding can be notoriously slow. At higher quality settings, encoding a single AVIF image can take several seconds, which makes large-scale batch processing a real challenge. Multithreaded encoding support has improved this in recent years, but it is still slower than most other formats.
JPEG XL encoding is considerably faster than AVIF. While it is slower than JPEG and WebP encoding, it is generally much faster than AVIF at comparable quality settings. This makes it more practical for pipelines where encoding time is a real bottleneck.
Winner: JPEG XL
Decoding Speed
Decoding speed determines how quickly a browser or application can decompress and render an image once it is downloaded. Slow decoding can cause visual delays, affect Largest Contentful Paint (LCP), and hurt perceived performance.
AVIF decoding has improved substantially since its introduction, but it is still slower than WebP and JPEG on most devices. The computational complexity of AV1-based decoding is the main reason for this.
JPEG XL decoding is generally faster than AVIF and is designed to support progressive rendering, which allows the image to appear quickly at lower quality and sharpen as more data arrives. This is a meaningful advantage for web performance, particularly on slower connections or mobile devices.
Winner: JPEG XL
File Size at Similar Quality
To illustrate the real-world compression difference, here is how each format typically compares to JPEG at a visually similar quality level for a photographic image:
| Format | Approximate Size vs JPEG |
|---|---|
| JPEG | 100% (baseline) |
| WebP | ~65-75% |
| AVIF | ~45-55% |
| JPEG XL | ~40-55% |
These numbers vary based on image content, encoder settings, and tooling. The key takeaway is that both AVIF and JPEG XL deliver substantially smaller files than JPEG, and they are broadly comparable to each other in lossy compression performance.
Visual Quality at Similar File Size
At a given file size, AVIF and JPEG XL both outperform JPEG and WebP for photographic content. When comparing AVIF and JPEG XL directly at the same file size, the results are image-dependent.
For complex, high-detail photographs, JPEG XL often produces slightly sharper results. For smooth gradients and flat-color areas (such as in banners and UI illustrations), JPEG XL has an advantage due to better handling of those areas without introducing banding. AVIF can introduce subtle chroma artifacts in flat areas at very low bitrates.
For simple logos and flat vector-style graphics, JPEG XL is the better choice. For general photographic use at typical web quality, AVIF and JPEG XL are closely matched.
Winner: JPEG XL (non-photographic and flat graphics), Tie (photographic content)
Compression and Quality Comparison
A practical comparison requires looking at two scenarios. First: compressing images to the same file size and comparing quality. Second: compressing to similar quality and comparing file size. This is the same methodology used in our WebP vs AVIF comparison.
For quality measurement, tools like DSSIM can be used to approximate human visual similarity. A lower DSSIM score means the output is closer to the original. For encoding, tools like Squoosh or libvips can be used.
Photographic Images
Case 1: Image Quality at Same File Size
When compressing a photographic image to the same target file size, JPEG XL and AVIF typically produce very similar visual results. At around 150 to 200 KB for a high-resolution photograph, differences are subtle and require close inspection to detect.
Both formats comfortably outperform JPEG at the same file size. JPEG XL tends to preserve fine detail in textures such as hair, fur, and foliage slightly better. AVIF can produce a slightly smoother look overall, which some users may actually prefer for clean photography.
| Format | Relative DSSIM Score | File Size |
|---|---|---|
| AVIF | Slightly better in smooth areas | ~same |
| JPEG XL | Slightly better in fine detail | ~same |
Case 2: File Size at Similar Quality
When targeting a similar DSSIM score, JPEG XL and AVIF often arrive at very close file sizes for photographic content. In independent tests and encoder comparisons, JPEG XL is competitive with or slightly better than AVIF for lossy photographic compression, though the difference is small enough that real-world results vary by image.
For lossless compression of photographs, JPEG XL produces significantly smaller files than AVIF. Lossless AVIF is generally not recommended for web use due to its poor file size efficiency in this mode.
Non-Photographic Images
This is where the two formats diverge more clearly.
Case 1: Banners and Illustrated Content
For web banners and illustrated content with a mix of flat color and detail, JPEG XL holds an advantage. AVIF can introduce chroma artifacts and banding in flat color regions at low bitrates, which is visible in UI-style graphics.
At the same file size, JPEG XL will typically deliver a cleaner result for this type of content.
| Format | Suited For |
|---|---|
| AVIF | Photographic images, complex natural scenes |
| JPEG XL | Photos, illustrations, logos, banners, mixed content |
Case 2: Logos and Simple Icons
For lossless logos and simple illustrations, JPEG XL is significantly more efficient than AVIF. JPEG XL's lossless mode is competitive with PNG and often produces smaller files. AVIF's lossless mode produces larger files than PNG in many cases, making it a poor choice for this type of content.
For any image where you need pixel-perfect output such as a logo or icon, JPEG XL lossless is the better option over AVIF lossless.
Winner for logos and icons: JPEG XL
Browser Support
This is where the comparison takes a significant turn in AVIF's favor.
As of mid-2026, AVIF is supported by all major browsers including Chrome, Firefox, Edge, Opera, and Safari. Safari added full AVIF support with Safari 16 in 2022. On mobile, AVIF requires iOS 16 or later (iPhone 8 and above). According to caniuse.com, AVIF has approximately 93 to 94% global browser support.
JPEG XL has a more complicated history. Google Chrome added JPEG XL support behind a flag in Chrome 91 (2021), but then removed it entirely in Chrome 110 (early 2023), stating that there was not enough ecosystem interest at the time to justify the maintenance cost. This was a significant setback for JPEG XL adoption.
As of 2026, the browsers that support JPEG XL are:
-
Safari: Added JPEG XL support in Safari 17 (September 2023), available on macOS Sonoma and iOS 17. Safari remains the only major browser with JPEG XL enabled by default.
-
Firefox: Firefox now includes JPEG XL support using a new Rust-based decoder, but support is still behind an experimental flag as of Firefox 149.
-
Chrome / Edge: Chrome restored JPEG XL support in Chrome 145 after reversing its earlier decision. Chromium-based browsers now include JPEG XL support behind the enable-jxl-image-format flag, but it is still not enabled by default.
Interop 2026 and renewed industry interest significantly improved JPEG XL's momentum. However, because Chrome and Firefox still require experimental flags, JPEG XL is not yet practical as a standalone primary image format for most production websites without fallbacks.
| Browser | AVIF Support | JPEG XL Support |
|---|---|---|
| Chrome | Yes | No (can be enabled through a flag) |
| Edge | Yes | No (can be enabled through a flag) |
| Firefox | Yes | No (can be enabled through a flag) |
| Safari | Yes (iOS 16+) | Yes (iOS 17+) |
Whether you use AVIF or JPEG XL, a fallback is recommended. You can implement this cleanly using the <picture> tag:
<picture>
<source srcset="example.jxl" type="image/jxl">
<source srcset="example.avif" type="image/avif">
<img src="example.jpg" alt="Example Image" width="1920" height="1080">
</picture>
In this example, browsers that support JPEG XL will load the JXL file. Browsers that do not support JXL but support AVIF will load the AVIF version. All other browsers will fall back to JPEG. This is the safest approach if you want to start experimenting with JPEG XL today without breaking the experience for Chrome users.
For most sites, though, an AVIF-and-JPEG fallback is sufficient and simpler to maintain.
Real-World Performance and Web Impact
The format you choose has a direct impact on page load speed, bandwidth usage, and Core Web Vitals scores, particularly Largest Contentful Paint (LCP).
File Size and LCP
Smaller image files mean faster downloads, which reduces the time before the largest contentful element appears on screen. Both AVIF and JPEG XL can meaningfully reduce your image payload compared to JPEG and PNG. On a typical image-heavy page, switching from JPEG to AVIF can reduce total image weight by 30 to 50%, with direct benefits to LCP.
JPEG XL could offer similar or slightly better reductions, but without Chrome support, most of your visitors (typically 60 to 70% globally) would receive the fallback format instead of the optimized JXL file. In practice, you would be doing the encoding work without getting the performance benefit for the majority of your audience.
Progressive Rendering
JPEG XL natively supports progressive decoding, meaning the image can appear quickly at reduced quality and sharpen over time as more data arrives. This improves perceived loading speed even before the full image is downloaded.
AVIF does not support true progressive rendering in the same way. Images using AVIF appear only after enough data has been received, which can result in a slightly more abrupt loading experience on slow connections.
For users on slow mobile connections, progressive rendering can have a noticeable effect on how fast a page feels. This is a real advantage of JPEG XL that is worth noting for the future.
CDN and Tooling Ecosystem
AVIF is widely supported across major CDN providers and image optimization services. Cloudflare, Cloudinary, Imgix, and Bunny.net all support automatic AVIF conversion and delivery. This makes it easy to integrate AVIF into existing workflows without changing how images are managed at the source.
JPEG XL support in CDN and image optimization tooling is still maturing. Cloudinary and a few other platforms have added JPEG XL support, but it is not yet universal. Server-side libraries like libvips, ImageMagick, and FFmpeg all support JPEG XL encoding and decoding, which is good for custom pipelines.
How to Use JPEG XL and AVIF in WordPress
Using AVIF in WordPress
WordPress added native AVIF support in version 6.5 (April 2024), which means you can upload AVIF images directly to your media library without a plugin. For automatic conversion of your existing image library, several plugins handle this well.
Recommended plugins for AVIF:
- Imagify: Developed by the same team behind WP Rocket, Imagify supports automatic AVIF conversion and serves the optimized images to supported browsers with a built-in fallback. It is a reliable choice with a generous free tier.
- ShortPixel: Supports AVIF conversion with flexible compression levels. Good for sites with a large image library.
- EWWW Image Optimizer: An open-source-friendly option that also supports local encoding, which avoids sending your images to third-party servers.
These plugins handle the
<picture>tag fallback automatically, so you do not need to change your theme or templates manually.
Using JPEG XL in WordPress
JPEG XL support in WordPress is limited. WordPress does not natively support JXL uploads as of mid-2026. There is an open GitHub discussion about adding support, but it has not been merged into core.
Some image optimization plugins such as Imagify and Cloudinary's WordPress integration are beginning to offer experimental JPEG XL support, but it is not yet mainstream. If you want to experiment with JPEG XL on WordPress today, a custom setup using a CDN like Cloudinary with a WordPress plugin connector is your best option.
For most WordPress users, AVIF is the practical choice right now. JPEG XL on WordPress requires more manual effort and is better suited for custom-built or headless setups where you have full control over the image processing pipeline.
Comparison Table
Here is a full side-by-side comparison of JPEG XL and AVIF:
| JPEG XL | AVIF | |
|---|---|---|
| Compression Level (Lossy) | ⭐⭐⭐ | ⭐⭐⭐ |
| Compression Level (Lossless) | ⭐⭐⭐ | ⭐⭐ |
| Photographic Quality | ⭐⭐⭐ | ⭐⭐⭐ |
| Non-Photographic Quality | ⭐⭐⭐ | ⭐⭐ |
| Encoding Speed | ⭐⭐⭐ | ⭐⭐ |
| Decoding Speed | ⭐⭐⭐ | ⭐⭐ |
| Progressive Rendering | ✅ | ❌ |
| Animation Support | ✅ | ✅ |
| Transparency (Alpha) | ✅ | ✅ |
| HDR Support | ✅ | ✅ |
| Wide Color Gamut | ✅ | ✅ |
| JPEG Lossless Transcode | ✅ | ❌ |
| Browser Support (2026) | ⭐ | ⭐⭐⭐ |
| Chrome Support | ❌ | ✅ |
| WordPress Support | ⭐ | ⭐⭐⭐ |
| CDN and Tooling Ecosystem | ⭐⭐ | ⭐⭐⭐ |
Which is a Better Choice?
The honest answer depends on what you are optimizing for.
Use AVIF if:
- You are building or maintaining a production website and need broad browser support right now.
- You use WordPress or a CMS with plugin-based image optimization.
- Your images are primarily photographic or mixed-content web assets.
- You want the simplest possible workflow with the most CDN and tooling support.
- You want a meaningful improvement over JPEG and WebP without worrying about fallback complexity. For most websites and developers reading this in 2026, AVIF is the right choice. It delivers significant file size savings, has excellent browser coverage, and the ecosystem has matured to the point where deployment is straightforward.
Use JPEG XL if:
- You are building a custom or headless setup where you have full control over image delivery and can implement
<picture>tag fallbacks properly. - You have a significant number of non-photographic images, illustrations, or logos where JPEG XL's better lossless and flat-color compression is worth the added complexity.
- You are working on a professional imaging or archival workflow where JPEG XL's lossless JPEG transcoding is genuinely valuable.
- You are future-proofing your image pipeline and willing to wait for broader adoption.
- Your audience skews toward Safari users, where JPEG XL support already exists. The case for JPEG XL is compelling on paper. The format is technically superior in many dimensions. But without Chrome support, it cannot be your primary format for public-facing web content without a fallback that effectively sends AVIF or JPEG to the majority of your users anyway.
Conclusion
JPEG XL is a more advanced format with a higher technical ceiling. It offers better lossless compression, faster encoding and decoding, progressive rendering, and superior handling of non-photographic content. On specs alone, it wins the comparison.
AVIF, however, wins on practicality. It is supported in all major browsers, has a mature tooling ecosystem, integrates smoothly into WordPress and CDN workflows, and already delivers major file size savings over JPEG and WebP.
The ideal long-term strategy is to use AVIF today and keep an eye on JPEG XL as Chrome support evolves. If Chrome reintroduces JPEG XL support, the calculation changes significantly. Until then, AVIF is the format you should be serving to your users, and using the <picture> tag with a JPEG fallback is the safest, most compatible approach.
<picture>
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Your image description" width="800" height="600">
</picture>
Start with AVIF, deploy with confidence, and revisit JPEG XL when the ecosystem catches up. It is one of the most promising formats in the pipeline, but the web moves on real-world support, and right now, that belongs to AVIF.