Technologist
Posted Aug 14, 2020
With webp compatibility finally coming to Safari 14, webp is finally going to start really taking off.
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality index.
Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.
– Google
Considering that you’ll likely be using the webp format significantly more in the near future, let’s make things super easy on ourselves and make batch conversion of jpg and png images as simple as possible by creating a service in Automator for MacOS' Finder. This service will allow up to right click on images and convert them to webp files that will be created right next to their original untouched source files.
Other options
Squoosh is a fantastic web based tool (PWA) that is fantastic at compressing single images but is unable to work with batches of files. For batches of files I found a drag and drop Mac app on the App store called Webponize but in my tests I found it to be too unreliable as it ended up badly distorting the webp images about 50% of the time.
Dependancy
You will need Google’s cwebp encoder installed on your Mac first in order for this to work. You can find download and installation instruction on the official webp site.
After you’ve installed cwebp and it’s available to you on the command line you’re ready to move on.
Creating the service
- After launching Automator from your Applications folder you’ll be prompted to select a new type of document. Select “Quick Action”.
- In the are marked “Workflow recieves current” select “image files”
- In the area marked “in” select “Finder”
- In the left pane of Automator, within “Library” select “Utilities”
- Within the next pane of choices select “Run Shell Script” and drag it over to the right pane.
- IMPORTANT in the new box created for “Run Shell Script”, in the upper right corner, in the area marked “Pass input”, select “as arguments”
- enter the following code in the large box and press
⌘-Sto save your new action. I’d recommend a name like “Create webp versions”.
The end result
Your Automator action should look like this when you’re done.
In action
After saving you will find your new action when right clicking on image files. It will be under “Services / Your saved action name”. Select multiple file as you normally would in Finder, right click, select your action and Boom! webp versions created using the original file names. Your webp files will be significantly smaller than your original source files. Hooray!