Image/Animation Optimisation

*important note*

Hoorah, with many thanks to 100% kitten, gimp users are now supported. Also thanks to claws of doom for his contribution which is well worth a read and gives a lot more detail on file formats than i have gone into here.

Blimey, in a fit of productivity i've just written the tutorials for macromedia fireworks as well. Looks like corel photoshop will be next or maybe paintshop pro.

- Sam Cartwright

Image optimisation is one of the areas which newer b3ta members struggle with most. This tutorial should prevent you from annoying those boarders who view he site over dialup.

Step 1 - How big should my files be?

For b3ta:

• Images need never be more than 50Kb
• Animations need never be more than 200Kb

But the general rule is that they should be as small as possible.

Step 2 - Which file format should I use?

This is one of the most important steps in this tutorial. The correct file format not only reduces the file size of your image but choosing the wrong format can make your picture look worse. There are two main file formats to choose from: .gif and .jpg.

For an animated file your choice is simple. If you wish to post to the board it should be an animated gif, else you should consider making a flash file (.swf).

If you are making a still image then the choice of format is a little more difficult and relies on understanding a little about the way the compression algorithms in image formats work. First of all allow me to give you some examples.

Chump.jpg - jpeg compression medium quality ~9Kb		Chumpcopy.gif - gif compression 128 colours full dither ~34Kb
Medusa.gif - gif compression 128 colours full dither ~7Kb		Medusacopy.jpg - jpeg compression medium quality ~39Kb

As you can see from these examples picking the wrong compression can lead to the file size being over double what it need be.

The top image is produced from photographs and images such as this will compress better as jpegs. If you want more information about why this is the case then click here.

The lower image was produced whilst doodling in MS paint and images made up of flat colours such as this will compress better as still gifs.

For more information about how the formats work Claws of doom put together this excellent guide.

| Animated gifs | Jpegs | Still gifs |

Thanks to Spoon for his advice and contributions to this section.