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!
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.
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?
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.
altano | an hour ago
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!
cosarara | 6 hours ago
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.
[OP] jaffathecake | 6 hours ago
(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.
cosarara | 3 hours ago
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!
[OP] jaffathecake | 3 hours ago
The images are already rezied to their intended size. The full screen option doesn't change that.
hjvt | 2 hours ago
[OP] jaffathecake | 2 hours ago
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.
hjvt | 2 hours ago
Yeah. I was sure I had already updated to Firefox 158, but after double checking, I'm still on 157.
ndegruchy | 3 hours ago
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 tojpgorpng). 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?
[OP] jaffathecake | 2 hours ago
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.
mort | 2 hours ago
I may be the opposite of an outlier in that I use an
<img>element with a png, jpg or svg as thesrcand just don't worry about it 🤷[OP] jaffathecake | 2 hours ago
Just using AVIF is even simpler and has better results. Although if the SVG is small it's the better choice.
Nicd | 2 hours ago
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. :)
[OP] jaffathecake | an hour ago
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.