I wrote briefly about using the MacOS Terminal and the
sips command to resize images in my post on Carrd the other day. Perhaps it was too briefly.
Consider this an intro to the MacOS Terminal, and a primer on how to use
sips to scale an image down.
What is the Terminal?
Every computer has a command line interface. This is not new. Before graphical user interfaces, people used computers exclusively by typing in a “shell”.
MacOS is built on a flavor of linux, and it has something called a bash shell. You don’t need to know the details on any of that, but look it up if you want to dig deeper.
What can I do in the shell?
Everything you can do with you GUI, and more. Batch processing files is a snap with the Terminal.
Isn’t it dangerous?
If you’re not careful you can delete files accidentally with the
rm command. Most of the really seriously dangerous configuration changes need a super user’s password. So it’s hard to mess anything up there. Just avoid
sudo until you have more experience.
And be careful before you delete anything.
The first seven commands
There’s only seven commands you really need to know when using the terminal. Once you get to know these seven, you’ll be flying around the computer and will have enough knowledge to figure out what other commands you’d need.
cdchanges directories. Much like clicking to open folders.
pwdPrint the current directory. This tells you where you are.
lsList the contents of the current directory
open .Open the current directory in the Finder.
touchMake a new file.
cpCopy a file or directory
rmDelete a file of directory. There is no undo, be careful.
The Command Line Power User tutorial from Wes Bos is pretty solid for a great overview of the basics.
We’re going to use the tab key in conjunction with these commands. Tabbing is an auto-complete. You’ll see.
Resize an image with sips
I’ll walk you through the terminal and how to find and resize an images.
Find an image
Unsplash is usually my go-to when looking for an image to use for a project. They provide free, commercial and royalty free images. You don’t even need to credit the photographer, but I think it’s nice to do so, personally.
All photos published on Unsplash are licensed under Creative Commons Zero which means you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing attribution to the photographer or Unsplash.
For this tutorial, I used this image from Braydon Anderson because I thought it was funny. The original image is 6000 × 4000 pixels and 11.3 MB. That is a large image, both in terms of width x height and file size.
I’ve been trying to reduce my possessions, and carbon footprint over the years. This includes my online footprint too. See sustainable UX for the why and how’s.
Here it is in-line, after “sipping” it down to 1024x682 and reducing its quality to 50% making it just 53K. That’s a huge difference in file size.
Go grab an image of your choosing, and download it. Saving it to your Downloads folder would be best for this exercise.
You’re going to be learning how to do some command line tricks. These have no undo, so let’s keep the original file safe, for when we break something.
Open a Terminal. I use spotlight to open apps, it’s the fastest. Hit Command + Spacebar at the same time, and type terminal, then enter. The more you do this the faster you get of course. Also the computer will learn and predict what you’re trying to type.
pwd to see which directory you’re in. Called a Path in terminal speak.
You’re likely in /Users/yourUserName. If not, walk away from your computer, grab the nearest weapon and flee your home. Just kidding! If you’re not in /Users/yourUserName just type
cd ~ and it’ll put you there.
ls and read what directories and files are in your User folder. You should see Downloads as a folder listed. Type
cd Downloads and you’ll enter that directory. Type
pwd again, just to be sure.
You can type
cd .. to move up a directory. That’ll put you into the User Directory again. Do that now, please. We’re going to repeat this in order to get the hang of
ls to see the contents of your User Folder.
Let’s go back into Downloads, with style. Now type cd D then hit tab. Your Terminal should sort of flash, and nothing happens. Now type
cd Do and tab. Again, you should see the flash, and nothing else. Next try
cd Dow and then tab. Now we have it. Did you notice that the Terminal auto completed your command? This is really helpful to save time typing long file and path names.
This didn’t work with cd D and cd Do as there are two directories that start with “Do”; Documents and Downloads. In fact if you also have a directory named Downtown or anything else that starts with “Dow” it wouldn’t have worked until you typed enough info for the computer to know exactly what you meaning. You’ll get used to this, and love it over time.
ls and you should see a list of all the things in your Downloads directory.
Make a backup
Let’s keep the original file safe. We’re just going to copy the original file and rename the new one. We’ll need the
cp aka copy command.
cp yourImageName.jpg foo.jpg
Now we’ll be modifying the foo.jpg image, so we don’t damage the original.
OK, on with the show. Do yourself a favor and get some help. Type
sips —help. This lists the help file for the sips command. You can get help on any command, it’s very … helpful. I’ll get my hat and show myself the door.
Look towards the bottom of that list of commands in the sips help. See the -z and the -Z? Those are for resampling aka resizing. The Capital Z lets you resize the width, and the height will stay proportional. Which is good for our use case here. Remember the -Z.
Sometimes help doesn’t tell the whole story, however. That’s why there’s
man for Manual. Looking at the Manual, we can see that the sips command can accept a –setProperty flag with options/values. We’re going to set the imageQuality flag with a 50% value. This will reduce the quality of the image by half, and also reduce the size on disk quite a lot.
Here’s the magic:
sips -Z 1024 --setProperty formatOptions 50 foo.jpg
If you look in the Downloads folder and select the original file and hit Command + i you’ll get an info window. See the image size and size values. Do the same for the newly “sipped” file. You should see quite a difference.
##Video walk-through vimeo.com/207918998
You’ve learned a little about the Terminal, how to find good images, and save on bandwidth and thereby carbon footprint of the internet. Go you!