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 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!