Compression Techniques in the New Format Image on the Web

At Google, we are constantly looking at ways to make web pages load faster. One way to do this is by making web images smaller. Images comprise up to 60%-65% of bytes on most web pages and page size is a major factor in total rendering time. Page size is especially important for mobile devices, where smaller images save both bandwidth and battery life.

WebP is a new image format developed by Google and supported in Chrome, Opera and Android that is optimized to enable faster and smaller images on the Web. WebP images are about 30% smaller in size compared to PNG and JPEG images at equivalent visual quality. In addition, the WebP image format has feature parity with other formats as well. It supports:

• Lossy compression: The lossy compression is based on VP8 key frame encoding. VP8 is a video compression format created by On2 Technologies as a successor to the VP6 and VP7 formats.

• Lossless compression: The lossless compression format is developed by the WebP team.

• Transparency: 8-bit alpha channel is useful for graphical images. The Alpha channel can be used along with lossy RGB, a feature that's currently not available with any other format.

• Animation: It supports true-color animated images.

• Metadata: It may have EXIF and XMP metadata (used by cameras, for example).

• Color Profile: It may have an embedded ICC profile.

Due to better compression of images and support for all these features, WebP can be an excellent replacement for most image formats: PNG, JPEG or GIF. Even better, did you know that WebP enables new image optimization opportunities, such as support for lossy images with transparency? Yep! WebP is the Swiss Army knife of image formats.

So, how is this magic done? Let's roll up our sleeves and take a look under the hood.