Friday, 21 March 2014
How-to: Optimising animated GIFs using GIMP
Previously, 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: http://www.gimp.org/tutorials/Simple_Animations/ http://www.gimp.org/tutorials/Using_GAP/ http://www.gimp.org/tutorials/Advanced_Animations/
Related: How-to: Animated GIFs using GIMP