Converting Images to WebP Format Using macOS Automator: A Quick Guide for Web Developers

December 16, 2024

As web developers, we’re always looking for ways to optimize our websites’ performance.

One significant way to improve load times is by using WebP images, which offer superior compression and quality compared to traditional formats like JPEG and PNG.

Here’s how to set up a simple right-click converter on your Mac using Automator.

Why WebP?

WebP images are typically 25-35% smaller than their JPEG counterparts while maintaining similar quality.

This reduction in file size leads to faster page loads and better Core Web Vitals scores – something both users and search engines appreciate.

Setting Up the Converter The process is straightforward and requires just a few minutes of setup:

Install WebP Tools First

you’ll need to install Google’s WebP tools.

Open Terminal and run:

brew install webp

Create the Automator Workflow

Open Automator (found in your Applications folder)

  • Choose “Quick Action” when prompted for a new document type
  • Configure the workflow to receive “image files” in “Finder.app”
  • Add a “Run Shell Script” action
  • Set “Pass input” to “as arguments”

Should look similar to this

Automator webp image convert

Add the Conversion Script Copy and paste this script into the “Run Shell Script” action:

for f in "$@"
do
    filename="${f%.*}"
    /opt/homebrew/bin/cwebp -q 80 "$f" -o "${filename}.webp"
done

Save your workflow with a name like “Convert to WebP”

How to Use It Image to WebP on MAC

After setup, converting images is as simple as:

  1. Right-click on any image in Finder
  2. Go to Quick Actions
  3. Select “Convert to WebP”

MAC Finder image to webp convert

The script will create a WebP version of your image in the same folder while preserving the original file. The quality is set to 80% (or 90%, whatever you prefer), which offers a good balance between compression and visual quality for most web images.

Pro Tips

  • The ‘-q 80’ parameter in the script sets the quality level. You can adjust this between 0-100 depending on your needs
  • The converter will maintain your original files, creating new WebP versions alongside them
  • You can convert multiple images at once by selecting them all before right-clicking
  • The conversion works with both JPEG and PNG files

Troubleshooting

If you get a “command not found” error, it likely means WebP tools aren’t installed correctly. Double-check that you’ve installed them via Homebrew as mentioned in step 1.

This simple automation can save web developers considerable time when preparing images for modern websites. Instead of using online converters or command-line tools manually, you now have a quick, right-click solution that integrates seamlessly with your Mac’s workflow.

While WebP support is now excellent across modern browsers, it’s still good practice to provide fallback options for older browsers using the element or by serving different formats based on browser capabilities.

Happy converting!

Wesbite Business Posts

LiveCanvas and WordPress tips and findings

Our journey with LiveCanvas so far has been quite interesting. We are enjoying it. Here are some quick tips we have found with the WordPress theme. Custom Post Type Options