As defined in a previous post about Image Formats, we outlined the leading edge file types for usage on the web. Though this information is very relevant, we have recently found that Google is introducing a new format that will be another leading type we will be using in our site development. The file type is webP, and Google is pushing it as the format which brings higher compression rate with all the quality of a png.
Webmasters and web developers can use the WebP image format to create smaller and richer images that can help make the web faster.
WebP provides lossless and lossy compression for your images. Through lossless compression you shrink your image by 28% when compared to PNG files of equal quality. WebP lossy images compress between 25%-34% compared to JPEG images. The format supports lossless transparency, so the beauty of a PNG backed by a transparent layer to integrate ontop of another image is not lost when using the WebP format.
The science behind WebP compression is found in the predictive coding to encode the image. This uses the values in neighboring blocks of pixels to predict the values in a block, then encodes only the difference (residual) between the actual values and the prediction. So instead of storing the entire value of every block, the file now contains only the difference between neighboring blocks of pixels. These values also contain many zeros, so the compression handles these differently, to minimize the size even further. The WebP file consists of VP8 image data, and a container based on RIFF.
These images are supported by a variety of tools, as well as are natively supported in Google Chrome, the Google Chrome Frame plug-in for Internet Explorer, Opera 11.10 and Android Ice Cream Sandwich. Developers have also added support to a variety of image editing tools, and surely support in other browsers arent far away.
To try this out for yourself go to Google Developers Page and download the repository for your OS, then open up your terminal and go to the directory of the downloaded files and type in cwebp image.png -o image.webp. From there you can see all the conversions being donw, and further read about it here.
We at Amortech are always excited about compression methods that will increase load times on our clients pages. This is another tool we will be using to bring our clients the best the web has to offer. Check out our Gallery to see past clients products.