Image Optimization

How to get the best from your images

This seems to be a common problem with a lot of people. How to get the images to a reasonable size for the web, yet still have them large and clear enough that all the details can be easily seen.

First, make sure you understand, there is a big difference between an image's physical size, and the file size.

Here is a pic of a strange looking guy wearing funny colored shorts, and tights. Pretending to fly-fish, no less!
Anyway, all three images are exactly the same dimensions. 320x240 pixels.

*Image 1 is 28 kbs (top left)
*Image 2 is 22 kbs (top right)
*Image 3 is 11 kbs (bottom left)

Here's How I Did It

Firstly, using Macromedia "Fireworks". I opened up the original image(it was 90kbs, and far too large for use on a web-page). I then used the File/Export preview to see how far I could reduce the image without too much quality loss.

The first pic was reduced from 100% to 80%, and gave me the 28kb image. Then the next time, I reduced to 70%, and got 22 kb file size. Acceptable, but it could be smaller.

the final one was reduced to 50%, and is only 11 kbs in size. The quality is lower, if you look closely, but certainly it's more than acceptable for the web. It's a trade off between file size and quality.

Exactly the same thing can be achieved in Paint Shop Pro, if you have it. Open the image in PSP, and use File/Export, and then select either the jpg, gif, or png Optimiser, depending on your file type.

Now, it's easier to use the wizard button, than do it setting your own compression. There is a slider for image quality, and you can flick back and forth between the original and optimized images. Very easy, and you will be suprised just how far you can go sometimes, whilst still keeping a good looking picture.