Optimise your pngs from the terminal in OSX

As the CTO of Clock, frontend isn't something I do much of, but when I get an email that a site of ours has gone live I always push it through Google Page Speed. Most of the time the team have done an amazing job to ensure that all images, and other assets, are optimised correctly. Sometimes in a rush to hit a deadline it does get overlooked. Fortunately running the site through Page Speed pushes out a medium level warning saying you could be saving a gzillion bytes if you compressed your images.

If you find yourself in the this position, this single line of commadfu can make things a little better.

Once you are setup you can run this to shrink all the PNGs in your project.

Setup

First run terminal using spot light: cmd+space terminal

Then you'll need homebrew

ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"

Once brew is installed, install optipng

 brew install optipng

If you are on a Debian flavour of Linux you can do:

 sudo apt-get install optipng

Now you need change your working directory to the base directory of your images

 cd ~/development/MyProject/public/images

Command Fu

Now use the find command to find all the pngs in your project. In my node.js project all the pngs are in the ~/development/MyProject/public/images directory.

 find . -name "*.png" -exec optipng -o7 {} \;

Commit

If you have your project in git, make sure you commit your updated pngs

 git commit -am 'Compressing pngs'

That is it!

This doesn't replace the need to produce well optimised assets but is a simple safeguard that any member of your team can do. See Optimize Images from the Google Page Speed Services for more information about image compression.

JPEG

PNGs are lossless so this operation doesn't change how your images look. You can also use a simular tool for jpgs. WARNING: If you start changing the compression level of jpgs you'll get a lot of angry designers on your back.

 brew install jpegoptim

Install on Debian/Ubuntu

 sudo apt-get install optipng

Then you do a dry-run:

 find . -name "*.jpg" -exec jpegoptim -m60 -o -p -n --strip-all {} \;

If you're happy with the dry-run you can run it for real.

 find . -name "*.jpg" -exec jpegoptim -m60 -o -p --strip-all {} \;

GUI Based

Imageoptim is a nice GUI tool that chains images through a number of compression tools and does a great job getting the file size down.

Once installed you can either drag images onto the main window, or you can use find again:

 find public -name "*.png" -exec open -a ImageOptim.app {} \;

This tool gives the best compression we have found.

Automate?

There is debate whether this should be added to the build process. Designers creating the images should be considering image optimisation as part of their workflows and automating means the human attention to detail can be overlooked. I have seen both work but ultimately believe that the teams should self regulate this process.