Converting images to use Google's webp format

We’ve recently starting using <picture> elements on some of our sites to serve images in webp with a fallback of jpeg/png format. Google has a command line utility which makes converting images very straightforward once you have it set up. Here’s a quick runthrough what I did to get this working on my computer.

First of all you will have to install the official Cwebp Command Line Encoder. I installed it using Homebrew (if you don’t have Homebrew you will have to install it first). To install the encoder run brew install webp in your terminal.

So onto actually converting images, you’ll want to run something like this:

cwebp -q 100 old-image.png -o new-image.webp

• cwebp calls the encoder
• -q 100 sets the quality of the webp output, this is on a scale of 0 to 100
• old-image.png is the source image/the one you want to convert
• -o new-image.webp sets the destination of the output, here you can define the name of the new file

There is a lot more that you can do with this tool. I just wanted to do a straight conversion from jpg/png to webp. Refer to the documentation to see what else you can do.

Thanks to this article from Smashing Magazine on converting images to webp for showing me how to do this.