About Archives Search Tags


Sips

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.

  1. cd changes directories. Much like clicking to open folders.
  2. pwd Print the current directory. This tells you where you are.
  3. ls List the contents of the current directory
  4. open . Open the current directory in the Finder.
  5. touch Make a new file.
  6. cp Copy a file or directory
  7. rm Delete 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.

Funny DogFunny Dog

Go grab an image of your choosing, and download it. Saving it to your Downloads folder would be best for this exercise.

The basics

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.

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.

Now type 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 cd. Type 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.

Type 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.

Resize it

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

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!

Posted on 3/9/2017






← Next post    ·    Previous post →