WebP Image Format

by Jack Pritchard

Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!

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 https://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 Results

#

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

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 -

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

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

#