AVIF vs JPEG XL: The Battle to Replace JPEG

Introduction

The battle to replace the aging JPEG image standard is heating up, and two competitors are eying for the crown. AVIF and JPEG XL are the latest modern image formats. This article will compare how the two formats stack up against each other and see which is likely to dethrone JPEG as the de-facto king of image web delivery. Released in 2021 by the Joint Photographic Experts Group (the same organization that developed the original JPEG standard), JPEG XL aims to be a long-term replacement for legacy JPEG (Hence X'L' as in 'long-term'). As a royalty-free and open-source standard, JPEG XL's creators hope that the open nature of their format will invite web developers to adopt the standard. The JXL core bitstream was frozen in January 2021, the file format was finalized in April 2021. AVIF is another recent image format developed by the Alliance for Open Media (AOM) and released in 2019. The format is based on the AV1 video codec and is derived from video frames. Here are the technical specs and limitations of both of these image formats compared. The AV1 bitstream was frozen in 2018, the AVIF container spec was finalized in February 2019.

Quality and Limits

As an image format based on a video frame, the resolution limit makes perfect sense. Still, it can be limiting for non-web delivery applications like print. AVIF has a maximum resolution of 65536 x 65536 pixels. It is possible to push past this limit through tiling. Independently encoded tiles can then be placed on a grid to create a theoretical maximum resolution of 2,147,483,647 x 2,147,483,647 pixels or 2500 megapixels. However, when using this method, you come out with artifacts at the edges of each encoded tile, making AVIF overall unsuitable for ultra-high resolution images. On the other hand, JPEG XL has a maximum dimension of 1,152,921,502,459 megapixels or over 1 billion pixels on each side of an image. It's safe to say you'll not be limited by the max dimensions of a JPEG XL image. AVIF has a max color depth of 12 bits with a max number of channels of three. AVIF also supports a high dynamic range (HDR) and includes support for wide color gamuts. JPEG XL's max bit depth can push up to 24-bit integer or true color, or 32-bit floats. Although, in reality, for image delivery, 12-bit color precision is good enough, and you're unlikely to make use of the high bit depth support of JPEG XL.

Compression

Unlike the original legacy JPEG standard, JPEG XL supports lossless compression alongside the traditional lossy compression. AVIF also supports both lossy and lossless compression. An AVIF file performs excellently with low-fidelity lossy image compression. A compressed AVIF image retains high-appeal, meaning it avoids annoying compression artifacts like color banding. Low-fidelity AVIF images look fantastic while also keeping the file size down. JPEG XL doesn't perform well with its appeal, with low-fidelity images looking worse, with more noticeable artifacts in heavily compressed images. JPEG XL pulls ahead with lossless compression, providing more efficient files for both non-photo and photo lossless images.

JPEG XL is an excellent image codec for those who want to share lossless photos. It is also great for web delivery too. AVIF offers great-looking lossy photos as well, making them perfect for web delivery as they are much kinder on bandwidth. This statement however depends on the quality you are looking for. "Most images on the web are (the equivalent of) libjpeg q60-90. AVIF beats JXL below the equivalent of q40. Above q50, JXL is better."

Speed

AVIF had problems with its decoding and encoding speed. Recent releases of decoders achieved various performance improvements. Encoding is however still a problem and slow. It doesn't support progressive rendering - a process of decoding where portions of an image are incrementally decoded from an incomplete image file. This can dramatically increase the viewing speed by allowing for a lower-quality preview image to be displayed while the rest of the image is decoded. Unlike some legacy formats like PNG, AVIF is parallelizable, allowing the encoder to take advantage of multi-threaded processors instead of leaving all the encoding and decoding to a single core. JPEG XL is faster across the board with single-core encode and decode speeds and is more parallelizable than AVIF. Suppose you want a speedy codec, with fast decode times being crucial for web delivery. In that case, JPEG XL is a compelling option. Although, the lower file sizes achieved by AVIF for low-fidelity photos could give a speed advantage in download times, especially on slow broadband. Further than that, JPEG XL also offers progressive decoding for enhanced web experience.

Other Features

Both AVIF and JPEG XL support alpha transparency, representing a considerable upgrade over legacy JPEG. They both also support animation, although the characteristics of sequenced AVIF files make it more suitable for animated images than JPEG XL's implementation of animation. Sequenced AVIFs are videos in containers, offering higher quality animated images over JPEG XL. Both standards support overlays, allowing images to have multiple layers. This is great to preserve the fidelity and crispness of text and graphic layers on top of a photo background. This vastly improves the perceived appeal of low-fidelity, compressed photos for web delivery. Furthermore, both AVIF and JPEG XL support depth maps, allowing for effects to be applied to the foreground and background of images.

Support

AVIF and JPEG XL are both novel image formats not widely supported by browsers. While AVIF has been around for a long time and has 67% browser support, JPEGXL does not have any support whatsoever. Thus, if you are looking for a format intended for your users, opt for AVIF. Any major browser does not fully support JPEG XL. For Chrome, Firefox, and Edge Chromium, the image format can be enabled using a config flag. Although, this isn't going to help web delivery, as users are unlikely to want to dive into their browser's configs to view your webpage. There is no release mobile support for JPEG XL, with Samsung Internet, Safari for iOS, Chrome for Android, and the Android Browser all forgoing JPEG XL support. Time has not been kind to JPEG XL for browser support. Update 24.07.2021 Jon Sneyers clarified that JPEGXL has support both on mobile Chrome canary and Firefox nightly, so we can expect full support for release versions soon. Thanks, Jon.

The situation is brighter for AVIF. Google Chrome has fully supported AVIF images both still and animated since Chrome 85 back in Aug 2020. Opera 76 also fully supports AVIF. Users of Firefox can enable AVIF support from their browser config settings. However, Firefox has yet to include support for sequenced AVIF images. Mobile support for AVIF is good too. Android Browser, Chrome for Android, and Samsung Internet all fully support the standard. Safari and Microsoft Edge do not provide any support for AVIF yet.

Summary for Nerds

In practice, AVIF and JPEG XL have a lot in common. They are both eying to be a long-term replacement for the legacy JPEG standard, and it is up to market adoption to see who will win out on top. JPEG XL is the overall faster and more feature-rich image format. For lossless compression, it is unmatched even by the old lossless king PNG. Although AVIF does support lossless encoding, it is nowhere near as efficient. AVIF edges out JPEG XL is low-fidelity high-appeal photos , benefiting from a tremendous lossy compression method. This does give it an edge in web delivery. The two standards have a similar set of niche features. Both support overlays, depth maths, both support 4:4:4 and high-bit rate images. As mentioned before, although JPEG XL can reach up to 24-bit true color, for photo delivery, 12-bit is precise enough for most people.

There is one major issue remaining when it comes to implementing these formats.

1 <picture><source src="image.avif" type="image/avif">
2 <source src="image.jxl" type="image/jxl">
3 <source src="image.webp" type="image/webp">
4 <source src="image.jpg" type="image/jpeg">
5</picture> 

Due to the fact every browser supports image/jxl will also support image/avif, no browser will ever select the image.jxl source as written. The other way around, to benefit from JPEG XL, it must beat every other format, a problem compounded by the fact source elements require srcset rather than src. In contrast, WebP needs to surpass the original JPEG/PNG source to be useful. We recommend Josh's article on Blobfolio for a

or to experiment with the formats yourself, on sites like

Summary for Marketeers

For most people, images encoded in AVIF and images encoded in JPEG XL will be similar. Yes, JPEG XL is faster, but most users won't notice this difference. Both do incredibly well with maintaining appeal when compressed so that web pictures will look great, especially compared to the old legacy JPEG standard. The main difference between these two standards is their market adoption. If you are looking for a format intended for your users, opt for AVIF.

Conclusion

Full support from Chrome is a massive win for AVIF and suggested the industry is moving towards this spirited son of a video codec as the next mainstream standard. Although JPEG XL has a broader feature set, it is AVIF most people should look to as the following definite image format for the web.