This is the tutorial for optimising animations in abobe imageready. These other tutorials are also available:

Optimising gifs effectively can be difficult and may well result in a loss of quality which you find hard to accept. There are three strategies to deal with this:

  • Spend an appropriate amount of time optimising and accept that this is a compromise between quality and size.
  • Spend an appropriate amount of time optimising the image and post the compromise but also provide a link to the larger file with a message warning of the size.
  • Don't bother with the optimisation and just post a link, perhaps using a still image from the animation to give a flavour of the file.

It is important to remember that animated gifs are not intended to produce epic masterpieces or wonderfully smooth animation. 30fps animation is simply not an option and animations longer than four or five seconds have to be carefully put together to avoid an unacceptable file size.

Step 1 - Making the image.

These are a list of things to consider when making your animation.

  • Areas that stay static will not need to be reloaded in every frame so if the animation only takes up a small portion of the frame size (a waving hand or jumping kitten for example) then try to keep the rest of the frame absolutely stationary.
  • Areas of flat colour take up much less memory than areas of blended colour so consider replacing the background with a flat colour layer.
  • The more frames your animation has the larger it will be. Remember that to be funny an animation does not need to be smooth.
  • Fades in gif animations require a huge amount of information and should be avoided unless absolutely nessecary.

Step 2 - Resizing your image.

This is one of the key steps in reducing image size. Remember, anything larger than 280px wide will be too large to be frontpaged on b3ta and that plenty of images notably smaller than this have been frontpaged in the past.

The way to reduce the size of an animation is with the image size tool found in the image menu.


The image size tool in adobe imagready.

Try to reduce your image size as far as possible without losing the meaning of your animation.

Step 3 - Export optimisation.

The final stage of the optimisation process comes when you export the image. In imageready you control this using the optimisation palette.

The export palette in adobe imageready.

You already know the difference between the file formats so i won't go into this again. The lossy tool averages out pixels across your animation and is a quick way to reduce the file size however this is often at the expense of an unacceptable drop in image quality. I rarely use a lossy of more than 20-30 on animations.

The palette tools are the most important in terms of optimisation, often by reducing to 64 or even 32 colours you can get a perfectly acceptable looking image for a vastly reduced file size. The key to not losing is to choose an appropriate palette type.

The palette selector tool in adobe imageready.

By using the selective, adaptive and perceptual palette types the computer will automatically select the colours that best approximate your image for a given number of colours. They each do this using a different algorithm and so by testing each of these you may find that some give better effects than others.

Dither is what gifs use to approximate colours which are not in their palettes. This requires a good deal of information and thus can increase file sizes dramatically. I would usually have very little dithering on my animations and often none at all.

You can compare several different levels of optimisation using the 2-up and 4-up options at the top of the image window this will allow you to find the most suitable optimisation for your animation.

The image display selector in adobe imagready.

Good luck with your optimisation, if you have any further questions on the subject e-mail me and i'll be more than happy to attempt to help you.





| Home | B3ta | Me | Contact | Flash and stuff | Links |

Site design © Sam Cartwright 2004