WebP and JPEG XR Image Formats explained

In the challenging landscape that is responsive images there are two new image formats that are making their moves to provide part of the solution, WebP and JPEG XR.

For many years we’ve had the likes of JPG and GIF for all our image needs. In recent times PNG has come along to replace GIF in most situations (with the obvious exceptions of animated cat gifs) providing us with transparency in our vector images.

SVG has also been around forever to help with those vector layouts, however it was only widely supported recently and therefore is only just starting to make a resurgence in the world of internet imagery.

Before we continue any further it’s worth pointing out that these are not ready for the mainstream consumption and this article should be read as a guide to the possibilities rather than a tutorial of how to implement them in your sites today.

  WebP JPEG XR
Developed by Google Microsoft
Lossless Compression Yes Yes
Lossy Compression Yes Yes
Full Transparency Yes Yes
Progressive rendering No Yes
Replace PNG Yes Yes
Replace JPG Yes Yes
Added Bonus Better lossy compression (same image with less bytes), we can now have transparency without the added file size of PNGs.
An overview of the capabilities of WebP and JPEG XR against existing image solutions

Here is a current support table as specified in a more detailed blog post.

Browser WebP JPEG XR
Chrome >= 23 No
Firefox No No
Internet Explorer No >=10
Safari No No
Opera >=12 No

The next issue comes with creating the image formats. 

Creating Image Formats

Photoshop is where most of the images of todays web are crafted but it doesn’t support these out of the box. They do however have plugins available, AdobeWebM for WebP and a Microsoft Plugin for JPEG XR

For more information about creating these image formats and how they perform in the browser I encourage you to head over a read the original article Web Site Optimization With Browser-Specific Image Formats

Leave a Reply

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.