Are there methods for cutting down on file size with animated gifs without decreasing quality?


I'm in the process of replacing a lot of flash content with anything other than flash. Most of it's simple animated diagrams such as the one below:

enter image description here

Rather than write javascript each time an image like this appears and risk one of several content writers, who aren't developers and could easily be confused, overwhelmed, or mistakenly change code, I figured many of the flash animations could simply be replaced by an animated gif. However, I've underestimated how large what look like simple images can get when animated. For example, the one below is 228kb, which isn't the end of the world, but much heavier than I'd like to go.

Are there certain methods during the image design process that I can use to cut down on the file size?

I would've assumed it'd be something like png's, where they can become very heavy with detail, but if you stick to simple shapes and solid colors, they can be extremely light.

6/13/2013 12:49:00 PM

Accepted Answer

While GIF is a lossless format, it's also restricted to 256 colors. So in many cases, you're doing to see a reduction in quality from your source file if it's over 256 colors.

But if you want to optimize the design for the GIF format, some things you can do:

  • use flat colors (not gradients)
  • limit the number of colors you use
  • have said colors repeat horiztonally more than vertically (a GIF of horizontal stripes compresses much smaller than a GIF of vertical stripes)
  • Only animate the smallest part you need to

But, generally speaking, animated GIFs are huge.

An alternative would be do use sprite animations (Javascript and CSS):

7/1/2014 4:33:00 AM

You'll probably need to make some manual adjustments to get the file sizes appreciably smaller. For example, the fading transitions in that animation add a fair amount of data, so if they're not vital you could remove them. The amount of detail doesn't make much difference, apart from in terms of keeping the colour palette small. The main thing to bear in mind is minimising the amount of changes between frames.

The same animation with only the four main frames and reduced to 64 colours is 36K:

Animation with transition frames removed and recompressed