Convert images to webp in Mac

How to add a conversion script to your Mac services (i.e. right-click menu) to convert any image to webp

Convert an image to webp without having to use the command line, or a webservice

About webp

What is webp?

WebP is an image format that seriously compresses your images while still retaining a high quality. The format was developed by researchers at Google, and thus, is supported in Chrome, along with Firefox, Edge, but notably, not Safari.

You cannot preview (i.e. Finder Preview) WebP images at the moment.

To convert images to WebP, Google released some command-line tools (cwebp), but no UI for conversion exists. Googling “convert to webp” will lead to plenty of web services, but I don’t feel comfortable uploading all my assets into a webpage with sketchy ads. Thus, I wrote a quick script for converting single or multiple images with a click.

Why not just automate this in your build?

Yes, you should automate image processing and optimization in your build (and that can include converting to WebP images), but I’ve found many instances where I want to convert a single image to see what it looks like, or to check the compressed file size and quality. I don’t want to have to run an entire build.

How to get cwebp as a menu item

1) Install libwebp

Easiest installation is through a package manager:

If you have homebrew: brew install webp
Alternatively, if you have macports: port install webp

In case you wanted to visually verify you typed it in correctly. 😁

If you want the uncompiled versions here: https://developers.google.com/speed/webp/docs/precompiled

Test that it works. Fire up Terminal and typecwebp and press enter. If you get command not found it did not install correctly.

1.5) Add the lib to your PATH

You may need to add the directory for these new packages into your shell config file, such as.bashrc or .zshrc.

To know what path to add, in Terminal or shell, you can run

which cwebp

which will both confirm that you have `cwebp` successfully installed, and tell you where it’s installed

Open up the file (using vim, emacs, or any text editor)

cd ~/.bashrc

and append the path that resulted from which cwebp to $PATH

PATH=$PATH:"/usr/local/bin"
export PATH

2) Make an Automator service

What you need in Automator to create the service

In the leftmost panel, click Utilities

Under Utilities, drag and drop Run Shell Script into the main window

Change workflow to “receives image files in Finder

Under the Run Shell Script, choose which shell you use (typically /bin/bash, or which shell you added the path to above.) You can find this out by typing echo $SHELL into Terminal.

Change “pass input as arguments.”

And then paste this into the Run Shell Script box

# why we had to add it to our .bashrc
# or whichever shell config file you added it to (.zshrc, etc)
source ~/.bashrc
for FILE in "$@"
do
 echo "coverting file: $FILE"
 EXT=${FILE##*.}
 QUALITY=85 # quality of output image (You can change this: 1-100)
 cwebp -q $QUALITY "$FILE" -o "${FILE/%.$EXT/.webp}"
done

3) Save it and add it to your Services menu

Save… and type the name that you want to show up in your secondary menu. This Automator service will automatically save itself in the right place in your file system.

You can add it to your Quick Actions by right-clicking on an image, and hitting Customize.. under Quick Actions

Then check the box to add it. Your action will be whatever you saved it as.

Test it out! Right click on an image and convert it. You should see a new image generated within a second.

Enjoy saving those kilobytes!