Images are a bulk of the load time for many sites. There are many techniques that can allow for less requests, such as creating CSS Sprites. While I believe these techniques are essential, clients will still have to download the images in the end.

Saving your images with Photoshop’s “Save for Web & Devices” doesn’t ensure that they are truly optimized. However, there are ways to get smaller images without quality loss.

“Lossless” images

Using optimization techniques, images can be optimized to smaller sizes without effecting their visual quality.

Yahoo! SmushIt and PunyPNG are two great services on the web that allow you to upload images and receive byte reduced versions.

Smusher

Using the above mentioned services requires manually selecting files and uploading them to the web. Thanks to Michael Grosser, we now have Smusher, a Ruby CLI for lossless reduction of your images.

Smusher will take an image or directory of images and process them through an image reduction service with just a single line in your terminal.

To install it, run the following:

gem install smusher

By default, smusher uses Yahoo! SmushIt, but also has to option to switch to the PunyPng service.

Usage

To process a directory of images, run the smusher command:

% smusher public/images --service PunyPng

To demonstrate the savings, I ran smusher on a Ruby logo found on Wikipedia:

smushing Ruby-(programming-language)-logo-2008.png
27416 -> 23544                           = 85%

Smusher saved us 15% on just one image. Multiply that by every image on your site, and you will have made your users a little more happy with faster page downloads.

.puny_png_api_key

If you are a PunyPNG service subscriber, you can store your api key for future usage by smusher.

Add a file named .puny_png_api_key to your home directory with your PunyPNG api key as it’s contents.

Use it

Smusher is a great tool that has been available for years and I feel is not really known to most web developers. Once you start using it, I truly believe it will be a part of your utility belt.