Jake Archibaldjaffathecake@mastodon.social
Oct 15, 2026, 11:59 AMJPEG XL has arrived on the web, but how does it stack up against AVIF? https://jakearchibald.com/2026/jpeg-xl-vs-avif/
Replies
Marcin Wicharymwichary@mastodon.onlineOct 15, 2026, 12:16 PM@jaffathecake “Lossless JPEG” will require some major rewiring of my brain to accept.
Oct 15, 2026, 12:21 PM@jaffathecake I knew AVIF was impressive but that Lossy - illustration example at 50% is wild, didn't know AVIF was so good at lossy illustration.
Oct 15, 2026, 12:29 PM@jaffathecake Why animated AVIF is a bad idea? I feel like small animated AVIF images work much better than mp4 <video autoplay> elements. Especially on mobile browsers like Safari, where autoplay doesn't work in battery savings mode, for example.
- Jake Archibaldjaffathecake@mastodon.socialOct 15, 2026, 12:30 PM
@yacodes aside from that Safari issue, which should be considered a bug, why are animated AVIF images better?
- Oct 15, 2026, 12:41 PM
@jaffathecake I felt like the compression is better but after comparing mp4 and avif of the similar quality I see that they're about the same, so nevermind. The Safari issue is quite annoying though...
- Jake Archibaldjaffathecake@mastodon.socialOct 15, 2026, 12:48 PM
@yacodes they're almost exactly the same. You can repackage an mp4 AV1 to AVIF, and vice versa. It's just a container change.
- Jake Archibaldjaffathecake@mastodon.socialOct 15, 2026, 1:00 PM
@yacodes I've added some more detail on this https://jakearchibald.com/2026/jpeg-xl-vs-avif/?foo#animation
- Oct 15, 2026, 1:05 PM
@jaffathecake Thanks for the update. And the post, it is very informative!
Oct 15, 2026, 12:46 PM@jaffathecake spectacularly whiny point: "but both have JPEG XL ahead of AVIF on file size". I read this and didn't know whether "ahead of" means "better than, i.e., smaller than", or "larger than". I assume from context that JPEG XL's filesizes in this specific case are smaller than AVIF's and so are better, but... might be easier to change it to "smaller than" or "an improvement on" or "utterly heavenly, darling, by comparison with" or something in case others also bump off it
- Jake Archibaldjaffathecake@mastodon.socialOct 15, 2026, 12:48 PM
@sil this is a good point. I'll fix it
- Oct 15, 2026, 1:02 PM
@jaffathecake also, "Some developers, especially those who've been around as long as I have, seem to think things like screenshots need to be delivered in a lossless format" is actually hurtful and I am very saddened by being forced to confront my own mortality and irrelevance in this abrupt and brutal way on a Thursday afternoon
Oct 15, 2026, 2:02 PM@sil @jaffathecake And that from one of those youngsters who don't understand anything!
Oct 15, 2026, 2:23 PM@jaffathecakeThis is also why I think things like BlurHash are cute, but useless. They're not a representative preview, so there's little a user can do with the information provided.
for the purposes of progressive rendering i agree, but i think they still have a use in cases like mastodon's sensitive image toggle, where you may not actually want a truly representative preview until you click through the warning, and compared to hiding the image entirely, the blurry preview can still provide a fair bit of information (e.g. an image with mostly skin tones are likely hiding a photo whereas more saturated or pastel colors are likely hiding drawings, and near white or near black is a screenshot that got accidentally tagged as sensitive)
i kinda wish the codecs had a solution for this use case as well so servers that do not wish to handle media processing can avoid doing so and offload it to the browser, but i doubt there's that many software out there that wants to serve media without processing it (low resource fedi servers, or clients for services that don't expose a blurhash which can't process the images themselves because CORS)- Jake Archibaldjaffathecake@mastodon.socialOct 15, 2026, 2:35 PM
@kopper that's fair. I kinda hope CSS patch gradients fill this gap.
mdavismdavis@mastodon.socialOct 15, 2026, 4:09 PM@jaffathecake Thanks for doing all this. Many of us are involved in sites that have only (finally) gotten WebP into the media pipeline. That feels like an upgrade…. until reading your research paper. :) For those of us who’ve arrived at WebP and want to plan for the next evolution, how would you go about planning that transition? I imagine some tool that could analyze an existing site’s media and make recommendations about which newer format(s) would be best to improve size+quality.
- Jake Archibaldjaffathecake@mastodon.socialOct 15, 2026, 4:22 PM
@mdavis If you just go with AVIF 4:4:4, you're almost always going to get the best result. Just use the latest version of the encoder, and the slowest setting you can get away with (but the default is still good).
Oct 15, 2026, 4:44 PM@jaffathecake Fave paragraph:
"Here's a crop of the JPEG XL, 80% loaded. It seems reasonable that someone would look at that, and just assume I took the picture badly, leaving parts out of focus. You could probably convince me that blurring the ApeCoin logo is a societal benefit, but it still feels like a suboptimal user experience."
- Jake Archibaldjaffathecake@mastodon.socialOct 15, 2026, 5:07 PM
@wheels I'm glad someone read that far!
