Time for Next-Gen Codecs to Dethrone JPEG

Avatar of Chris Coyier
Chris Coyier on

Take your JavaScript to the next level at Frontend Masters.

AVIF has been getting a lot of tech press, but Jon Sneyers is hot on JPEG XL (which makes sense as he’s the “chair of the JPEG XL ad hoc group in the JPEG Committee”). According to Jon’s comparison, JPEG XL comes out on top on everything, except low fidelity compression, and offers progressive rendering which none of the other next-gen codecs do. But WebP (not to be confused with the upcoming WebP2!) has something of a leg up now that it has support across all the major browsers.

There is a whole ecosystem around image formats that is way wider than websites, of course, and I’m sure that plays a big role in what ends up on websites. What format do you get when you make screenshots on your system? What does your digital camera export? What does your favorite design software export? Then, once people have images, does the website-making software you use support them? I think of how WordPress rejects SVG unless you force it; I just tried uploading an AVIF for this post and it won’t take that, either.

I also think of the UX of new formats, like when I have a .avif file on my desktop, my macOS computer doesn’t know what to make of it. It’s just a blank white document with no preview. The image ecosystem as a whole moves slower than the web. Inertia, as Jon puts it, is a good framing, but hopefully can be overcome:

Let’s just hope that the new codecs will win the battle, which is mostly one that’s against inertia and the “ease” of the status quo. Ultimately, unless JPEG remains a dominant force, regardless of which new codec will prevail, we’ll reap the benefits of stronger compression, higher image fidelity, and color accuracy, which translate to more captivating, faster-loading images.

I’d bet that image codecs evolve as long as displaying images on screens is a thing. There is no endgame. The blog post I’m linking to from Jon is on the Cloudinary blog, and I gotta give it to them: Cloudinary — and services like it — are a solution here. They provide a system where I don’t have to care about image formats all that much. I upload whatever I have (ideally: big and high-quality) and they can serve the best possible format, size, and quality for the situation. That job, to me, is just too damn hard to do manually, let alone stay on top of long-term.


I see JPEG 2000 is still hanging out, but whatever happened to JPEG XR? It wasn’t that long ago we talked about serving that, even with <source>. Was that just mostly an IE thing that died with IE?

Direct Link →