We will be using the WebP command line tool Provided by Google for outstanding image compression, with or without an alpha (transparency) channel. In this tutorial we target jpeg files, so transparency alpha is not used but this tutorial can easily be adapted to take png source files, which do allow use of an alpha channel.
WebP command line utility is available here:
https://developers.google.com/speed/webp/download
(N.B// we start by first renaming any *.jpg files to *.jpeg for organisational consistency)
Command list for Converting Images to WebP Thumbnails
I’m going to list all the commands we will use, in the sequence we use them, to first unify jpg and jpeg extensions, first create the destination directories each time and run the resize, crop and re-compress as WebP in that order, finally renaming the WebP files with the proper *.webp file extension. I’ve been deliberately verbose with the variables and directory names so that the code speaks for itself.
Sidebar on verbose code: This is a habit I got into when coding ObjectiveC for early iOS app development. Its an unpopular choice, although its starting to gain more and more traction. I wrote a separate rant / article about it here. Suffice to say, I favour longer code with explicit descriptions.
Later on we will be putting all this into a ‘Bash Script’ so we can automate all this in one go, from one command, launched from the folder containing the images you wish to (non-destructively) convert. When we do this, I’ll shorten each command and switch up the variable names to make it more concise. Also this will give you two different commands to compare that both do the same thing. When I’m learning I like to see different sources that achieve the same result so I learn the actual format of the syntax. You’ll notice that things like ‘flags’ --out , --cropToHeightWidth and -q do not change and must be typed verbatim. The commands like mkdir , cd , for , sips and cwebp also must be typed exactly as shown to create directories, change folders, loop through files, convert and recompress images respectively.
List of Bash Commands to manipulate images from the command line;
for es_file_name in *.jpg; do mv "$es_file_name" "${es_file_name%.jpg}.jpeg"; done
mkdir images-folder--resized-to--600px-max-width-or-height
for es_file_name in *.jpeg; do sips -Z 600 $es_file_name --out images-folder--resized-to--600px-max-width-or-height/$es_file_name;done
cd images-folder--resized-to--600px-max-width-or-height/
mkdir images-folder--cropped-to--500x500px
for es_file_name in *.jpeg; do sips --cropToHeightWidth 500 500 $es_file_name --out images-folder--cropped-to--500x500px/$es_file_name;done
cd images-folder--cropped-to--500x500px/
mkdir images-folder--re-encoded-as-webp--quality-30-percent
for es_file_name in *.jpeg; do cwebp -q 30 $es_file_name -o images-folder--re-encoded-as-webp--quality-30-percent/$es_file_name;done
cd images-folder--re-encoded-as-webp--quality-30-percent/
for es_file_name in *.jpeg; do mv "$es_file_name" "${es_file_name%.jpeg}.webp"; done
(Other Useful Image Commands)
for resizing to a specific height x width use:
for es_file_name in *.jpeg; do sips -z 1080 1920 $es_file_name --out converted/$es_file_name.png;done
- this will resize an image to HD video 1080p format
- but this will NOT maintain aspect ratio
- if your image was not already within a 16×9 widescreen footprint then it will appear squashed
- note that the height dimension comes first in the arguments of the command, which is unusual
for format change use:
for es_file_name in *.jpeg; do sips -s format png $es_file_name --out converted/$es_file_name.png;done
- this will actually change the format of the jpeg image
- the .png extension will be added at the end
- but the entire original filename will remain
- so it will create something like file.jpeg.png
- you might want to consider running three separate commands to convert, move into converted folder and then rename. Like this…
for es_file_name in *.jpeg; do sips -s format png $es_file_name –out converted/$es_file_name;done
cd converted
for es_file_name in *.jpeg; do mv “$es_file_name” “${es_file_name%.jpeg}.png”; done - this will take something like file.png outputting something like file.png into your ‘converted’ folder
- [GOTCHA!] … as always make sure you have run
mkdir convertedto create the ‘converted’ directory - otherwise BASH will try to output a file called ‘converted’ without an extension containing only one image
Other Useful Image Converting applications
https://imagemagick.org/script/download.php#macosx
You can install Image Magick, and its dependency ‘ghostscript’ on the command line using homebrew, by running;
brew install imagemagick
brew install ghostscript
Automate the Creation of WebP thumbnails using a BASH script
Lets create a script so that we can do all this with one command. Once completed all you need to do is navigate to the directory containing the source images, and run the script to create subfolders with down-res-ed, then cropped, then WebP compressed thumbnails
Adding a place for your BASH scripts
if you’ve not created any BASH scripts yet, you probably don’t have a good idea where they should live. I’m a great believer in organisation first to save later headaches when weeks, months or years down the line you want to quickly find your sexy scripts again… possibly in the middle of an attended job with clients breathing down your neck. I’d recommend storing all your PERSONAL BASH scripts in a freshly created ‘bin’ directory in your home folder.
cd $HOME
mkdir bin
now we can add this place to PATH enabling BASH to look for it there
PATH=${PATH}:$HOME/bin
export PATH
This means other users won’t have access to your scripts by default. But I believe that’s a good thing, because you often want to personalise the scripts you use. And you can always share the source code by cut and pasting it to a shared resource.
Or you can modify this and improve and feel free to add your own tutorial to the web. While backlinks are always appreciated, I’m not that fussed if you credit me or not as this is all just amalgamated useful tips and stuff I originally learnt online from other cool kids on the Stack of ‘O’ or their personal blogs… thank you whoever you are, when I have time i will go back through my plethora of notes and sort out a credit list and link back to them all ; – )
Create a BASH Script
First we navigate to the ‘bin’ folder we just created to keep this and all your future scripts in. The touch command is used to update the ‘last modified’ time on a file, but it has the useful side-effect of creating a new empty file if no file was found with that name. For editing scripts within the terminal window, I use ‘nano’, because I’m not a maniac.
(Only kidding you sage-like Masters of Vim, wherever you may be… I acknowledge your greatness!!)
cd ~/bin/ touch es-thumbnail nano es-thumbnail
Now cut and paste this:
echo "The 'Succulent' ES-Thumbnail Bash Script"
echo "========================================"
echo "This is an Energise Studios (es-) WEBP Thumbnail Image Creation Script. Script running… why not grab a coffee while you wait?"
for es_file_name in *.jpg; do mv "$es_file_name" "${es_file_name%.jpg}.jpeg"; done
mkdir resized
for es_file_name in *.jpeg; do sips -Z 600 $es_file_name --out resized/$es_file_name;done
cd resized/
mkdir cropped
for es_file_name in *.jpeg; do sips --cropToHeightWidth 500 500 $es_file_name --out cropped/$es_file_name;done
cd cropped/
mkdir webp
for es_file_name in *.jpeg; do cwebp -q 30 $es_file_name -o webp/$es_file_name;done
cd webp/
for es_file_name in *.jpeg; do mv "$es_file_name" "${es_file_name%.jpeg}.webp"; done
echo "The above code creates subdirectories first downsizing then square cropping and finally recompressing as WEBP for super low filesize web optimised images"
echo "Ahh yea! The script is donezo… finish up your coffee and let's build something cool ;-P"
Press [ctrl + x] to exit nano and press [y] and then [return] upon leaving when nano prompts you to save the changes you just made. Now let’s copy some test jpegs into the folder you’re currently in and lets run this bad-boy…
(you can use finder to copy them, I’m not one of those hardcore Mr Robot fan-boys that will look at you disparagingly if you don’t use the command line at all times… although I do use the ‘homebrew’ theme on my terminal window… I mean, come on… that’s just plain stylin’ innit?)
Once the files are moved over, (like 5-10 images only for testing,) you can run:
bash es-thumbnail
- check it worked okay
- delete the images
- don’t worry, next we’re gunna make it so you can run this anywhere
Making it executable and adding the ‘shebang’
Calling your script without making it executable will result in the following error…
./es-thumbnail
-bash: ./es-thumbnail: Permission denied
So we first make the file executable using:
chmod +x es-thumbnail
Now to create the ‘SheBang’, (all will become clear,) we need to find out where BASH is physically on your drive, run:
which bash
which probably gives…
/bin/bash
prefix with #! and place it at top of the script, (very first line)
nano es-thumbnail
now arrow key to the top of your ‘es-thumbnail’ Bash Script text file in nano and cut and paste:
#!/bin/bash
(the above line assumes that which bash returned “bin/bash” as the location, if it was different then use `#!/what/which/bash/returned` instead)
Hit Save again in nano by pressing [ctrl + x] to exit nano and press [y] to save changes and then [return]to confirm. Your script file is updated and you’re ready to rock. Now you can call your script from inside any image directory and it will do its thang… just by typing es-thumbnail … have fun!
Coding Style Guide for Companies that Want to Save on Development Costs
