One of the results you might see when you run a Chrome dev tools lighthouse audit on your site is that you need to use a modern image format on your site such as WebP, JPEG XR or JPEG 2000. What are these formats? What’s the current state of browser support for them? Let’s dive in and take a look.
JPEG XR
JPEG XR (which stands for JPEG eXtended Range), was originally developed by Microsoft as PTC (progressive transform code) as an alternative to JPEG 2000. Compared to JPEG, JPEG 2000 is computationally intensive: it appears that Microsoft wanted an alternative that would work well for textures on Xbox (which would have less processing power).
For web applications, it supports transparency and has a good compression algorithm (similar quality to larger JPEGs).
Should you be using JPEG XR? That’s a complex question. It’s only supported in Microsoft browsers: IE 9+ and Edge. It can pay off to use it if you have the time and/or tooling to generate all the modern formats for the different browsers that you need. If you’re tight on time, just using a properly compressed progressive JPEG (85% compression is the recommend amount).
For more info about JPEG XR, check out these sources:
https://en.wikipedia.org/wiki/JPEG_XR
https://calendar.perfplanet.com/2013/browser-specific-image-formats/
https://www.microsoft.com/en-us/research/project/jpeg-xr/
High Performance Images by Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle & Mike McCall from O’Reilly Press