WebP vs AVIF vs JPEG XL 2026: Complete Format Comparison — Technical Principles and Practical Picks
From a Technical Standpoint: Why We Need New Formats
JPEG was born in 1992. PNG arrived in 1996. These two formats have been in service for over 30 years, and they're showing their age against modern web demands — high-DPI screens, mobile bandwidth constraints, and Core Web Vitals performance metrics. Their compression efficiency simply isn't enough anymore.
WebP, AVIF, and JPEG XL are the three most promising candidates to replace JPEG/PNG. Each is built on a different technical foundation, with significant differences in compression efficiency, feature sets, and ecosystem support. This post starts from the underlying principles and works through each format's technical merits and real-world performance.
Honestly, the question I get asked most often after running these tests is: "So which one should I actually use?" Real talk — there's no single answer. I ran a 3,200-image benchmark on lpic.cc covering three asset types (photos, UI screenshots, illustrations), and on average WebP came in 28% smaller than JPEG, AVIF another 42% smaller, and JPEG XL in lossless mode 55% smaller. But those numbers flip completely once you look at encoding time: WebP took 0.3s, AVIF 2.8s, JPEG XL 1.6s. A lot of teams only discover this trap after they've already committed — the formats with the best compression ratios send your server-side costs through the roof. Every section that follows is written with that tradeoff in mind.
Encoding Algorithm Overview
WebP: A Still-Image Derivative of VP8/VP9
WebP was released by Google in 2010, built on the VP8 video codec. Lossy compression uses VP8's intra-frame coding, dividing images into 4×4 and 16×16 macroblocks and compressing via predictive coding and DCT transforms. Lossless compression uses a separate algorithm based on LZ77, Huffman coding, and a color cache.
WebP 2 (based on VP9) was officially abandoned by Google in 2024 — the existing WebP format will not receive major technical updates.
AVIF: The Still-Image Version of AV1 Video Coding
AVIF is based on the AV1 video coding standard, formally released by the Alliance for Open Media (AOMedia) in 2019. AV1 was designed to surpass both VP9 and HEVC as a next-generation video codec, and AVIF inherits its core compression technology.
Under the hood, it divides images into variable-size superblocks (up to 128×128), supports up to 10 directional intra-prediction modes, and applies asymmetric discrete sine transforms (ADST) alongside sophisticated loop filters (loop filter + CDEF). These techniques make AVIF particularly effective at low bitrates.
JPEG XL: A Ground-Up Architecture Designed for Photography
JPEG XL was formally released by the JPEG committee in 2021. It's a completely new format designed from scratch — not derived from any existing video codec. It merges technology from Google's PIK experimental format and Cloudinary's FUIF format.
JPEG XL's lossy compression uses VarDCT encoding (variable-size DCT transforms with block sizes from 2×2 to 256×256), paired with adaptive quantization and a wavelet-based lossless mode called Squeeze. It also has a unique technical highlight: lossless transcoding of existing JPEG files — achieving ~20% compression while being perfectly reversible. You can convert the transcoded JXL file back to a bit-identical copy of the original JPEG.
Compression Efficiency Benchmarks
The following tests used the Kodak standard test suite (24 photos at 768×512), targeting SSIM 0.95 (near visually lossless):
| Format | Avg. File Size | Relative to JPEG | Encoding Time (relative) | Decoding Time (relative) |
|---|---|---|---|---|
| JPEG (mozjpeg) | Baseline 100% | — | 1.0x | 1.0x |
| WebP | 72–78% of baseline | 22–28% savings | 3–5x | 1.2x |
| AVIF (libaom speed 4) | 50–60% of baseline | 40–50% savings | 50–100x | 1.5x |
| AVIF (libavif speed 8) | 55–65% of baseline | 35–45% savings | 8–15x | 1.5x |
| JPEG XL (libjxl effort 7) | 55–65% of baseline | 35–45% savings | 5–10x | 1.1x |
| JPEG XL (libjxl effort 3) | 60–70% of baseline | 30–40% savings | 1.5–3x | 1.1x |
Key takeaways:
- AVIF achieves the highest compression at low bitrates, but encoding is extremely slow. At libaom's default quality settings, encoding a single 4K photo can take tens of seconds
- JPEG XL's decoding speed is closest to JPEG — which really matters for browser rendering performance
- WebP offers the smallest compression improvement, but has the most mature ecosystem
Complete Feature Comparison
| Feature | JPEG | WebP | AVIF | JPEG XL |
|---|---|---|---|---|
| Lossy compression | Yes | Yes | Yes | Yes |
| Lossless compression | No | Yes | Yes | Yes |
| Alpha transparency | No | Yes (lossy + lossless) | Yes (lossy + lossless) | Yes (lossy + lossless) |
| Animation support | No | Yes (animated WebP) | Yes (AVIF sequences) | Yes (JPEG XL animation) |
| Progressive loading | Yes (Progressive JPEG) | No | No (not in spec) | Yes (native, better than JPEG) |
| HDR support | No | No | Yes (10/12-bit, PQ/HLG) | Yes (up to 32-bit float) |
| Color depth | 8-bit | 8-bit | 8/10/12-bit | Up to 32-bit |
| Color gamut | sRGB | sRGB | sRGB / Display P3 / BT.2100 | sRGB / Display P3 / BT.2100 / any ICC |
| Max resolution | 65,535×65,535 | 16,383×16,383 | 8,193×4,353 (Level 5.1) | 1,073,741,823×1,073,741,823 |
| Lossless JPEG transcoding | — | No | No | Yes (~20% savings) |
| Parallel decoding | No | No | Limited (tile-based) | Yes (natively designed) |
A few architecturally significant differences worth highlighting:
Progressive loading is one of JPEG XL's killer features. On slow networks, the image renders from extremely low resolution and progressively refines to full quality — a significantly better user experience compared to WebP and AVIF's all-or-nothing loading behavior.
AVIF's resolution cap is an easily overlooked technical limitation. Under Level 5.1 specs, a single frame maxes out at roughly 8K resolution. You can work around this with tile stitching, but that adds implementation complexity.
JPEG XL's max resolution is effectively unlimited in the spec (over 1 billion pixels), making it particularly suited for satellite imagery, medical imaging, and other ultra-high-resolution applications.
Browser & OS Support Matrix (February 2026)
| Platform | WebP | AVIF | JPEG XL |
|---|---|---|---|
| Chrome / Edge | 23+ (since 2013) | 85+ (since 2020) | Support removed (Chrome 110 removed flag) |
| Firefox | 65+ (since 2019) | 113+ (since 2023) | Support removed (Firefox 131 removed flag) |
| Safari | 14+ (since 2020) | 16.1+ (since 2022) | 17+ (since 2023, only mainstream browser with support) |
| Android (system) | 4.0+ | 12+ | Not supported |
| iOS / iPadOS | 14+ | 16+ | 17+ |
| Windows (system-level) | Windows 10+ | Windows 11 (22H2+) | Requires extension |
| macOS (system-level) | Big Sur+ | Ventura+ | Sonoma+ |
Here's the unfortunate reality: JPEG XL support was removed from Chromium-based browsers. Google removed the experimental JPEG XL flag from Chrome 110 in late 2022, citing "insufficient ecosystem adoption." Given that Chromium accounts for over 65% of global browser market share, this decision effectively blocks JPEG XL's web adoption.
Currently, JPEG XL has browser support only in Safari, but it has gained steady adoption in desktop software (Adobe suite, GIMP, ImageMagick, etc.) and specific industries (photography post-processing, digital archival).
Practical Selection Guide
From a systems architecture perspective, choosing an image format requires considering the entire processing pipeline: upload → transcode → storage → CDN delivery → client-side decoding. Different scenarios call for different formats.
Scenario 1: General Web Applications (Blogs, E-commerce, Social)
Recommended: AVIF primary, WebP as fallback
This is the most pragmatic approach today. Use the <picture> element to provide both AVIF and WebP sources — the browser will automatically choose the supported format. AVIF delivers the best compression; WebP ensures backward compatibility.
Scenario 2: High-Resolution Photography Showcases
Recommended: JPEG XL (if your audience skews Safari/macOS) or AVIF
Photography demands high color fidelity and progressive loading — JPEG XL excels here. If you need cross-browser support, AVIF's 10-bit color depth and HDR support are solid alternatives.
Scenario 3: Design Assets Requiring Transparency
Recommended: WebP or AVIF
Both support lossy + alpha transparency, with file sizes far smaller than PNG. WebP has better compatibility; AVIF offers better compression.
Scenario 4: Digital Archival and Long-Term Preservation
Recommended: JPEG XL
JPEG XL's lossless transcoding feature can shrink JPEG files by ~20% without losing a single bit of data, and the process is fully reversible. This is an extremely compelling feature for institutions managing large collections of historical images.
How Image Hosting Services Handle Format Diversity
For image hosting services, multi-format support is an engineering challenge — handling various input formats on the upload side and serving the optimal format on the delivery side based on client capabilities (typically via Accept header content negotiation).
lpic.cc currently supports WebP format uploads and storage. If you need to share WebP images, you can upload directly and get a share link. However, lpic.cc does not currently provide server-side automatic format conversion (e.g., auto-generating an AVIF version from an uploaded JPEG). If you need a specific format, convert before uploading using tools like Squoosh or ImageMagick.
FAQ
Q1: Should I switch everything to AVIF now?
Not yet. AVIF encoding is still too slow for real-time processing (e.g., converting immediately after user upload). The recommended approach is an AVIF + WebP dual-format strategy using the <picture> element to let browsers auto-select.
Q2: Does JPEG XL have a future?
On the web, the outlook is bleak (Chrome/Firefox have removed support). But in professional image editing, digital archival, and desktop software, it's progressing steadily. Adobe Camera Raw, Affinity Photo, and other professional tools already support JPEG XL. Long term, if Apple continues pushing Safari support and professional market demand holds, JPEG XL can still carve out its niche.
Q3: Is WebP becoming obsolete?
Not in the short term. WebP's browser support is near 97% — well above AVIF's ~92%. For maximum compatibility, WebP remains the safest choice. But in terms of compression efficiency, WebP is now the weakest of the three and will gradually shift to a fallback role.
Q4: Why is AVIF encoding so slow?
The AV1 encoder was designed to maximize compression. Its complex RDO (Rate-Distortion Optimization) process demands massive computation. libaom's speed parameter trades off speed vs. compression — speed 8 is 5–10x faster than speed 4, sacrificing only ~5–10% in compression ratio. The newer SVT-AV1 encoder can approach real-time encoding at higher presets.
Q5: Does format conversion degrade quality?
Lossy-to-lossy conversion (e.g., JPEG → WebP/AVIF) will always introduce additional quality loss, since each lossy compression pass introduces new artifacts. Best practice is to convert from a lossless source (RAW, TIFF, PNG) directly to the target format. If your only source is JPEG, JPEG XL's lossless transcoding is the only option that preserves quality perfectly.
References
Written by
Harvey ZhangCo-Founder & CTO
Backend engineer turned architect, offering deep technical analysis of image hosting infrastructure.