Introduction to WebP

WebP is a new image format by Google.


As I have mentioned before, images account for about 60%~70% of web bandwidth. That is to say, image is one of the most important factor for web performance. WebP is superior to other image formats in some points.


WebP Features

Lossy and Lossless compression

PNG and GIF support lossless compression, JPEG supports lossy compression, but WebP supports both lossy and lossless compression. And it should be specially mentioned that WebP contains higher compression than other image formats.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller in size compared to JPEG images at equivalent SSIM index. via WebP - Google Developers

Transparency & Animation support

WebP also supports an alpha channel (like PNG) and animation (like GIF) with lossless and lossy compression.

WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels. via WebP — Google Developers

Browser Support

WebP is available on following browsers.

  • Google Chrome
  • Opera
  • Chrome for Android
  • Chrome for iOS

Firefox and Safari do not currently support WebP. But interestingly, Chrome on iOS seems to contain WebP decoder and is able to display WebP images!

Safari & Chrome on iOS

This means that WebP is available on every Android and iOS application that bundles a WebP decoder.


Falling Back to Other Formats

The <picture> and <source> elements

As you may know, the <picture> and <source> elements are a new way for responsive resource loading. The <source> element has a type attribute to specify the resource’s mime-type for supporting browsers, so we can make browsers load images which specified with them such as the following:

<picture>
<source srcset="image.webp 1x" type="image/webp">
<img src="image.jpg">
</picture>

In this case, a browser will load image.webp if WebP is supported, and load image.jpg otherwise.

WebPJS

WebPJS is JavaScript library which converts WebP images into a dataURI string on client-side.

Check Accept Headers on the Server-side

Browsers send Accept Headers with each request. Something like…

Accept: image/webp, image/png, image/jpeg, image/gif, image/svg+xml, image/bitmap

So, the server can choose images to return to browsers by checking whether the request header sent from the client-side contains Accept: image/webp or not. If it does not contain image/webp, we can make our servers return PNG or JPEG or GIF images which, may be original before converted into WebP ☺

I recommend you check the following resources.


Tools for WebP

cwebp-bin

If you want to convert images into WebP, you can get cwebp-bin which is Node.js wrapper of cwebp via NPM.

$ npm install cwebp-bin

Of course, a pre-compiled binary and the source code to manually build it are available from the official web site.

grunt and gulp

Integrating with Grunt and Gulp? grunt-cwebp and gulp-cwebp are also available via NPM.

$ npm install grunt-cwebp
$ npm install gulp-cwebp

WebPonize

WebPonize is a Mac OS application for converting images into WebP. It accepts PNG, JPEG, and animated (or not) GIF. If you are using OS X Yosemite~, you can download and use it easily. Just drag and drop!

I’m waiting for your feedback!

Show your support

Clapping shows how much you appreciated Shogo Sensui’s story.