Automating Batch Image Compression on Mac OSX

If you publish content for the web you already know you should be keeping the size of your images down. Even if you meticulously ‘Save For Web’ in Adobe Photoshop there is always room for improvement.

ImageOptim is a great last step before publishing to the web because it goes the extra mile in squeezing out any unnecessary space. It’s also lossless so you won’t loose quality when it’s done. On average I typically shrink my images another 20% beyond Adobe’s best attempts and they still look great.

For a comparison of alternate image compression tools, see this chart.

Workflow

There are a few great ways to use ImageOptim; using the standard IDE menu, Drag/Drop or via the Command Line. Lets look at how to get the most out of two of these methods.

Drag/Drop (Basic)

ImageOptim supports a user-friendly interface that is perfect for designers. Simply drag the files/folders onto the window and it’ll take care of the rest.

Right-Click (Advanced)

I like to take it one step further since I’m always trying to speed up my workflow. Personally, I would rather right-click a folder to optimize its contents instead of taking the time to open the app, open the folder and then drag the selected files/folder onto the window.

So how can we do that?

Run ImageOptim as a Finder Service through Automator. Unfortunately this trick is OSX specific but it will allow us to right-click a file/folder and pass the contents to the image optimizer.

Install ImageOptim

  1. Make sure to download/install ImageOptim from http://imageoptim.com/.
    For me, the content was in a zipped .tbz2 file which I unzipped and put in my Applications folder.

Setup the Service on Mac OSX using Automator

  1. Open Automator.app. I found mine in the ‘/Applications/’ folder.
  2. Inside Automator go to File > New, then choose “Service” for type of document.
  3. Change ‘Service receives selected’ to: ‘files or folders’ in ‘Finder.app’.  (By default you should see ‘text’ in ‘any application’)
  4. Under ‘Actions/Library/Utilities’ drag ‘Run Shell Script’ into your workflow window. (You may need to Show Library if this panel is hidden. Searching for ‘Run Shell’ will also show you the Action)
  5. Inside the ‘Run Shell Script’ window set the ‘Shell type’ to “/bin/sh” and Pass input to “as arguments”
  6. Set the shell script contents to:open -a ImageOptim “$@”
  7. File > Save your workflow. (The name you give your file will be the name that appears in your Services menu)
  8. If your file is in the following directory it should now be accessible by right-clicking a file/folder in the Finder.app:{username}/Library/Services/{filename}.workflowIf not, opening the {filename}.workflow file should prompt you to install the Service.
Screenshot of final service workflow

Conclusion

Crushing extra space out of your images will always provide for a better user experience. While setting up a service seems like a lot work it’ll save you tons of time in the future.

Enjoy!

×

Comments are closed.