The most effective way to speed up page load times on your site is to reduce the file size of the images. Images make up two-thirds of the total file size of an average web page, so it makes sense that cutting down images will result in the greatest savings to bandwidth and load times.

This step sometimes confuses web developers, who have the reasonable expectation that PhotoShop should optimize images as part of the Save For Web process. Unfortunately, that isn’t true: PhotoShop will often leave a significant amount of file overhead when exporting an image as a JPEG, GIF or PNG. We need to use a second tool to strip this binary information out, reducing the file size further without affecting visual quality. These savings can be anywhere from 5 to 80%, potentially turning a 50K JPEG that was already well-compressed into a file 30K in size.

Before trying for these achievements, we need to ensure that you’ve done a few things:

1. Make sure that you have saved the site’s images in the most appropriate format. These tools will only optimize what you give them: with the exception of SmushIt, they won’t change a photograph from a GIF to a PNG, even if the latter is a far better choice for file size.

2. Make sure that you’ve compressed the images first. These tools are “lossless” compressors: they create smaller image files by removing redundant bytes, not by reducing image quality.  Your major savings will continue to come from judicious use of compression; think of these new tools as a “final squeeze” to wring every last bit from your images.

3. Merge images as sprites where appropriate to reduce the number of HTTP requests.

4. Consider using CSS3 masks and filters to alter a web page image rather than PhotoShop; compressing the original image will usually result in greater file savings than trying to do so with an image that has been manipulated by a dozen PhotoShop processes. 

There are two means of optimizing web images after compression: online, or with a native application. Online tools are handy, but they are significantly slower than native applications.

Image Compression Applications

My preferred Mac tool for post-PhotoShop compression of image files is ImageOptim. The application is free, built on a number of well-regarded open-source tools, and has a simple drag-and-drop interface. I keep it open during my web development workflow: any images that are destined for a site are simply dropped into its window before being uploaded. You can also take entire image folders and drop them in for processing, making it perfect for established sites.

Online tools

• One of the first image optimization tools available as a web service, SmushIt is part of the Yahoo web services network. In a somewhat unusual twist, SmushIt will save some GIFs as PNG files if the file size savings are significant enough.

• JPEGmini is a new service that concentrates solely on photographic images. It’s also available as an application from the Mac App Store.

• TinyPNG delivers image savings for 8, 16, 24 and 32-bit PNG files while preserving alpha mask information.

Would you recommend other image compression tools for this list? .net magazine recently featured expanded coverage of compression tools, but if you have others, please add them in the comments below!