I was recently tasked with re-architecting Emerge Interactive's website, a CMS site based off of Expression Engine, which involved the usual work flow of creating requirements, and moving pixel to code. Previous enhancements to our website included classic bandwidth saving strategies: minification of CSS, uglification of js, lazy loading, inlining the crucial CSS to speed up time-to-paint, and such. However, we never touched images until now which is one of the easiest places to shave off hundreds of kilobytes.

I've had an affinity for image optimization, going as far as to test out Google's guetzli. I decided to revisit something I've been meaning to test out: Alternative image formats.

Quick Primer

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) and GIF (LZW and a complete waste of bandwidth). However, there are other image formats that browsers support: JPEG 2000 (Safari 5+), JPEG-XR (IE9-11, Edge), and Webp (Chrome, Opera, Android Browser). If you're keeping score, you're probably noticing two things: That's a fractured landscape and FireFox wasn't mentioned, both are true. FireFox so far hasn't backed a format, and instead chose to write its own JPEG encoder that offers a 5% data savings as opposed to adding support for WebP, BPG or either JPEG format.

There's plenty of other places that do comparison 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 do not require any purchases.

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)

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 are a pain, whereas at least WebP can be previewed in Chrome. It takes Photoshop or opening a JPEG XR in Xnview and going to the actions tab, applying a filter so you can view the original JXR file. At the very least, you'll be providing better images at the same file sizes as a normal JPG.