Several jobs back, our development team discovered a little tool that’s become a crucial part of our workflow in optimizing every visual that ends up online for us. The tool is called ImageOptim, and it really does one thing, but it does it so well.
While I’m sure this isn’t a new find for many other fellow front-end developers, we still meet others who don’t know about it, so figured it was worthy of a post this morning.
ImageOptim is basically a collection of open-source tools for image optimization with a clean GUI dropped on top. Those open-source tools include MozJPEG, Pngcrush, pngquant, 7zip and Google Zopfli. ImageOptim can be used for optimizing PNGs, JPGs, and GIFs. It analyzes each image, and compares which tool will make the biggest impact on file size.
With the latest beta release, it also optimizes SVGs. I’m curious to see how that works, and how much it actually affects things.
The tool also removes file cruft that does not need to be present in web pages and eBlasts — things like EXIF metadata from digital cameras, embedded thumbnails, comments, and unnecessary color profiles.
ImageOptim: Lossless By Default
By default, it only optimizes images losslessly, meaning no quality degradation at all. This is how we keep it, but still see image file size drops. The results are mixed, but it seems to do best on optimizing PNGs, followed by JPGs and GIFs in terms of how much it can reduce file sizes.
While we never have used it to do lossy compression, I’m willing to bet it does a better job optimizing than say Photoshop’s default “Save for Web” exporting.
Complaints
The only downsides or complaints are really really minor. The first, when optimizing images — especially PNGs, the application can really spike CPU utilization and kick the computer’s fans into overdrive. This is expected though, as it’s doing everything it can do to calculate and implement optimizations into images.
The other super-minor complaint, is to fully optimize an image, you have to run it through multiple times to give every bit of compression out of a given image. It would be nice if it had a mode to fully optimize an image till it could crunch it down no more. This might only make complaint number one more of an issue.
Conclusion
The tool is free; as are the tools it utilizes. It’s a no-brainer for every front-end web developer — especially when using it in lossless mode. Why not make every image that goes online as small as possible?
While the tool is offered as freeware, the web page does ask for donations and a $20 donation is well worth the bandwidth and speed updates it offers.