How to use Next-Gen Image Formats WebP, JPEG 2000 and JPEG XR

One of the most underrated web performance optimization technique is delivering Next-Gen image formats. If you run a check in Google Lighthouse Report, you will probably get a recommendation that says “Serve images in next-gen formats”

What is WebP, JPEG 2000 and JPEG XR and how do they differ

WebP, JPEG 2000 and JPEG XR are newer compression formats that enable higher compression rates or advanced features over usual image formats. These three are different implementations developed by different companies or organizations. Unfortunately, none of the currently available browsers support all of these, but all current browsers support at least one of these formats. Here are the differences:

WebP was developed by Google and is supported by the majority of browsers except Safari and Internet Explorer. When exporting an image to WebP, you can choose between:

1. Lossless compression – without quality loss, comparable to PNG format, but 22-50% smaller file size, according to KeyCDN’s comparison
2. Lossy compression – you can set the quality index, like in JPEG. Compared to JPEG images at same quality, WebP is 25-34% smaller, according to Google’s WebP study

The file extension is .webp and the MIME type is image/webp.

JPEG 2000 was created by the Joint Photographic Experts Group, the joint committee that developed JPEG as well. JPEG 2000 also supports both lossless and lossy compressions. A huge advantage compared to JPEG is the support of transparency and progressive decoding, which enables a viewer to see first a lower quality version of an image which progressively improves while the rest of the file is being downloaded.

Note: Converting a normal JPG to JPEG 2000 will usually result in a larger file. If you want better results, it makes more sense to export an image directly from TIFF in Photoshop.

The file extension for JPEG 2000 images is .jp2 or .jpx and the MIME types are image/jp2, video/m2, image/jpx and image/jpm.

JPEG XR stands for extended range, was originally created by Microsoft in 2006 under the name Windows Media Photo and became a standard in 2009. The image format takes a new approach to compression and supports transparency (alpha channel) and 48-bit deep color over normal JPG format.
It is currently supported only by Internet Explorer from version 9.

The file extension is .jxr and the MIME type is image/jxr.

How to create next-gen image formats

Photoshop

If you are using Photoshop, there are some plugins that enable exports in next-gen formats.

For WebP: http://telegraphics.com.au/sw/product/WebPFormat#webpformat

JPEG 2000 is already built-in in the Photoshop “Save As…” window. Select it from the “Format” dropdown menu or change the ending of your filename to .jp2

For JPEG XR, you’ll have to download the corresponding plugin from Microsoft’s website. There is a version for Mac and one for Windows.

Conversion Tools

ImageMagick is a CLI utility that supports all of these 3 formats (and many more).

• https://imagemagick.org/script/webp.php
• https://imagemagick.org/script/jp2.php

How to use WebP in an <img> image tag with fallback

If you have already generated the new image formats, here is how you can insert them into your web page.

Let’s say you have a normal <img> tag like this

 <img src="img/my-cute-kitty-cat.jpg" alt="Photo of my cute Kitty Cat" /> 

You’ll need to replace it the following block

<picture>
   <source srcset="img/my-cute-kitty-cat.webp" type="image/webp">
   <source srcset="img/my-cute-kitty-cat.jxr" type="image/jxr">
   <source srcset="img/my-cute-kitty-cat.jp2" type="image/jp2">
   <source srcset="img/my-cute-kitty-cat.jpg" type="image/jpeg">
   <img src="img/my-cute-kitty-cat.jpg" alt="Photo of my cute Kitty Cat" /> 
</picture>

The tags <picture> and <source> are HTML5 Tags supported by modern browsers. You have to specify one source for each new format and the browser will decide which to use depending on the supported MIME type. For the case, that the browser doesn’t support HTML5 Tags, you’ll need to specify a fallback image with a regular <img> Tag.

How to use WebP in styles

If you want to use next gen image formats for e.g. background images in CSS, it will take some more steps:

First you’ll need to check whether your browser supports those new formats.
You can do this by adding modernizr to your web page. It adds the classes webp, jpeg2000 or jpegxr to your <html> Element if one of those formats is supported. Add this line to your web page’s <head> section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>  

You can use these classes to override the default image in CSS:

.my-selector {background-image: url('img/my-cute-kitty-cat.jpg')} /* default */ 
.webp .my-selector {background-image: url('img/my-cute-kitty-cat.webp')} /* override with webp */
.jpeg2000 .my-selector {background-image: url('img/my-cute-kitty-cat.jp2')}
.jpegxr .my-selector {background-image: url('img/my-cute-kitty-cat.jxr')}   

Conclusion

If you want to serve next-gen image formats to increase web performance, there is some work necessary, but it’s worth the effort, if it helps to get a performance boost and makes your website faster than your competitor’s sites. Most major sites like Facebook and YouTube are already serving optimized images to enable fast page loads and smooth user experience.

Faster page load ➡️ Happier Visitors ➡️ More Conversions ➡️ More Revenue