JPEG XL (jxl) is a new, royalty-free image format made for the web use case. This codec is designed to replace the more commonly known, but aging, JPEG designed in 1992.
Compared to other next-gen formats like AVIF and WEBP, the main difference is that JPEG XL is not based on a video codec, but is made specifically with images and pictures in mind.
Not relying on a video codec means that JPEG XL will not suffer from the same type of quality loss than for example AVIF: Video based codecs tend to "smoothen out" parts of the image with low contrast and low entropy, which may be an issue for many types of pictures.
ImageEngine supports JPEG XL the same way as it supports other codecs. There is a lot going on under the hood, but at a high level ImageEngine will make sure that:
- JPEG XL is automatically served to browsers and devices supporting the codec
- JPEG XL is always available using Directives
- You can use JPEG XL as the file format at the origin
A sample request which will serve a JPEG XL file:
https://try.cdn.imgeng.in/f_jxl/https://free-images.com/tn/d44b/cyclopean_isles_sicily_italy.jpgThe ?imgeng=/f_jxl notation may also be used of course.
JPEG XL vs. JPEG
The names of the codecs are similar, but don't be fooled; under the hood they're totally different, and XL does not mean "Extra Large".
From a distance, here are a few relevant differences:
- JPEG only supports 8-bit color depth while JPEG XL supports wide color gamut and HDR
- JPEG is a "lossy" format, meaning that image data is lost during compression. JPEG XL supports lossless which means that no image data is lost.
- Traditional JPEG may suffer from "pixelated edges" or "artefacts" on certain image types like banners with text. With JPEG XL this is less of an issue.
- JPEG does not support transparency, while JPEG XL does.
- Both JPEG and JPEG XL supports progressive decoding/rendering
- JPEG supports static images, while JPEG XL supports animations
Old JPEG files can be losslessly converted to JPEG XL, still significantly reducing their file size. ImageEngine will of course handle this automatically.
JPEG XL vs. Other Next-Gen Image Formats
Comparing JPEG XL to formats like AVIF and WEBP, the main differences are:
- Adoption
- File size to visual quality ratio.
Because JPEG XL is a relatively new format, the adoption and application support is relatively low. However, as web browsers start to support it, adoption is expected to grow.
For low-fidelity images AVIF may offer a better compression (a lower file size) than JPEG XL.
On high-fidelity images (like photographic images with many details and high entropy) JPEG XL will produce better looking images and smaller file sizes than both WEBP and AVIF.
Another issue with AVIF is the overhead caused by the HEIF header size. For small images, measured by pixel size, the header makes up a significant share of the total payload. Because the header can't be compressed, there is a limit to how much small images can be optimized using AVIF.
For most images, JPEG XL will be a better choice when considering visual quality and file size.
Encoding and Decoding performance
AVIF turned out to be slow and resource intensive both for encoding (optimization) and decoding (displaying the image on the end users' screens). This makes AVIF less resource efficient and it requires more electricity on end users’ devices.
JPEG XL has proven to be faster and is utilizing resources better than AVIF, both on server (optimization) and on the client (rendering).
WEBP is still the leader when encoding and decoding. It's fast and require less resources.
Browser Support
A complete and updated status can be found here.
Safari supports JPEG XL
Safari both on iOS and macOS introduced JPEG XL in version 17.
Chrome/blink Pulled Support for JPEG XL
Support for JPEG XL in Chromium based browsers was first introduced in April 2021, but later removed in December 2022 (version 110)
Firefox supports JPEG XL Behind Flag
JPEG XL can be enabled in Firefox Nightly via the image.jxl.enabled flag in about:config.
Comments
0 comments
Please sign in to leave a comment.