webP and avif are basically video codecs that can eventually render a frame as a static image and are good at masking low res artifacts.

On the other hand, JPEG XL is for static images only and is way better at rendering fine details. It has a bunch of specific features and optimizations. if you want to know more in details, check this post: https://cloudinary.com/blog/the-case-for-jpeg-xl

See the link below for benefits and examples:

https://cloudinary.com/blog/how_jpeg_xl_compares_to_other_im...

The big one is that you can transcode existing JPEG files effectively and reversibly to JPEG XL without any additional loss. So you can get the benefits of the new format without having to re-sample your existing JPEG images.

Better compression, similar to AVIF, with even more features.

Another important thing to mention is that WebP, HEIC, and AVIF are all based on video codecs whereas JPEG XL is a traditional image codec.

I find this article describes the differences and pluses/minuses incredibly well: https://cloudinary.com/blog/how_jpeg_xl_compares_to_other_im...

TLDR in the article is that both technologies are valid and have a significant use case. I still work plenty with the browser and would _absolutely_ use JPEG XL as a replacement for WebP images, traditional JPEGs, and PNGs if I could.

It's a shame Google/Chrome is not supporting the tech. It would be a major improvement in the landscape.

Its "competitor" is AVIF, not webp.

The TLDR version is AVIF is better at low bitrates/quality, JXL is better at higher bitrates/quality. And JXL has some other niches, like easier encoding/decoding, lossless conversion of JPEG, and support for some exotic formats that AVIF does not support.

In other words, we need both.