home
My tutorials useful or interesting links contact me
About me My b3ta work Other things i'm involved with

 

Image/animation optimisation

 

*note*

Software covered in these tutorials:

  • Photoshop/imageready
  • fireworks
  • Paint shop pro/animation shop
  • The GIMP
  • Ulead Gif animator
If you have a request for additional software you wish to see covered then e-mail me.

Image optimisation (or optimization for the americans amongst you) 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. Whilst the tutorial is designed with b3ta in mind it also aims to provide you with skills useful in other we work you may be doing.

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.

an image to show the advantages of the jpeg file format.  
an image to show the disadvantages of the gif file format

Chump.jpg - jpeg compression medium quality ~9Kb

 

 

Chumpcopy.gif - gif compression 128 colours full dither ~34Kb

 

an image to show the advantages of the gif file format  
an image to show the disadvantages of the jpeg format.
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. This almost invariable includes screenshots of anything other than computer games.

One other important thing to note is that jpg compression is especially poor for images containing text. The letters lose their consistency and so become far less readable even at comparatively high qualities. If text plays an important part in your image i would strongly suggest using a gif file.

For more information about how the formats work and why the above is the case Claws of doom put together this excellent guide.

| Animated gifs | Jpegs | Still gifs |

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

 

Creative Commons License
This work is licensed under a Creative Commons License.

Site optimised for the Mozilla Firefox browser at 1024x768 or above.