What is the WebP image format?

The WebP image format is a file type that has existed for five years. WebP lossy images are on average 25–34% smaller than JPEG images (Google Developers, 2016) and 26% smaller in comparison to PNG images. Lossless WebP also supports transparency (Google Developers, 2015), with the cost of 22% additional bytes.

How does this all work? Looks like magic to me! JPG has existed for years and now all of sudden comes this new image format boasting itself as the best performing compressed image format?

Well for anyone who is smart enough to understand the Google Developers documentation (I managed to understand the basics) on WebP compression techniques in detail can read about them using this link.

I’ll summarise my understanding of the subject.

How it works (from what I know)

When videos are produced and then compressed, there is a popular codec named the “VP8 video codec”. This codec compresses videos in keyframes by predicting values of the video that change from frame to frame. For example, say there are two frames ‘Frame A’ and ‘Frame B’. Only the new values in ‘Frame B’ that hadn’t already existed in ‘Frame A’ are encoded.

Lossless WebP compression uses areas of the image that have already been rendered to construct new pixels in the image.

Pretty frickin’ smart stuff. Let’s start making some WebP images!

Creating WebP Images

WebP images are pretty non-existent. I, as a designer, have never exported an image in WebP format. Not only have I never exported one but I’ve never been given the option when using the Adobe Creative Cloud software packages.

Fortunately, after doing some research, I found that there is a dead simple way of creating WebP images from previously converted JPG or PNG images using Webpconv.

I found the process fairly straight forward, you can load a directory or a single image and hit convert. The software will then convert the image(s) from their original file format to WebP file format.

The download link to the software can be found over at http://www.romeolight.com/products/webpconv/

For anyone who uses automation software such as Grunt and wants to incorporate the conversions as part of their Grunt tasks can do so using the following Github link: https://github.com/1000ch/grunt-cwebp

Comparison to JPG

In order to get an accurate comparison of how the new WebP file format faired against the notorious JPG file format, I first downloaded a free for personal and commercial use photograph from Unsplash.

I wanted an image which had strong use of colours with a mixture of sharpness and blurriness to the image.

Original JPG Image — (Compressed 446 KB)

WebP Image — Compressed (339 KB)

The image cannot be uploaded to Medium. If your browser supports the format you can view it at http://www.whatjackhasmade.co.uk/webp-image-format/

Image attribution: Diana M

The Results

So this is the main crux of the post. How does the original JPG file size compete with our new file format?

• JPG, Original: 4.21 MB (4,416,069 bytes)
• JPG, Compressed: 446 KB (456,952 bytes)
• WebP, Original: 361 KB (370,004 bytes)
• WebP, Compressed: 339 KB (347,638 bytes)

You can download all of the image files from the dropbox link.

That’s 87.3% of the original file shaved off!

The following video is a recreation of when I read that the new file size could be 339K as opposed to 4.21MB!

Support

Globally the WebP image format has 73.7% cross browser support (Caniuse, 2017).

The current browsers that support the image format include -

• Google Chrome
• Opera
• Opera Mini
• Android Browser
• Opera Mobile
• Chrome for Android
• UC Browser for Android
• Samsung Internet
• QQ Browser
• Baidu Browser

Some of the browsers that are currently experimenting with the support of the new image format include -

• Safari
• Mozilla Firefox

Conclusion

For now the browser support for the WebP file format is very limited. I can’t recommend that you go and convert your whole media library to this amazing file type as a quater of your users will be left twidling their thumbs waiting for an image or being met with an alt tag.

You should definitely be keeping an eye on developments both for support in browsers and support in image software applications.

I plan on writing a blog post soon about how I will be introducing the new file format, with a safe fallback using JPG. Keep an eye out for a blog sometime next week.

References

• Caniuse. (2017). WebP image format. [online] Available at https://caniuse.com/#feat=webp [Accessed 13 Jun. 2017].
• Google Developers. (2015). A new image format for the Web | WebP |Google Developers. [online] Available at https://developers.google.com/speed/webp/?hl=en [Accessed 13 Jun. 2017].
• Google Developers. (2016). WebP Compression Study | WebP | Google Developers. [online] Available at https://developers.google.com/speed/webp/docs/webp_study [Accessed 12 Jun. 2017].

This post was originally posted over at my website and can be viewed in full at http://www.whatjackhasmade.co.uk/webp-image-format/