What is JPEG-XL? | How is it superior to AVIF and WebP?

In an era dominated by AI (Artificial Intelligence), digital media, and visual content, the importance of efficient image compression cannot be overstated.

Whether you're a developer aiming to improve website performance, a photographer seeking to preserve image quality, or a graphic designer looking for versatile image formats, the choice of the right compression method matters.

What is JPEG-XL?

JPEG XL  (with file extension .jxl) is a royalty-free image codec designed for compressing raster graphic images with the aim of supporting both lossy and lossless compression methods. JPEG-XL codec was developed by JPEG (Joint Photographic Experts Group) Committee and Cloudinary Inc. to outperform other popular web image formats like PNG, JPEG 2000, GIF, HEIF, AVIF, and WebP by delivering higher quality images and improved compression ratios.

One of the unique attributes of JPEG XL Format is that it has the ability to support backward compatibility with the previous versions of JPEG files. This compatibility is achieved through the "jbrd" box (JPEG Bitstream Reconstruction Data) which contains essential information required to reconstruct the original file identically.

JPEG XL's bitstream reconstruction data utilizes the image data along with any accompanying metadata, such as Exif, XMP, or JUMBF, to faithfully recreate the original JPEG file. This built-in compatibility offers a seamless transition from JPEG formats to JPEG XL without the need to store redundant files, making the migration process efficient and straightforward.

A Brief History of the JPEG Format

To understand the breakthroughs made by JPEG-XL file format, let's first take a step back and explore the history of its predecessor, the JPEG (Joint Photographic Experts Group) format.

Introduced in 1992, JPEG quickly became the standard for compressing and storing digital images. Its hallmark feature was the ability to reduce file sizes significantly while maintaining acceptable image quality. JPEG achieved this by employing a lossy compression method, where some image data is discarded to achieve higher compression ratios.

However, as technology advanced and the demand for higher image quality and smaller file sizes increased, certain limitations of the JPEG format became evident like artifacts in highly compressed images, lack of support for transparency, and inefficient compression for certain types of images. This led to future research by the JPEG Committee Members to come up with the format of JPEG-XL

JPEG-XL vs. JPEG 2000 vs. AVIF: Advantages of JPEG-XL

JPEG-XL emerged as a response to the shortcomings of traditional JPEG. Here are some of the notable features and advantages of JPEG-XL:

1) Royalty-Free:

The makers of JPEG XL agreed to license the reference implementation under the Apache 2.0 license. That means that, besides being Free and Open Source Software (FOSS), JPEG XL also comes with a royalty-free patent grant.

This is a leap forward as compared to the HEIC format which is based on container HEIF on which Nokia claims the patents and the High Efficiency Video Coding (HEVC) codec, which is under a lot of scrutiny around patents.

In the case of the AV1 Image File Format (AVIF), the patent landscape appears more favorable due to its foundation on AV1, which was developed with a strong emphasis on being royalty-free by the Alliance for Open Media. However, it's worth noting that the complete extent of AV1's royalty-free status remains somewhat unclear. While AV1F is licensed royalty-free, exactly how the technology is licensed by the Alliance for Open Media (AOM), which includes many of the world's largest technology firms, is under investigation by European Union antitrust regulators. Additionally, since AVIF utilizes the HEIF container, there could be potential considerations regarding Nokia patents as well.

As a word of caution, Microsoft received a patent on a core compression algorithm used in JPEG XL along with numerous other compression schemes. Although experts in digital image space disagreed if this is a potential threat to the royalty-free nature of JPEG-XL

2) Legacy Friendliness:

Transcoding your existing JPEG files into JPEG XL can be done efficiently and without introducing any additional loss in quality. This is a notable distinction from previous endeavors to create "next-generation" image formats like JPEG 2000, JPEG XR, WebP, and more recently, HEIC and AVIF. Converting to any of these other formats necessitates a process where the JPEG image is first decoded into pixels and then re-encoded into the desired format. Unfortunately, this is an irreversible procedure that inevitably results in some loss of image quality, unlike the seamless transition offered by JPEG XL.

3) Support for both Lossless and Lossy Compression:

JPEG-XL has the ability to handle both lossless and lossy compression. Lossless compression ensures that no image data is lost during compression. On the other hand, lossy compression allows you to balance image quality and file size according to your needs.

Image formats that rely on video codecs tend to shine when dealing with extremely low bitrates. They can create visually appealing images with just a minimal amount of data. Initially, these images may appear quite pleasing, but upon closer examination, they often exhibit an odd "plastic" quality. For instance, skin tones might appear unnaturally smooth, akin to a heavy application of foundation cream, or the image may seem "distilled" in a manner reminiscent of an oil painting.

This behavior is acceptable in the realm of video codecs where the priority is to maintain low file sizes or bandwidth requirements. Given that video frames are typically displayed for brief durations, often less than 40 milliseconds, such artifacts tend to go unnoticed by the audience. However, in the case of still images, a higher level of quality is often sought after and preferred.

4) Transparency and Animation Capabilities:

Unlike traditional JPEG, JPEG-XL has native support for transparency and animations, making it suitable for images with varying levels of opacity and a versatile choice for web graphics and multimedia presentations. This also makes it stand out as compared to traditional JPEG formats while compared with the PNG

5) Responsive by Design

For a superior image viewing experience on the internet, it is desirable to have two attributes:

 1) Progressively Decoding Images: It allows for the display of a low-quality image as a placeholder when only a small portion of the image data has been received, gradually refining and adding more detail as the remaining data arrives.

 2) Responsive Image Serving: To avoid having to store and serve multiple variants of the same image according to the viewer’s viewport width. Ideally, the system should intelligently adapt and deliver the most appropriate version of the image to suit the viewer's device and screen size.

JPEG XL supports both attributes, unlike the other image formats which derive their decoding from the video codecs where progressive loading of a single video frame doesn't make sense. For example: formats like WebP (utilizing VP8), HEIC (built upon HEVC), and AVIF (grounded in AV1) solely provide sequential decoding. In practical terms, this means that the image loads progressively from top to bottom, and you must patiently wait until a substantial portion of the image data has been transferred before any meaningful image content becomes visible.

How JPEG-XL Works?

Based on Google’s PIK codec and Cloudinary’s Free Universal Image Format (FUIF) codec, JPEG XL leverages the best elements of both:

• JPEG XL has harnessed several valuable traits from PIK, like robust psychovisual modeling, the preservation of intricate details and textures, and swift decoding. This includes enabling efficient parallelization and streamlined cropped decoding for enormous images, even those in the gigapixel range.
• Furthermore, from FUIF, JPEG XL has incorporated a fundamental principle of being inherently responsive in design, catering to a universal audience and diverse devices.
• By drawing from both PIK and FUIF, JPEG XL has made a significant commitment to ensure legacy compatibility. It ensures a seamless transition from existing file formats, most notably JPEG but also encompasses PNG, GIF, and TIFF. This facilitates a smooth migration path to JPEG XL, preserving the usability of files from previous formats.

Understanding the Core Principles

1. Predictive Coding

JPEG-XL uses predictive coding to its success, a technique that predicts the value of a pixel based on its neighboring pixels. This reduces redundancy in image data, allowing for more efficient compression.

2. Transformations

JPEG-XL utilizes mathematical transformations to convert image data into a more compressible form. In these transformations, the essential image features are preserved while less critical information is discarded. The traditional JPEG uses the Discrete Cosine Transform (DCT), and JPEG-XL employs the versatile and efficient ANS (Asymmetric Numeral Systems) transformation.

What are the pros and cons of JPEG-XL?

Pros of JPEG-XL:

High Compression Efficiency: JPEG-XL offers excellent compression efficiency, allowing for significantly smaller file sizes while maintaining high image quality. This is particularly beneficial for web content where fast loading times are essential.

Excellent Image Quality: Despite its efficient compression, JPEG-XL excels at preserving image quality. It minimizes artifacts and distortion, making it suitable for lossy and lossless compression.

Support for Transparency: JPEG-XL supports transparency, allowing for images with varying levels of opacity. This is crucial for creating graphics, icons, and images with non-rectangular shapes that blend seamlessly with different backgrounds.

Animation Capabilities: JPEG-XL has the potential to replace the GIF format for animations. It supports animated images, offering a better balance between quality and file size than GIF.

Cons of JPEG-XL:

Limited Browser Support: Although support for JPEG-XL is growing, it is not as universally recognized as older formats like JPEG and PNG. Users with older browsers may experience compatibility issues.

Adoption Challenges: As a relatively new format, JPEG-XL faces adoption challenges across various industries and applications.

Encoding and Decoding Complexity: The advanced compression techniques used in JPEG-XL can be more computationally intensive during encoding and decoding, potentially requiring more processing power.

Transition Period: During the transition from older formats to JPEG-XL, users and developers may need to handle multiple image formats to ensure compatibility with a broader audience.

Comparisons between JPEG-XL and other Image Formats

Here's a detailed comparison of JPEG-XL with other popular image formats such as JPEG, AVIF, PNG, and WebP:

Computational Complexity for JPEG-XL vs. Other Formats

Encoding or decoding modern video codecs like AV1 and HEVC in software can be computationally demanding, especially when it comes to optimized encoding. Efficiently implementing these codecs often necessitates dedicated hardware. However, in the case of JPEG XL, you can effortlessly perform software-based encoding and decoding on contemporary hardware. The speed benchmarks presented in the table below are derived from the utilization of four CPU cores.

Decoding a JPEG and PNG takes very less time which makes them favourites for a very long time.

With emerging newer formats, if you are prioritizing image compression for faster delivery, it's essential to consider decoding speed as a primary factor. Decoding speed often takes precedence over encoding speed, primarily because in numerous scenarios, encoding is a one-time operation that can be performed offline on a high-performance machine. Conversely, decoding occurs frequently, across a variety of devices, including those with limited processing capabilities.

Since JPG and PNG are old codecs they are inherently sequential, that is, multiple cores yield no benefits for single-image decoding. In that respect, JPEG 2000, HEIC, AVIF, and JPEG XL are more future-proof. In contrast, WebP despite being a modern format still makes no use of multi-core processor reality.

Detailed Comparison:

Compression Type:

• JPEG-XL: Supports both lossless and lossy compression, making it versatile for various applications.
• JPEG: Primarily uses lossy compression, sacrificing some quality for smaller file sizes.
• AVIF: Supports both lossless and lossy compression, providing excellent image quality.
• PNG: Uses lossless compression, preserving high image quality but resulting in larger file sizes.
• WebP: Supports both lossless and lossy compression, making it flexible for different needs. Specifically designed to replace JPEG and PNG, WebP indeed beat both of them in compression results, but only by a narrow margin. For high-fidelity, lossy compression, WebP sometimes performs worse than JPEG

Image Quality:

• JPEG-XL: Offers excellent image quality, even at high compression ratios.
• JPEG: Provides good image quality but may exhibit artifacts at high compression.
• AVIF: Delivers excellent image quality with minimal loss, even at high compression.
• PNG: Maintains excellent image quality due to lossless compression.
• WebP: Offers very good image quality, especially in lossless mode.

For Example: Compare this High Fidelity Image across various Image Formats:

By default, the JPEG XL reference encoder (cjpegxl) generates a highly compressed image that is virtually identical to the original, often indistinguishable or even identical. In contrast, many other image formats provide an encoder that allows you to choose a quality setting, but this quality is not always perceptually defined. As a result, one image may appear satisfactory at a quality setting of 60 in JPEG, while another might still exhibit bothersome artifacts even at a quality setting of 90.

Transparency Support:

• JPEG-XL, AVIF, PNG, and WebP all support transparency with alpha channels.
• JPEG does not support transparency, resulting in a solid background when needed.

Animation Support:

• JPEG-XL and AVIF support animations, making them suitable for dynamic content.
• JPEG, PNG, and WebP do not inherently support animations.

Compression Efficiency:

• JPEG-XL, AVIF, and WebP excel in compression efficiency, offering smaller file sizes without compromising quality.
• JPEG provides moderate compression efficiency.
• PNG uses lossless compression, resulting in larger file sizes.

File Size Relative to Quality:

• JPEG-XL, AVIF, and WebP achieve smaller file sizes for high-quality images.
• JPEG offers moderate compression but larger file sizes compared to newer formats.
• PNG retains high quality but leads to larger file sizes, primarily for lossless images.

Browser Support (as of 2021):

• JPEG-XL, AVIF, and WebP are experiencing growing browser support.
• JPEG has universal support but may benefit from newer formats for improved efficiency.

Use Cases:

• JPEG-XL is suitable for high-quality web images and photography, offering versatility.
• JPEG is commonly used for web images and photography but may exhibit compression artifacts.
• AVIF is ideal for high-quality web images and photography.
• PNG is favored for icons, text, logos, and any scenario requiring lossless quality.
• WebP is excellent for high-quality web images and photography while maintaining good compression efficiency.

What are the Tools and Software that Support JPEG-XL Format?

Before diving into implementation, you'll need the right tools and software to work with JPEG-XL:

a. Image Editors:

• GIMP: The GNU Image Manipulation Program is a powerful open-source image editor that supports JPEG-XL.
• Adobe Photoshop: Recent versions of Photoshop have added support for the JPEG-XL format.

b. Conversion Tools:

• Converters: There are various online and offline converters available to convert images to JPEG-XL format. Some popular ones include "Front.Space", "Squoosh" and "Converter365".
• Content Management Systems (CMS): CMS platforms like WordPress may offer plugins or extensions to handle JPEG-XL images.

c. Web Development Tools:

• JavaScript Libraries: Libraries like "jxl-wasm" provide JavaScript bindings for JPEG-XL, allowing you to work with JPEG-XL images in web projects.
• CDNs: Some Content Delivery Networks (CDNs) offer support for serving JPEG-XL images, improving web performance.

How to Convert Existing Images to JPEG-XL?

Converting existing images to JPEG-XL can be a straightforward process, depending on the tools you choose:

a. Using Front.Space's  on-the-fly transformations for FREE:

Converting .webp to .jxl (JPEG-XL) on the fly using Front Space is a convenient and straightforward process. Front.Space is a cloud-based media management platform that offers powerful features for image and video manipulation, including on-the-fly format conversion. Here's a step-by-step guide on how to do it:

Step 1: Sign Up or Log In to Front.Space

If you don't already have a Front.Space account, you'll need to sign up for one. You can sign up for a FREE account that provides a certain amount of storage and bandwidth. Once you have an account, log in to the Front.Space Console.

Step 2: Upload Your .WebP File

In the Front.Space dashboard, navigate to the "Media Library" section. Click the "Upload" button to upload your .webp file. Front.Space will automatically store the file in your media library.

Step 3: Create a Transformation URL

To convert the .WebP file to .jxl on the fly, you'll need to create a transformation URL. This URL will include parameters that specify the conversion and any additional transformations you want to apply. Here's an example of a Front.Space URL for .webp to .jxl conversion:

https://cdn.front.space/your-project-name/video/upload/f_jxl/your-origin/your-image.webp

• Replace "your-project-name" with your actual Front.Space cloud name.
• Replace "your-image.webp" with the name of your .webp file.
• Replace "your-origin" with the origin name of your project

In this example, we're using the "f_jxl" parameter to indicate that Front.Space should automatically convert the .webp file to .jxl format on the fly.

Step 4: Access the Converted .jxl File

Once you have the transformation URL, you can use it in your website or application to access the converted .jxl file. When a user requests this URL, Front.Space will perform the conversion in real-time and deliver the .jxl (JPEG-XL) file.

Additional Options: Custom Transformations

Front.Space provides a wide range of transformation options that you can apply on the fly. For example, you can resize, crop, add watermarks, adjust quality, and more. To include custom transformations in your URL, simply add them as parameters.

Here's an example of a Front Space URL that converts a .webp file to .jxl (JPEG XL), resizes it to a width of 640 pixels, and adds a watermark:

https://cdn.front.space/your-project-name/video/upload/f_jxl/w_640/l_watermark,y_10,x_10/your-origin/your-image.webp

In this example, we've added the "w_640" parameter to specify the width, and the "l_watermark" parameter to add a watermark to the video.

b. Using Image Editors:

• Open your image in a compatible image editor like GIMP or Photoshop.
• Save or export the image in the JPEG-XL format. Ensure that you select the desired compression settings (lossless or lossy) during export.

c. Online Converters:

• Upload your image to an online converter that supports JPEG-XL.
• Customize compression settings if available.
• Download the converted JPEG-XL image.

d. CMS Integration:

• If you're using a CMS like WordPress, explore plugins that can automatically generate and serve JPEG-XL versions of your images.
• Configure the plugin settings to control which images get converted.

How to Integrate JPEG-XL into Web Projects?

Web developers can harness the power of JPEG-XL to enhance web performance and user experience:

a. HTML Implementation:

• Use the <picture> element to provide multiple image sources, including JPEG-XL, to cater to various user devices and screen resolutions.
• Use the type attribute to specify the image format, such as "image/jxl".

<picture>
   <source srcset="image.jxl" type="image/jxl">
   <img src="fallback.jpg" alt="Alternate text">
</picture>

b. CSS Integration:

• Implement responsive design with CSS to ensure that your JPEG-XL images adapt to different screen sizes seamlessly.

c. JavaScript Enhancements:

• Use JavaScript to detect browser support for JPEG-XL and serve alternative formats for unsupported browsers.
• Utilize JavaScript libraries that provide JPEG-XL support for image manipulation and optimization.

d. Using Image and Video API of Front.Space:

• The best way to deal with the fallbacks is to use Front. Space's Image Optimisation Solution. It automatically determines the best-suited format for the respective device and browsers to ensure that your image is compatible with the end user's viewability.

Considerations for Browser Compatibility of JPEG-XL

While JPEG-XL offers impressive compression efficiency and image quality, it's essential to consider browser compatibility:

a. Which Browsers Support JPEG-XL?

• Browser Support has lit an unexpected controversy around this revolutionary royalty-free codec. On one end of the spectrum is Google which wants to amplify usage of WebP and on the other side is Apple and others who are in support of other formats.

• For instance, Apple Safari supports JPEG XL whereas Google last year controversially abandoned – JPEG-XL in its Chromium Project

• Given the recency of the JPEG-XL format, it is important to periodically check for updates on browser support for JPEG-XL. Most major browsers are gradually adding support, but older versions may not fully support it.

b. What are the Fallback Mechanisms if browsers don't support JPEG-XL?

• Implement fallback mechanisms to serve alternative image formats, such as JPEG or WebP, to users with unsupported browsers.
• Front.Space API can ensure that it delivers JPEG-XL in browsers that support it and falls back automatically to other formats on non-compatible browsers.

FAQs About JPEG-XL

Q1: What is JPEG-XL, and how does it differ from traditional JPEG?

JPEG-XL is a modern image compression format designed to offer better compression efficiency and image quality compared to traditional JPEG. It uses advanced techniques like predictive coding and transformations, making it more efficient in compressing images while maintaining high quality.

Q2: Is JPEG-XL compatible with web browsers and platforms?

JPEG-XL is gaining support among web browsers, but it may not be universally supported yet. To address this, developers can use Front.Space's Image API to ensure backward and forward compatibility or provide fallback images in formats like JPEG or PNG for browsers that do not support JPEG-XL.

Q3: Can I use JPEG-XL for photographs and professional image editing?

Yes, JPEG-XL is suitable for a wide range of applications, including digital photography and professional image editing. It offers both lossless and lossy compression options, making it versatile for various image types.

Q4: Does JPEG-XL support transparency and animations?

Yes, one of the notable features of JPEG-XL is its support for transparency and animations. It can handle images with transparency (alpha channels) and is suitable for creating animations and interactive content.

Q5: Are there tools available for converting images to JPEG-XL?

You can convert existing images to JPEG-XL using Front.Space's FREE API for FREE.

Q6: How does JPEG-XL impact web performance?

JPEG-XL can significantly improve web performance by reducing image file sizes while maintaining image quality. Smaller image sizes lead to faster page loading times, which is crucial for an amazing user experience and better SEO Rankings.

Q7: Is JPEG-XL the future of image compression?

JPEG-XL is positioned as a promising image compression format with a bright future.

Q8: Are there any disadvantages to using JPEG-XL?

One potential disadvantage is that it may not be fully supported by all web browsers, although this support is improving. For now, only Apple's Safari supports JPEG-XL. However, you may use Image and Video APIs like Front.Space to ensure backward and forward compatibility of your images across browsers that don't support JPEG XL even now.

Q9: How can I start using JPEG-XL in my web projects?

To start using JPEG-XL in your web projects, you can convert images to the JPEG-XL format using compatible Image Infrastructure APIs like Front.Space. Front.Space Image and Video API is the best tool available to optimize, convert, transform, and deliver media across the internet. It is easily integrated into Content management systems like WordPress plugins to automatically generate WebP images. You can also find format conversion tools and on-the-fly URL-based Transformations that simplify the process of creating, resizing, cropping, watermarking, and serving JPEG-XL images on your website.

Q10: What is the full form of JPEG-XL?

JPEG (for the Joint Photographic Experts Group, which is the committee that designed the format), X (part of the name of several JPEG standards since 2000: JPEG XT, JPEG XR, JPEG XS), and L (for long-term)