Converting images into WebP

Hello Fediverse. I’m going to share with you how to use the command line on macOS to convert images. This is a little adventure for a complete novice trying to use the Terminal. And thank godness, I made it. I write this post in case anyone out there might be in need.

I’m not sure if anyone would notice, this blog loads kind of fast. This site is not using any web fonts, icons, or JavaScript. I intend to create a bare bones website with the fundamentals—text, lines, and white space. Nothing more. No graphical elements will be used—aside from the logo, of course. I hand-coded the whole thing using raw HTML and vanilla CSS. I’ve only used a little bit of PHP for server side includes. Not gonna lie, I admit it’s primitive and it becomes a chore when I update everything manually.

Background

Since I started blogging for a year now. I’ve written more than a hundred blog posts. Some of the posts are review of games, which include quite a number of images. For hosting storage, I’ve got 1GB of free space available. And judging by my usage, there’s a long road ahead for me to be able to get close to the limit. But I want performance. Wouldn’t it be cool if my webpages loaded faster and were more lightweight? So, I looked for modern image formats: WebP, and AVIF.

According to Can I Use, WebP is widely supported in most browsers. But for AVIF, MS Edge is not supported yet. Not to mention there aren’t enough tools available for editing AVIF or converting it. I did have every intention to stay away from Google, but, you know, an image format won’t do much harm, I guess? When AVIF can have better support, I’ll be sure to jump ship.

Long story short, after some struggling over which image formats I should use, I settled on WebP. And after fiddling with using GIMP for converting images, I gave up. Instead, for such a boring task, I decided to actually learn how to use the command line properly.

Running the script

I will try to keep everything simple and brief. So, let’s get on with it. I have already installed Homebrew on my mac. If you haven’t, head to their homepage and follow instructions to install it by copying and pasting the script into the Terminal. But for me, after I updated macOS to Ventura, I got stuck.

brew update
Warning: You are using macOS 13. We do not provide support for this pre-release version.

So, I searched Stack Overflow for answers. It looks like the Command Line Tools for XCode were outdated. Again, I followed the instructions to update them accordingly.

xcode-select --install

It kind of works. After that, I looked up the docs for WebP. Homebrew already includes the cwebp. So, I simply typed cwebp and pressed return in the Terminal to see if it was installed. It did. Splendid.

cwebp -q 80 image.png -o image.webp

Then I took a look at the example in the docs. It was kind of literal. Even I, who am stupid, understood that the -q 80 is for image quality and the file extension .webp. But it is only for converting a single image. Not to mention, the example code snippet doesn’t even have a file path. Ugh. I’m not on Windows anymore, how am I supposed to get the Pathname on my mac? Good question.

I searched again, but it turned out to be quite simple. Open up Finder and press Option + Command + P. The Path Bar will be shown at the bottom of the window. Then right-click on it and select Copy. It’s as simple as that!

I was about to crack open a bottle of champagne to celebrate when I realized—oops! I can’t run the script by just changing the Pathname. Aha. Then I searched again until I read this article. It contains a script for converting multiple images in a folder. That’s exactly what I wanted. It looks like everything is now ready.

`for file in /Users/jw/Desktop/webp/*; do cwebp -q 90 "$file" -o "${file%.*}.webp"; done`

It works beautifully. But, there, I’ll try to break it down a little bit to actually understand it. First, there’re two “backticks” for quoting the whole line of script. I’m guessing it’s similar to the opening and closing tags in HTML: <p>some text here</p>. You can type it out by pressing Option + ~ on your keyboard. Then we have to tell the computer to locate the directory of the images—we did that already. And for the *, apparently it is a universal selector to select all image files in the folder. I think that explains the first part of the script.

For the rest, we use do cwebp, which is an image encoding command for compressing images. The following section of the script -q is for manipulating the image quality that we desired. I went for -q 90. And the last part, we define a variable called $file. For which -o is a command for specify the file name of the output. "${file%.*}.webp"; save all images with the same filename but with the extension .webp in the same folder.

Wrapping up

That’s pretty much based on my poor understanding of using the command line. But, you know, that’s the first time I tried doing that.

As mentioned above, I converted images at a quality of 90. I’m too lazy to do any math. But it was around 30-40% of the file size reduction, sometimes even more than that. I compared the WebP image to the original file, and I can hardly tell any difference between them. And when I zoomed in to 200%, only a very subtle amount of pixel shifting occurred. I also tried to convert a .png image with very light text copy. It shows a significant amount of compression in file size without compromising the image quality. That’s quite impressive.

This is my attempt to try using the command line for real and sharing the process of how I tackle it.

Automator script

We can even take it one step further by creating custom scripts in macOS Automator. Follow the instructions written by Bradley, and then we can convert images by simply right-clicking an image. And Yay! That can save us a lot of time. It’s magic.

for file in "[email protected]"
do
/opt/homebrew/Cellar/webp/1.3.0/bin/cwebp -q 90 "$file" -o "${file%.*}.webp"
done

Notice I’ve updated the Pathname pointing to the cwebp folder in Homebrew. Since we might have different versions of Homebrew and its packages, you might want to update the path as well. You can type in the following command to get the Pathname for where cwebp is installed.

brew info webp

The option that we created “Convert to WebP” is in the right click menu “Quick Actions“. Please note that the action will prompt an error message if there’s already an WebP file with the same file name.

That’s all for now. I hope I’m able to learn more useful scripts that can help me save some time in the future.

This is #Day95 of #100DaysToOffload.

Footnotes

1. For bookkeeping, the hosting fee is about USD$45 per year. And the domain fee would be USD$2 for the first year. The following year, USD$12. ↩︎
2. Despite the fact that WebP is their child, it appears that Google is attempting to promote AVIF as well. So, I’m sure the day will come. ↩︎

---

• Reply via Email: [email protected]
• Comment on Mastodon