JPEG XL vs AVIF for web use-cases
35 points by jaffathecake
35 points by jaffathecake
My takeaway: all of these formats are so incredible. The 50% F1 image goes from a 1.01mB original to a 23.7kB avif, and I can’t even tell it was compressed without zooming in (on my iPhone 16 Pro).
I default to avif on my website though due to all these great write-ups and the fact that you have to pick something. Thanks, Jake!
On the screenshot example, the brightness of the white changes a lot between avif and lossless (especially noticeable on the underline for links). There is a similar effect on the shine in the woman's glasses on the People picture. It might be something to do with the scaling algorithm (on 1080p, the image is shrinked quite a bit), but it doesn't happen to the jxl images (which look exactly like the lossless ones to me). ... aaand I just realized I'm on firefox 157, which doesn't have native jxl support, so I'm just comparing scaling algorithms between a js-drawn canvas and real avif. After trying on 158, there is no such effect. It would be nice to get a link to open the full image in a new tab, to be able to compare the lossless to the lossy without being constrained by the website layout.
(author here) Tell me a bit more about how the layout is constraining things. I want folks to look at the image as it would be presented, rather than zooming in, because zooming in is 'cheating'. I could add a pop-out button, or a fullscreen button, but if the image size is still fixed, I'm not sure what it gains.
Edit: I tried the fullscreen option, and it's kinda nice, especially for the large examples. Thanks for the suggestion. It's there now.
It's only cheating if you go over 100% and start pixel peeping. If I'm looking at a 2000px wide image shrinked by my browser to 700px, pretty much everything is going to seem indistinguishable from lossless. Ideally the images would be already resized for the intended display size. The fullscreen option helps, thanks!
The images are already rezied to their intended size. The full screen option doesn't change that.
It sounds like you're looking in a browser that doesn't support JPEG XL, so it's falling back to wasm to display it, and it seems like canvas metrics are slightly different for some reason.
Yeah. I was sure I had already updated to Firefox 158, but after double checking, I'm still on 157.
I guess I'm an outlier and embed all the different formats in a <picture> element and let the browser decide on the 'best' format (with a fallback to jpg or png). It takes nothing to generate with the majority of the tools on the market, and can even be easily batched.
I do understand the desire to save every byte, but honestly? What format the picture is in only matters in edge cases. You don't have to generate each format, but if you're going to do more than one (AVIF, JPEG), then why not just add the rest?
That isn't how <picture> works. The browser picks the first valid <source>, so you're still picking a format.
Rather than spend time encoding lots of formats, it's better to pick one format and choose the right settings.
I may be the opposite of an outlier in that I use an <img> element with a png, jpg or svg as the src and just don't worry about it 🤷
Just using AVIF is even simpler and has better results. Although if the SVG is small it's the better choice.
What I've found interesting is how bad lossless AVIF is. It's so much bigger than WebP! Now, I know basically nothing about their internals so maybe there's a good reason for this. I naïvely thought a newer format would be better, so it surprised me to see how much bigger the same images were.
This post also validates my choice of AVIF for my photo gallery's thumbnails. :)
Lossless WebP and lossless JPEG XL are basically different codecs compared to the lossy forms, which isn't true of AVIF. That's why JPEG XL at quality 99 can be larger than quality 100, because it mode-switches.