Introduction to WebP

WebP is a new image format by Google.

WebP Features

Lossy and Lossless compression

Transparency & Animation support

Browser Support

Safari & Chrome on iOS

Falling Back to Other Formats

The <picture> and <source> elements

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


Check Accept Headers on the Server-side

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

Tools for WebP


$ npm install cwebp-bin

grunt and gulp

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


Software Engineer in Tokyo, Japan.