DEV Community

Cover image for What does JPEG XL Mean for the Web
Jon Arne S.
Jon Arne S.

Posted on

What does JPEG XL Mean for the Web

Safari 17 along with the next update of iOS and macOS will provide support for the long wanted JPEG XL (jxl).

The announcement caught the world by (pleasant) surprise, especially after Chrome decided to drop support.

*What does the introduction of JPEG XL mean for the web community of developers and other stake holders?
*

  1. It's royalty free: Use it as much as you want, no questions asked. You might remember GIF, but more recently also HEIC has patent issues.
  2. JPEG XL is made for images/pictures. Unlike AVIF and WEBP which are both based on a video codec.
  3. The point above means that JPEG XL will provide higher quality images compared to AVIF and WEBP. Especially on photographic images with many details or a high bit rate.
  4. Low file size. JPEG XL compresses super well! In most cases better than AVIF
  5. JPEG XL supports wide color gamut and HDR
  6. Faster encoding and decoding compared to AVIF.
  7. JPEG XL is lossless. You can even convert your existing jpeg to jxl losslessly and still reduce the file size!

...put short: Much better than JPEG.

So. This might also mean yet a <source> to your <picture> element...which is becoming quite verbose, now... Might also mean a new format to generate in your build process...

The good news is that the tooling and plumbing on the internet already has pretty good support for JPEG XL.

Because of how well supported JPEG XL is and its unique qualities in compression, losslessly maintaining image data, color support etc. JPEG XL should be your new default format. Move all your images from JPEG to JPEG XL.

We've recently also implemented support for JPEG XL in ImageEngine (image CDN). When the origin image is a jxl, the chances of a better looking image for the end users is much greater thanks to the qualities of JPEG XL. Specially with regards to colors. Image CDNs will convert a JPEG XL to AVIF for non-supporting browsers (Chrome for example), and maintain the wide color space.

As a bonus, it's light weight and great looking :)

Top comments (0)