Given recent speculation that Google may start considering page load speed as a search engine ranking factor, website owners and designers are going to be looking for ways to speed up their pages.

One of the easiest ways to speed up a web page is to optimize your images for the web. This is low-hanging fruit, especially considering how many sites are image-rich. But just how small can you make your images? I've taken a look at several popular image editing applications to see how they stack up.

To begin the test, I took the following image and optimized it in several applications. The original image is 142.5 Kb in size, excluding any preview thumbnails (enabled by default in Photoshop CS4/ Mac OSX 10.6).

Original Flower Picture: 142.5 Kb JPEG

For benchmarking exports, I chose a typical quality level of 70%, as this is usually a good balance between size and quality. The following examples are ranked in order of performance.

ImageOptim

First, I used an OSX application called ImageOptim, a drag and drop application for reducing image sizes. The program serves as a simple interface for several open-source tools. By default, the output is lossless, so it doesn't give us a huge amount of savings having started with the original high-quality image. We're going to have to be satisfied with some quality loss to further reduce our image size. ImageOptim offers a quality setting of 80-100% when using JPEGOptim, which is the toolset used to optimize JPEGs. Ideally, its best to use another program for major quality reductions, and save this progam for the final polish. We'll revisit this tool again before we're done.

ImageOptim: 114 Kb JPEG

Smush.it

There's another open-source technique for optimizing images, with similar results to ImageOptim. This is Yahoo's Smush.it, a web-based tool that is also included with Yahoo's YSlow Firefox add-on. This is also a lossless tool, hence the similar results.
Smush.it: 114 Kb JPEG

Photoshop CS4

Back to Photoshop. I saved out of Photoshop CS4 using the "Save As.." menu. Note this reduces the file size, but not in a way that is exclusively appropriate for the web. We can do better.
Photoshop CS4: Quality: 8/12, 55.5 Kb JPEG

This time I exported the image using the "Save for Web and Devices..." option. Now our compression scale is no longer 0-12, but 0-100%, similar to other image optimization programs. At 70% quality, we are getting smaller..

Photoshop CS4: 70% Quality, Save for Web, 42.5 Kb JPEG

Gimp

Next, I used a popular open source alternative to Photoshop, Gimp.
70% Quality, we've shaved off a few Kb.
Gimp: 70% Quality: 39.6 Kb JPEG

Fireworks CS4

Now we're getting down to some reasonable file sizes: Fireworks CS4 boasts some excellent compression numbers. At 70% quality, we've now cut the file size in half:
Fireworks CS4: 70% Quality, No Sharpening: 16.7 Kb JPEG

Photoshop CS4

I've discovered that Photoshop's "Save for Web.." option seems to scale its compression differently than Fireworks does (and frankly more sensibly). 70% in Photoshop doesn't appear to correspond directly to 70% in Fireworks. So I attempted to correlate the two pictures visually, and see how far I could bring the Photoshop quality setting down to in order to match the visual quality of the 70% Fireworks file above.

The result was a 40% setting in Photoshop:
Photoshop CS4: 40% Quality, Save for Web; 19.7 Kb JPEG


I thought it would be a good idea to check how well these two programs did, and run the resulting images through ImageOptim. Is there any more data we can squeeze out?

The results were interesting. ImageOptim was able to shave 16 bytes, off the Photoshop file, taking the 19,712Kb image down to 19,696Kb. Negligible- yes, but it indicates Photoshop still lets a few bytes of unecessary data slip through. The Fireworks file was unchanged by ImageOptim, so I'm going to assume it is as small as it can be.

The Basement

While the above settings are generally the lowest I would use on a detailed picture, if you're really looking to squeeze every last Kb out, you can compress further. This may be appropriate for a background picture or someplace where detail isn't so important.

In Fireworks, I took it down to 60% quality, with a smoothing setting of 5.
Fireworks CS4: 60% Quality, Smoothing=5: 11.5 Kb

Photoshop's basement is 10% quality, weighing in at only 10.9 Kb.
Photoshop CS4: 10% Quality, Save for Web; 10.9 Kb JPEG

Both are a little bit chunky, but I'd say the Photoshop version looks slightly better. However, I still found a few bytes to squeeze out of the Photoshop file. Even at this low quality level, ImageOptim was still able to remove 21 bytes from the file. As before, the Fireworks file is as small as it can be.

Conclusions

You should always optimize your web images so they are as small as possible. Photoshop and Fireworks have proven to be the most effective, especially when you are trying to keep a lossy compression looking as nice as possible. If you're using Photoshop, keep ImageOptim handy to strip off the unecessary data, regardless of the quality setting you have chosen.

Another advantage to these two programs is in regard to workflow. With each, you can keep a high-quality original image, and export web-optimized JPEGs, GIFs, and PNGs without destroying the original.

Also, I'm a little tired of looking at this picture.