Currently at IDRsolutions we are adding support for a new image format (WebP) to JDeli our Java image library, and so I decided to write a blog post this week to give people more of an idea about this image format and why you would either want to use it or run away screaming.
What is WebP?
WebP is an open source image format that was created to work on web browsers. It’s aim is to make smaller images that will speed up the web. Speed up web page generation and you can speed up search engines. Google created this project and open sourced the code under a BSD license, so that developers could help out and suggest improvements. For those of you who are interested you can find the Git repository information here.
WebP supports both lossy and lossless compression and lets you configure lossy compression so that you can find the right balance between file size and image quality. What are these compression types you ask?
Lossy compression can also be known as irreversible compression. This data compression method has the smallest file sizes because it discards data by using inexact approximations to represent the content. Since some of the data is discarded, the original data cannot be retrieved. Discarding data and effectively averaging it, can cause the quality off the data to drop, though a good lossy compression tool will significantly reduce the file size before the client notices the quality reduction. Audio formats like MP3 use lossy compression as extreme data (mainly the data that represents the sound ranges we cannot hear) is removed to reduce file size.
Lossless compression is a reversible data compression method. It allows the original data to be reconstructed from the compressed data, so even after conversion you can get your original data back. This is similar to how a ZIP file works. PNG and GIF files also use this compression method. This compression creates bigger file sizes than lossy compression but the data quality is preserved.
Want to see some examples? Then head over here to see a side by side comparison gallery that Google created after testing the WebP compression against PNG files. If you want real world comparisons (that weren’t created by the people who created the format) then check out this recent article. It offers a good explanation on how to convert images and findings from multiple conversion tests using a variety of images. Te below image is taken from the google comparison gallery.
WebP can also be used to create animated images similar to GIFS. The maximum pixel dimensions for WebP images are 16383 x 16383.
Which browsers support WebP?
On average 60% of a web page is made up of images. This could be the backgrounds, icons, logos, galleries and any other images that you incorporate into your websites. Customers are expecting fast, efficient and easy to navigate web pages that WebP offers with very small image sizes that allows for quick rendering and transferring.
Smaller image formats can also be created with no loss of quality. In comparison to JPEG and JPEG 2000, WebP files are 30% smaller which is crucial when you need to worry about your storage capacity.
As I previously mentioned WebP can also be used as a replacement for GIFS. Not only are the file sizes smaller (64% reduction from animated GIF’s to lossy WebP and 19% reduction when converted to lossless) but the quality is better.
WebP also supports 24-bit RGB colour with an 8-bit alpha channel while GIF’s only supports 8-bit colour and 1-bit alpha. Another benefit for the animated WebP is that it can combine frames with both lossy and lossless compression so you can choose which frames need better quality. You can also seek to different frames which helps recover the animation when scrolling occurs.
A possible security benefit for WebP is that you cannot view the images easily if they are downloaded to the local machine. Do you want to show a preview of artwork or desktop backgrounds, before someone separates from their hard earned money to purchase it? Well unless the person is knowledgeable about the WebP format and can convert the file, they won’t be using your images without paying for them.
As with all new-ish formats. The support is currently being developed and is therefore not as wide for the WebP format.
Requires the help of other technology e.g. plugins to work on browsers that do not natively support the format, though if the format isn’t supported then the files are shown in a known format e.g JPEG or PNG.
The main use case for WebP would be to convert all your current images to the WebP format. This means the image would potentially have been compressed twice which may lead to a very slight loss in quality. See this article that I mentioned earlier for more information.
So there you have it a quick run through of the WebP image format.