LossLess Theme Image Optimization with ImageOptim

I used to think that exporting images from Photoshop for web and devices produced optimized images ready to use in my production sites. Sure, there are optimization techniques you can use for PNGs and JPEGs that I would need to incorporate. But, since Photoshop is considered one of the best imagine editing programs on the market I expected it would do a fantastic job exporting images.

I’ve since learned there are a number of techniques for producing smaller file sizes without compromising quality that Photoshop doesn’t use. For example, 8-bit PNGs with alpha transparency. On the advice of Nathan Smith I’ve started using ImageOptim to losslessly compress my theme images.

Why Smaller Images Matter

If you aren’t sure why using smaller images is better here are a couple reasons to consider.

  1. Smaller files are less to transfer for the sender and receiver. This means using less bandwidth to serve the site and the receiving browser receives the site faster to load it faster.
  2. Smaller images take up less room in memory. With the rise in use of mobile devices with different memory constraints, using memory more efficiently is a good thing.


![ImageOptim]({{ site.url }}/media/images/screen-shots/imageoptim.png)

Using ImageOptim is simple. You just drag and drop images onto ImageOptim or it’s icon on the dock and it does the rest. Under the tools menu option you can select which tools are used to do the optimizations.

If You’re Not On A Mac

ImageOptim is a mac program which is what I use for development. If you are on Windows of Linux and are looking for a tool consider the web based tool Smush.it. Other than this I don’t really have a tool I can recommend. If you know of one please offer it up in the comments.