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+, Firefox 65+) - 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, 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.

So far no browsers support HEIF (high-efficiency image format), Apple's newly preferred image capture format for iOS, although I documented recently the fate of its support on macOS recently. (it's actually quite good).

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 produce 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. hen there's BPG and FLIF, which no browsers have embraced nor announced support for, effectively banishing them to the realm of the forgotten.

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.

Quick Primer

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 formats 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. A small company, Telegraphics, also provides a webp plugin. I had minor issues with it.
  • 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)

Since there isn't a excellent singular solution, you'll need to open the high quality source image and open the image in the listed programs. Photoshop can handle exports to all three formats (with the aforementioned plugins) making it the closest to a one-stop solution, followed by XnView (which can be cumbersome). With JPEGXR's fate in future Edge iterations hanging in the wind, WebPonzie + Apple's Preview is completely viable.

ImageMagick

ImageMagick is the other one stop solution, and it's a CLI utility, quite powerful and fast although occasionally a little obtuse with the flag options for each file format to toggle features like lossless or target sizes. Depending on your terminal comfort, this may be the easiest method. Getting start however is pretty straight forward.

The easiest way is to use Homebrew, a package manager for mac CLI utilities. If you have Homebrew already installed, run the following commands in your terminal (install both ImageMagick and webp), otherwise go to the afformentioned link:

    brew install imagemagick --with-openjpeg
    brew install webp
    brew install jxrlib

Imagemagick includes several CLI utilties, but the one we're concerned with is convert. Converting a file to webp looks like the following:

  convert path/to/file.png -quality 50  path/to/new/file.webp

The same goes for JPEG2000 and JPEGXR it requires using the correct extension. Tweaking the quality takes tinkering for each format.

  convert path/to/file.png -quality 50  path/to/new/file.jp2

The markup

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.

  <picture>
    <source type="image/webp" srcset="path/to/image.webp">
    <source type="image/jp2" srcset="path/to/image.jp2">
    <source type="image/jxr" srcset="path/to/image.jxr">
    <img src="path/to/image.jpg" alt="alt description">
  </picture>

Final Thoughts

Really, that's all it takes. Notably on macOS previewing JPEG-XRs is a pain and on it's way out, 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 likely on the way out, even if its still supported by Edge. 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. JPEG isn't going anywhere, anytime soon.

  • Jan 21, 2019 - added ImageMagick information
  • Jan 14, 2019 - rewrite of about 1/2 the content, restructured and added information about future formats.
  • Aug 17, 2017 - Correction on JPEG 2000 and SRCset
  • Jul 26, 2017 - Original article published