Make your own application to convert images to the webp format

One Google-recommended method for getting your website to load faster is to display its images in webp format. Images converted to this less well-known format almost always have a smaller file size compared to their more popular jpg or png equivalents. This reduces website loading times and provides the website users with a better overall experience.

There are a number of different ways to implement this webp format, the most popular of which is to use a plugin (eg. EWWW Image Optimizer or Jetpack) or an external service. However, an alternative method is for website content creators to generate their own webp images themselves on their computer before uploading them. 

Generating webp images on your computer

Needless to say, there are a number of computer applications available that can tackle the business of converting images to the webp format locally. For Apple Macs, these can be acquired from the Apple App store - see image below - but why add yet another potentially-bloated application to your hard drive, when you can create a simple webp-converter app yourself using Mac Automator.

Here, we describe a way of creating your own Mac Automator application that can be used to convert png, jpg, tiff, and gif images to the equivalent webp format quickly and efficiently. 

Others have described the creation of a Mac Automator quick action that can be accessed by CTRL-clicking or right clicking on the image that you want to convert and selecting the custom-made menu item. The method described here is very similar but instead generates a Mac application on your desktop that can be used to drag-and-drop images onto it to convert them in bulk.

Downloading the cwebp command line utility

First, in order to have a webp-converting engine in our app, we need to download the cwebp utility from Google. One of the easiest ways to do this on a Mac (and a Google-recommended method) is to use Homebrew. Of course, this does means that you have to have Homebrew installed on your computer, but any serious Mac user will likely already have it for managing software packages for other projects, and if not, then there is nothing wrong with installing it now!  

Assuming you have Homebrew installed on your Mac, open MacOS Terminal and type in the following: 

brew install cwebp

Once you have cwebp installed on your Mac, you should be able to convert images to their webp format using the command line. However, to make this process more user-friendly, we are going to make use of this cwebp utility via Mac Automator.  

Making the Mac Automator cwebp application

Open the Automator app on your Mac and choose 'Application' as your new document:

In the Library, scroll down to 'Utilities' and drag in a 'Run Shell Script' module into the main application window. Once there, change the 'Pass input' drop down menu to 'as arguments' so that each file that enters the cwebp application will be passed to the shell script individually. Finally, change the placeholder script that you get with this module to the one shown below:

for f in "[email protected]"

do

/usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp"

done

So what does the code mean? Well, the shell script consists of a Unix 'for loop' where it applies the line of code within the 'do' and 'done' statements to each of the 'arguments', in this case, files, that it receives. Breaking down the line of code within the do-done block, we have: 

Save the Mac Automator application on your desktop or wherever you want the application to be accessible.

Now, whenever you have a bunch of image files that need converting to webp, just select them all and drag and drop them onto your new webp converter application icon and watch them go.