Introduction to WebP

WebP is a new image format by Google.

3 min readMay 3, 2015

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 the following browsers.

Chrome, Chrome for Android, Chrome for iOS
Edge
Opera
Firefox (65~)
Safari (14~)

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!

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

Safari once tried to support WebP, but dropped support, unfortunately. I wish WebP is supported on any platforms, tools.

Updated on 2019/02/01: Firefox 65 will support WebP!

Updated on 2020/08/11: Safari 14 will support WebP finally!

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 that converts WebP images into a data URI string on the 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, maybe original before converted into WebP ☺

I recommend you check the following resources.

Deploying WebP via Accept Content Negotiation — by Ilya Grigorik
Faster, smaller and more beautiful web with WebP — by Ilya Grigorik
Deploying New Image Formats on the Web — by Ilya Grigorik
igrigorik/webp-detect—WebP with Accept negotiation by Ilya Grigorik

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 macOS application that converts images to WebP. It accepts PNG, JPEG, and GIF. If you are using macOS High Sierra or higher, you can download from the App Store. Just drag and drop images!