ImageOptim

Posted on December 27, 2011

Over a year ago I came across a small but extremely useful tool that I’ve been using in my workflow ever since. The tool is the image compression application ImageOptim. This free Mac app compresses pngs, jpegs and gifs and is particularly useful when designing for the web as it helps to considerably reduce the size of image assets on your web projects.

You may be thinking “I already know how to export for the web using Photoshop, why use yet another tool?” Unfortunately, Photoshop does just an OK job at compressing images for the web and it doesn’t fully optimize them. ImageOptim finishes the job and makes sure images are fully optimized. With the increase of mobile device browsing it’s extremely important that our websites are as lean as possible and image optimization is a good start.

Using ImageOptim is very simple. First save for the web using your favorite image editing tool; in my case I use Photoshop.

Then all you need to do is open ImageOptim and drag the image from Finder to compress it. That’s it. Your image has been optimized. Also, you can make sure it has been completely optimized by clicking the “Again” button.

Image Optim

Image Optim

An even easier way to use ImageOptim is by using Finder’s toolbar. To do this go to your Applications folder and drag ImageOptim to your Finder’s toolbar.

Image Optim

You’ll notice the ImageOptime icon is now on the toolbar. Now you just need to drag the image from Finder to this shortcut.

Image Optim

If you would like to know more about how this tool and PNG compression work I would highly recommend reading this post by ImageOptim’s developer Kornel Lesi?ski.