Why JPEG XL?
Written on 26 March 2023 - Needs a full browser support for viewing JPEG XL and AVIF.
2023 Update
"Why don't you stick with ye olde JPEG or PNG?"
Nothing wrong with those formats, but old JPEG is already showing up its age and PNG is just too large (lossless).
And since JPEG XL is aimed to be a long-term replacement for the old JPEG with far more superior capabilities and compression rate,
I simply interested to test its capabilities here. And so far I'm quite impressed about how it performs.
"Why not AVIF instead? Since it's also on a same generation as JXL with widespread support."
To be honest, even the JXL devs also tells me that AVIF does a better job for compressing artworks, especially with anime-styled.
But on my own subjective tests, JXL offers more functionality that I just can't miss, like higher bitdepth support and
photon noise as a rough dithering. Not to mention that it comes with a progressive decoding support for a better web experience
for a slow connection, a feature that we already take for granted in old JPEG that is currently (still) missing on AVIF.
Furthermore on my target quality settings, both formats looks quite identical at 100% zoom (unless you're a pixel peeper).
Did I mention rough dithering? Yep, let's take a look with examples shall we? I took an old artwork that suffers quite a lot of banding on standard 8-bit displays, even though that the artwork itself is made in 16-bit color depth.
PS: Click / tap the image to enlarge.
Raw PNG
Size: 1116.36 KB
Cropped lossless image, at full 16-bit per channel depth. On standard 8-bit SDR displays, you may see a heavy banding on the dark gray area on the left side and minor banding on the other areas.
JPEG XL - distance 1
Size: 40.13 KB
Even though JXL preserved the 16-bit depth, it still suffers from banding on 8-bit displays. However, this may change in the future when libjxl 1.0 is out with dithering support. This could be a good dithering test as well in the future!
AVIF - Set to roughly match JXL's size
Size: 39.35 KB
AVIF is currently limited to 10-bit depth, which can result in a fidelity loss especially on smooth gradients like this. Though it's still more than enough for current-gen displays. On a very close look, AVIF does give a better quality compared to JXL, especially on high contrast areas like around the lineart. However, without dithering it still suffers from banding on 8-bit displays as well. AVIF does have a noise synthesis, but it didn't seem to apply on a clean picture / artworks (CMIIW, I tested Noise Synthesis on Squoosh since Krita didn't have an extensive options for AVIF). 2023 Update
JPEG XL - distance 1 - ISO 120 photon noise
Size: 40.14 KB
Using JPEG XL's photon noise as a rough dithering works quite nicely without any noticable impact on image file size. FYI, all of my artwork gallery images here were applied with this trick. Look how nice and smooth the gradients are now!
JPEG XL - distance 1 - Modular - ISO 120 photon noise
Size: 37.68 KB
Modular mode is an alternate compression method for JPEG XL, pretty useful if you didn't like varDCT / JPEG compression artifacts. Subjectively, it gives a better "look" on few use cases like anime / cellshading. Works with photon noise as well.
24-12-2023 Update: AVIF Noise Synthesis
I managed to use photon noise in Squoosh's AVIF by recompressing the already-photon-noised JPEG XL file. However, in my case JPEG XL still wins especially in darker gradients. The results below are adjusted to better see the differences. (Original image, feel free to test it out on Squoosh.app)
AVIF: With maxed out Noise Synthesis, no chroma subsambling, and giving it a generous amount of size overhead, the banding still exists.
JPEG XL: The noise on the input are giving it a bigger filesize during recompression. But the gradient remains smooth.