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
cwebpcalls the encoder
-q 100sets the quality of the webp output, this is on a scale of 0 to 100
old-image.pngis the source image/the one you want to convert
-o new-image.webpsets 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
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.