Updated for 2019
An oxymoron can occur in a year, everything and nothing can change. That's exactly what happened since I wrote this guide in late 2017. Now in January 2019, I figured it was time to update this guide.
I've had an affinity for image optimization, going as far as to test out Google's guetzli, a hyper-optimized JPEG encoder and running a comparison of ImageOptim vs. Squash 2. I decided to revisit something I've meant to test out: Alternative image formats.
For those who aren't as versed in image compression, our choices are familiar for bitmapped images: JPEG (lossy, no alpha), PNG (Can do alpha, optimized by pre-processing with lossy strategies), BMP, and GIF (LZW and a complete waste of bandwidth). However, there are other image formats that browsers support:
- JPEG 2000 (Safari 5+) - supports alpha, RGB/CMYK, 32 bit color space, lossy or lossless
- JPEG-XR (IE9-11, Edge) - supports alpha, RGB/CMYK, n-channel, lossy or lossless, progressive decoding, 32 bit color spacing
- Webp (Chrome, Opera, Android Browser, Edge 18+) - supports alpha, lossy or lossless.
If you're keeping score, you're probably noticing two things: That's a fractured landscape, and FireFox wasn't mentioned, both are true. When I first wrote this guide, FireFox hadn't backed a format, and instead chose to write its own JPEG encoder (MozJPEG) that offers a 5% data savings as opposed to adding support for WebP, BPG or either JPEG format. However, in FireFox 65, on target for early 2019 will soon support WebP and with Edge switching to Chromium comes WebP support.
From my experiences, avant-garde image formats shouldn't necessarily be viewed as saving pace so much as delivery more quality at the same file size as each format seems to yield varying results, especially in the cases of JPEG2000 and JPEGXR, as drastically reducing the file size will yield so-so results. However, comparing like images at the same file size, both yield better results highly tuned JPEG libraries like MozJPEG or guetzli. As a general rule, you shave about 10% off of a JPEG (after optimization) with JPEG2000/XR to deliver like results, JPEGXR being the laggard of the of the two. WebP tends to deliver like results at slightly better file sizes.
Combining classic bandwidth saving strategies like: minification of CSS, uglification of js, lazy loading, inlining the crucial CSS to speed up time-to-paint, and such with avant-garde formats can shave off hundreds of kilobytes.
Looking forward: WebP, HIEF, and AVIF
When I wrote this guide, Internet Explorer had a bit more of a foothold, and it was unclear of Edge would manage to dig itself out of its hole. JPEGXR's future also is unclear if Microsoft will continue support for XR now that it's moving towards WebP. For the obsessive or people with user bases with heavy Internet Explorer usage, JPEGXR is still an option, but for everyone else, I'd skip JPEGXR moving in 2019.
Apple is the only WebP holdout and has not announced plans to support it. In the iOS 10 beta and macOS Sierra beta, Apple tested WebP support but removed it before finalizing support. Strangely, despite Apple's investment in HEIF, it's not even supported in Safari's technical preview. I'm not holding my breath for WebP support on Safari.
Lastly, WebP might a be a bump in the road to AVIF (AV1), a royalty-free open joint venture from engineers at many firms such as Mozilla, Google, Cisco and so on. FaceBook raved about AV1 as superior to x264 and VP9 video formats. Mozilla plans on supporting AVIF, so at least one major browser is onboard with others likely to follow. The results look promising although, like all things in compression, there's rarely a clearcut winner.
There's plenty of other places that perform comparisons, but the long and short is that per kilobyte. JPEG2000, JPEG-XR and WebP deliver considerably better images than JPEG and (often) PNG, and it doesn't take too much effort. I'd recommend reading the following, David Walsh's WebP images and Performance and playing with the incredibly nifty a format comparison tool.
All three image do not require any purchases although JPEGXR is the most cumbersome of the formats on macOS.
What you need:
- A high-quality source file (preferably lossless)
- JPEG-XR: Microsoft provides a free photoshop plugin that can be downloaded here or nab XnView
- WebP: WebPonzie provides the most painless and easy to use solution. XNView also has WebP support.
- JPEG2000: Photoshop, Preview both have native support. XnView also has JPEG2000 support. (I've had the best results using Apple's Preview for whatever reason)
Adding multi-format support doesn't require much, just a picture element. Below is an example of a simple picture. This can be mixed with srcset.
Really, that's all it takes. Notably on macOS previewing JPEG-XRs is a pain, whereas at least WebP can be previewed in Chrome. It takes Photoshop or opening a JPEG XR in XnView then going to the actions tab, applying a filter so you can view the original JXR file (it's cumbersome). I created a CodeKit script to automate WebP and JPEG2000 and CLI bash script to convert images to WebP / JPEG200 / MozJPEG using ImageMagick. At the very least, you'll be providing better images at the same file sizes as a normal JPG. JPEG XR is out. JPEG 2000 will never be embraced by the industry at large. WebP has a lot of traction these days. HEIF and AV1 though might soon replace WebP.