Tag: Jpeg Xl

A while ago I published this post about a better figure shortcode for Hugo that enabled lazy loading. Today, I bring you yet another update on the same shortcode. This time around, the focus is on leveraging the HTML picture element, which enables alternative versions of the same image in different formats, leaving the browser to decide which one to use. You can serve the same image in, for instance, JPEG-XL and plain old JPEG at the same time. The browser will read the tag, and select the appropriate image depending on its capabilities. If you use a JPEG-XL-capable browser (Thorium, Pale Moon, Basilisk, Waterfox, LibreWolf, Firefox Nightly), you will be served the smaller JPEG-XL version, otherwise you will get the plain JPEG version.

Edit (2023-03-30): Added a couple extra images to test for high-quality encoding and illustrations. Introduce SSIM and MSE measures.

Edit (2023-03-03): Fixed mistake, as AVIF does in fact NOT support progressive decoding.

Edit (2024-01-24): Following a comment on Mastodon, I have added a reference on the good performance of lossless WebP.

JPEG XL and AVIF are arguably the two main contenders in the battle to replace JPEG as the next-generation image format. There are other formats in the race, like HEIC and WebP 2, but the former is subject to licensing patents (and possibly not royalty-free), and the second is still in development and seems that it may never see the light of day as a production-ready image format anyway. The original WebP is not even a contender as it is inferior to AVIF in almost all aspects¹ (although it may be ok in lossless compression²), and you should probably never use it for photography anyway³, or at all if you are not ok with mediocre image quality.⁴

First, a quick browser support test:

If you are browsing this page around 2023, chances are that your browser supports AVIF but does not support JPEG XL. This is mainly due to the Chrome team dropping support for JPEGL XL against the opinion the community at large. In this post, I hope to convince you why this is a bad move. Below, I perform a quick analysis of lossless and lossy compression with JPEG XL and AVIF, and evaluate how they fare in terms of file size and visual quality.

The web is currently based around the JPEG, PNG and GIF image formats. These are all very old and suboptimal formats which were never designed in the first place with the modern web in mind. A few newer competing formats have popped up recently, aiming to dethrone the original trio to postulate themselves as the standard web image format of the future. These are, essentially, WebP (.webp extension), developed by Google and hated by almost everyone else, AVIF (.avif extension), based on the AV1 container and developed by the ‘Alliance for Open Media’, a conglomerate of big tech companies that are anything but open, and JPEG XL (.jxl extension), developed by the Joint Photographic Experts Group, the same people that developed the original JPEG.

So what’s the fuss all about? Recently, Google decided to kill JPEG XL support in Chrome. A full report follows.