A great deal of my time working as a web/UI designer is spent exporting and/or converting images for software products and websites. Although a lot of modern applications can render image conversions at build time, a custom conversion is sometimes requested for an image to be set as webp
.
You could download one of the many native apps from the Mac App Store to do this for you - but why not create your own script and run it with a simple right-click directly inside Finder? Let's do just that!
Important!: As of this time of writing, the official libwebp
package release is libwebp-1.2.1-mac-10.15. If this has been updated since then, change the command below to match that of the proper release version.
libwebp
package to your Downloads folder: developers.google.com/speed/webp/downloadcwebp
folder to our /usr/local/bin
directory:sudo cp /Downloads/libwebp-1.2.1-mac-10.15/bin/cwebp /user/local/bin
/usr/local/bin
directory doesn't exist, simply create it by running: sudo cd /usr/local && mkdir bin
Open the macOS Automator from the Applications folder
Select Quick Option
from the first prompt
Set "Workflow recieves current" to image files
Set the label "in" to Finder
From the left pane, select "Library > Utilities"
From the presented choices in the next pane, drag and drop Run Shell Script
into the far right pane
Set the area "Pass input" to as arguments
Enter the following code below as your script and type ⌘-S
to save (name it something like "Convert to webp")
for f in "$@"
do
/usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp"
done
For visual reference, it should look something like this:
{% cloudinary /public/images/automator.webp alt="Automator quick action" %}
And when right-clicking an image file in the Finder window, it should now give you the option to convert:
{% cloudinary /public/images/automator-2.webp alt="Right click to convert to webp" %}
If you ever have the need to edit this script (for example, changing the default 85
quality parameter), you will need to navigate to your ~/Library/Services
folder and open your custom webp Quick Action in the Automator application.
Simple as that!