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 and 26% smaller in comparison to PNG images. Lossless WebP also supports transparency, 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 straightforward, 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)
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!
Globally the WebP image format has 73.7% cross-browser support at the time of writing this.
The current browsers that support the image format include -
- Google Chrome
- 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 -
- Mozilla Firefox
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 quarter of your users will be left twiddling 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.