Software, Technology

How-to: Optimising animated GIFs using GIMP

Optimise Animated GIFs using GIMPPreviously, I ran through preparing an animated GIF for use as a web banner ad. What I neglected to mention was the part of the brief that restricted the file size. While animated GIFs for banner ads come in standard size, trying to get these images all under a certain file size can involve a lot of trial and error.

Keep in mind each ‘frame’ of the animation starts out as a layer in the master graphic. Unlike static GIFs, which are saved “flattened” to a single layer, the animated GIF needs to keep its layering to work; the extra layer data bulks up the file size. So how do we reduce it?

Fortunately GNU Image Manipulation Program (GIMP) has extra tools to help out.

Before I save my edited and layered GIF as an animation, I optimise the file using a special filter: select Filters, Animation, Animation Optimize. This creates a new image in a new window, using a different mode than the original.

Animating GIFs provides for two different modes for every frame of your animation. You can either use the replace mode (default), which entirely replaces each frame with the next in sequence, laying each on top of the stack. The other is the combined method. Here, the new frame is added to the previous frame. That way only the changes between frames need to be updated. That’s what animation optimize does. The file size becomes much smaller. Now we need to index the colour palette of the image using Image, Mode, Indexed function (or press Alt+I).

The trick here is to find the smallest colour palette, using the fewest colours possible, preferably without dithering (using intermediate colours to smooth out the colour range).

Both the number of colours and use of dithering will enlarge the file size dramatically. This works well for GIFs using areas of flat colours. The trouble with reducing colours and dithering is that any rich colour, photographic images will end up looking like an impressionist painting done by an artist wearing mittens.

For my client’s banner ads, I used no colour dithering and generated a 128-colour palette. This generated a file size of about 41kB. Which would be fine, except my limit was 35kB. Reducing this to a 96-colour palette dragged it under the limit to 34kB but the image was on the ragged edge.

The Image, Mode option allows you to convert from RGB palette (a much more flexible format), down to Indexed palette (GIF native format) and back.

When you edit the content of GIF frames, make sure the image is set to RGB format; many GIMP filters and tools either don’t work, or work badly in indexed mode. GIMP converts RGB images to indexed format when you export them as a GIF file, but the results are far more predictable and useful if you do this yourself manually.

Converting back and forth between Indexed and RGB creates or loses the indexed colour map. If you introduce new colours while editing and export to an indexed GIF using the default settings, GIMP creates a new colour map. If GIMP has to reduce the colour map to a smaller number of colours, it often makes a best guess; some of the old colours may be dropped or approximated to some other colour, which can severely degrade the image quality, leading to hard, jagged colour edges and oddly stilted finished images.

You can control the colours if you first export the colour map to a separate palette file, convert the image to RGB, then when you export, explicitly convert  the image to indexed using the saved colour map in this palette.

As a final note, the GIF format indexes a maximum of 256 colours. Mix images with more than this number and all bets are off; the combined colour maps can mix down to one very strange palette indeed. RC

Find further information on the GIMP project homepage where there are more detailed tutorials:

Related: How-to: Animated GIFs using GIMP

About Robin Catling

Robin Catling gained degrees in both arts and technology which led to a diverse portfolio of employment. A freelance systems analyst, project manager and business change manager for the likes of American Express, British Airways and IBM, he moved on to web design, journalism and technical authoring. He has also worked in film and television, both behind and in front of the camera, including productions by Steven Spielberg, Martin Scorcese, Ron Howard and Ridley Scott. A qualified three-weapon coach, he runs West Devon Swords teaching sports fencing to all age groups, and in recent years qualified with the British Federation of Historical Swordplay to teach medieval and renaissance combat in the Historical Western Martial Arts.


One thought on “How-to: Optimising animated GIFs using GIMP

  1. Great post, very informative. Good job.

    Posted by Bnzaj | Apr 17, 2014, 11:51 pm

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Twitter Updates

Follow us on Twitter @EverythingExpre

Find Us on Facebook

Enter your email address to follow this blog and receive notifications of new posts by email.



BBC World News

BBC World News
Opens the BBC World News page.
%d bloggers like this: