Safari 17 with macOS 14 or iOS17 will introduce support for JPEG XL and HEIC. Usually new versions of Apple's operating systems are released in September.
September is just around the corner, so we better get ready to serve next-gen image formats to Apple users.
Here's why and how:
JPEG XL is superior to both AVIF and WEBP
I'll define "Superior" like this:
- smaller file size
- better visual quality
- better encoding and decoding efficiency
Before we compare JPEG XL and AVIF, let me just say that WEBP is great for most use cases. It handles all kinds of images (photographs, graphics etc.) fairly well and has a lower file size than the good ol' JPEG.
WEBP encoding and decoding is also super fast compared to AVIF and JPEG XL.
All in all, WEBP is a better format than JPEG and has close to 100% browser coverage by now. An OK choice for most cases.
JPEG XL vs. AVIF
Now, this becomes interesting. Google does not believe in JPEG XL and has removed all support. Why? "There is not enough interest from the entire ecosystem" and "does not bring sufficient incremental benefits", they claim.
The ecosystem is pushing back back, documenting the benefits of JPEG XL. DAMs like Cloudinary and ImageCDNs like ImageEngine has already added support for JPEG XL
Why does the ecosystem embrace JPEG XL?
Put short, JPEG XL has a better "file size to visual quality" ratio. Which means JPEG XL is able to produce better looking images at a smaller byte size than AVIF.
The chart below shows a comparison of byte sizes for a small sample of images across various image formats.
Even thought the difference between JPEG XL and AVIF is not big, there are a few things to make not of:
- The byte size of avif images, and how much AVIF is able to optimize varies a lot!
- JPEG XL produce higher visual quality than AVIF at the same file size
JPEG XL is super stable when it comes to optimization factor:
One of the reasons may be that AVIF relies on the HEIF container format. HEIF has a holds a lot of metadata in the header. For small images, measured by pixel size, the header makes up a significant share of the total file size. Because the header can't be compressed, there is a limit to how much small images can be optimized using AVIF.
The chart below shows a comparison of visual quality between formats. SSIM is used to determine the quality. Lower is better.
The takeaway here is that JPEG XL images generally looks better than AVIF. Less artefacts and less "smoothening" making JPEG XL better for most kind of images. It is likely that one can be more aggressive with the quality settings for JPEG XL to reduce the byte size even further. Making JPEG XL even smaller compared to AVIF.
Start serving JPEG XL today
September, when 50% of the mobile users and 20% of the desktop users will have support for JPEG XL, is arriving fast.
Already now you can start kicking the tires of JPEG XL. It can be enabled in Firefox Nightly via the image.jxl.enabled flag in about:config.
Like mentioned, many image CDNs has already added support for JPEG XL. By using an external provider you don't have to manually go through all images and convert to JPEG XL. The image CDN will automatically serve JPEG XL to supporting browsers and other formats to other browsers.
One of the first image CDNs to support JPEG XL is ImageEngine
With ImageEngine you can sign up for a trial to start testing JPEG XL
Follow the instructions to get your site set up. Note that localhost will not work when you define the image origin.
Once you've set up, set JPEG XL (jxl) as the preferred format. This will make ImageEngine select JPEG XL over AVIF, for example, if both formats are equally well supported by the browser.
Voila, you can now enjoy JPEG XL in Firefox Nightly, and you're ready for Safari 17 in September! 🚀
Top comments (0)