Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
Have you tried using flat colors instead of gradients, I wonder if that would make a difference. –  user13360 Jun 13 '13 at 13:29
    
Yes, flat colors make a huge difference for GIF compression. –  DA01 Jun 13 '13 at 16:46

3 Answers 3

up vote 5 down vote accepted

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): http://www.spritely.net/

share|improve this answer
    
GIF is NOT a lossy image format. Your first sentence is not right. The format is limited to 256 colors, so data is lost when an image with >256 colors is converted into data GIF can store, but the GIF format itself is not lossy. Lossy/lossless refers to the compression method, which for GIF is the lossless method LZW. 256 color images can be saved in the format over and over again without losing quality. By the same logic, you don't consider PNG (which is capable of 16 bits per channel) lossy even though it is unable to retain all the information from a 32 bit-per-channel image. –  TMobotron Jun 30 at 21:40
    
@user24301 yes, good point. Technically, it's lossless. In practice, though, it's usually a degradation from your source file. –  DA01 Jun 30 at 21:59
    
Yeah I agree w/ that. I wasn't nitpicking that concept, it's just that I think saying "you basically lose quality no matter what you do" (and saying it's because GIF is a lossy format) is misleading. You won't necessarily be losing quality w/ GIF "no matter what you do", there are plenty of methods that can reduce the filesize without ANY loss of quality (which you clearly understand because most of your post I 100% agree with). I just want the response to be as accurate as possible. Cheers. –  TMobotron Jul 1 at 4:22
    
@TMobotron I agree. I've updated the answer accordingly! –  DA01 Jul 1 at 4:33

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

share|improve this answer

Another approach: look at each part frame of the animation that isn't changing there and think, "does that need to be part of the thing that animates, and be duplicated every frame? Or, could it be part of a static image that sits under the animation?". Then move whatever doesn't need to be part of the animation to a static background image.

So, in the animation you posted, the grey background doesn't change. If you had a static gif of the grey circle, then a gif animation of just the blue highlighting that sits on top of it (e.g. if the static image was the css background image), every frame of the animation would contain less data and less colours.


(I don't have access to a machine to test this right now so I can't confirm exactly how much would be saved based on your example, but it stands to reason that it would be a decent percentage without compromising on the quality of the actual animation)

share|improve this answer
1  
The GIF format itself supports partial frames and different frame disposal methods that allow this even without CSS. In fact, the OP's animation is already fairly well optimized in that manner, probably because the program used to generate it optimized it automatically. Running it through my favorite GIF optimizer does reduce its size by about 8%, but that's not much of a difference compared to the unoptimized version, which is more than twice as large. –  Ilmari Karonen Jun 14 '13 at 17:49

protected by Matt Jun 30 at 15:21

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.