Introduction to WebP

WebP is a new image format by Google.

Shogo Sensui
May 3, 2015 · 3 min read

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!

Image for post
Image for post
Safari & Chrome on iOS

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.

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:

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

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


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


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 is a macOS application which converts images to WebP. It accepts PNG, JPEG, and GIF. If you are using OS X Yosemite~, you can download and use it easily. Just drag and drop!

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store