To most web developers, the benefits of the burgeoning JPEG XL image format are clear. The JPEG XL Image Coding System (ISO/IEC 18181), as it reads on the dotted line, is an image compression format that can:
- Reduce file sizes significantly.
- Encode faster.
- Enact progressive decoding.
- Convert images from JPEG to JPEG XL with no generation loss.
According to developers involved in Interop 2024, a project to promote web browser interoperability, JPEG XL was the most popular innovation to be discussed by developers, yet it was left off the project.
The disconnect has drawn speculation that the Google Chrome team is opposing the format. This is in contrast to Apple announcing its support at its Worldwide Developer Conference, Microsoft, as well as other teams at Google since the company had a hand in developing JPEG XL alongside Cloudinary’s Jon Sneyers.
So, why are developers calling for support of the JPEG XL format? Let’s review the benefits through a use cases.
As a compression format, JPEG XL encourages images today to be both high quality in appearance and high performing when it comes to downloads and delivery.
The original JPEG format was created in the 1980s, a hallmark design, but it’s not suitable for high dynamic range (HDR) images and it cannot represent alpha transparency.
What does this mean for brands? Here’s an example use case:
- Apparel brand protects its image investment. A fashion brand, hot off a high-priced photo shoot, doesn’t want its photos looking blurry or slowing down page load times. With the photos formatted to JPEG XL, the images leverage a compression format that automatically reduces the file sizes significantly and safely, to ensure a pristine look and smooth rendering.
Particularly compared to the AVIF file format, an open-source format that is ideal for storing photos or animated image sequences, the JPEG XL codec has a faster encoding speed. (The format can run at an encoding speed of 50 MP/s and a decoding speed of 132 MP/s.)
The format also supports progressive decoding, a clever way of partially compressing images to improve a browser experience. This function is unavailable with image formats such as AVIF and WebP.
Consider this use case:
- E-tailer keeps shoppers on the page. A developer working on an e-commerce grocer’s site can have hundreds of images to manage on one page, as shoppers sift through items to add to a cart. Shoppers want to see images quickly and get their shopping done. With JPEG XL, images can progressively render, putting site speed first. An image of bananas, for example, may look low quality at first, but render over time to ensure the page loads quickly. Progressive coding delivers a fast browser experience for that e-com grocer.
Another unique capability of the JPEG XL format is its ability to easily convert JPEG files to JPEG XL. No other competing image format can transition an original JPEG to its updated format this easily. Why does that matter? Let’s consider this scenario:
- Travel site transcodes images with no loss. A company that sells vacation packages online relies on beautiful, enticing photos. While the company wants to transition to JPEG XL, there’s fear the current images could get lost in translation. While many image file types may not deliver on this goal, developers can easily recompress an existing JPEG images to a JPEG XL file and witness image files reduced in size by 20%, without introducing any loss.
Developers working on branded sites and the consumers who visit them all benefit from the JPEG XL format.
Cloudinary has tested the image format against competing formats, reviewing more than 40,000 image files.
The results aren’t final, but the experiment found JPEG XL can obtain 10 to 15% better compression than AVIF, at encoder speed settings where JPEG XL encoding is about three times as fast as AVIF. While this is just one technical example, developers are seeking wider acceptance of the format. The benefits around speed, performance, image size, and more are evident.
To learn more on how you can work with JPEG XL, contact Cloudinary.
