Reducing image file sizes on your website can bring tangible performance gains and I’ve always been uncomfortable entrusting image optimisation to Photoshop and Fireworks, without knowing how capable either program really is at the job.

Image optimisation

Of all the optimisation tools I’ve tried, Smush.it is the fastest and most effective. Yahoo! have been led the way with their excellent Exceptional Performance series, and Smush.it is a really nice addition to the YSlow toolbox.

You may be surprised at how much smush.it can shave off your page weight, and any saving this easy to make has to be worth doing. If you don’t already have it installed, download YSlow, select Tools, then click the ‘All Smush.it’ link.

Shrink JPG, PNG and GIF images (the original image size must be below one megabyte) without losing any loss of visual quality – the tool is completely lossless. There’s even a Smush.it WordPress plugin.

Smush.it locally hosted files

One caveat I’ll make to its ease-of-use is that Smush.it is (unsurprisingly) unable to work its magic on locally hosted sites, which may be a problem for developers who develop on a local webserver before publishing to a remove site.

A simple method to sidestep this (without having to upload each image separately to the Smush.it site) is the following (using FileZilla):

1. Upload your images into a temporary directory on your web server
2. Drag to select all files and choose ‘Copy URL(s) to clipboard’
3. Create a blank HTML file within your temporary directory and paste the URLs into its body
4. Bulk replace the filepaths with ‘<img src=”‘ and append ‘ />’ to each line
5. Visit your newly created HTML page in Firefox and use the YSlow Smush.it tool to optimise all images
6. Download your optimised files as a zip and drag to replace your unoptimised files

Tags: image editing, optimisation