GIF Animation :: Creativity with a Short Leash

Posted by: Andrew Hainen

I’m Andrew Hainen and I am currently a graphic design intern at Q. I worked on a project recently that involved making a GIF animation for a holiday email. For those not familiar with this, Wikipedia says:

The Graphics Interchange Format (GIF) is a bitmap image format that was introduced by Compuserve in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

Nice example of a .gif from Wikipedia, above.

 

Why…?

GIFs are old technology and it’s easy to wonder why they haven't been replaced. But after I thought about it, I realized that's exactly why they haven't gone away:

• GIF animations will play in practically any browser. So, in places that need a codec to play a video or Flash file (like a mass email), GIFs can still play.
• GIFs are output at the smallest filesize possible, especially if you plan to use limited colors and no animation.

 

Point A to Point B

When I embarked on making this GIF animation, I was excited to see what I could fit in technically. The only constraint was to keep the filesize under 100KB. I recently interned at a Flash animation studio and after being required to keep my SWF files under 40K, this seemed like it would be a walk in the park.

Mistake.

(The process described below is what I tried. I guarantee there is a better way to create compressed, high-quality GIF animations. This is what I experienced and was able to produce quickest.)

 

Flash to GIF
My first option was to use Flash, which seemed easy enough, but I hadn't used it for a GIF before. I'm pretty good with the timeline and IDE side of Flash, so I figured this wouldn't be too bad. But another limitation occurred to me: whatever I did had to loop. GIF animations are just looping animations, some Actionscript snow falling wouldn't work (or anything dynamic really) because the first frame and the last frame would be different.

After that, I did a color test to see the quality that would come out:

(255 color limit, 1 frame, output via Flash, 70KB)

Ouch, 70KB already? I had made a 20-second banner ad under 40KB before, this was ridiculous. Next big lesson: each color tacks on filesize. This is obvious, but I had thought that the motion would be the bigger problem with keeping the filesize down. The rainbow in the above image must've caused the spike.

Next color test:

(255 color limit, 1 frame, output via Flash, 33KB)

Better, but that gradient still looked terrible. Within Flash, I only had control over color count and a few other options that were difficult to preview.

At this point, I knew that the holiday GIF animation from the previous year was done 100% in Photoshop Extended, so I was ready to jump ship on Flash because it seemed like Photoshop would be easier to work with. I tried sending a high-quality GIF from Flash to Photoshop in hopes of decreasing filesize, but this was pointless and the filesize didn't change much.

Before I went to Photoshop though, I wanted to try something…

AfterEffects to the Rescue!

Because I was under the impression that the color count was the biggest thing making the filesize shoot up, I figured you could have any animation going on and still have a small GIF. So, I decided to use some of the animation tools in AfterEffects and then put it through Photoshop. (AfterEffects CS5 and up can't export a GIF image)

(64 color limit, 223 frames, output via Photoshop, 430KB)

Alright, so the filesize was big, but I now could work my way down. Of course, headache upon headache came along with trying to keep the gradients and motion in, and it just wasn't working. So, I moved back to just solids and then decided to simplify the animation in Photoshop.

Save My Sanity For Web & Devices

In Photoshop, I was using the simple timelining feature and then exporting with the “Save for Web and Devices” option. Below is the menu box where you can customize filesize and the image quality of a GIF.

As you can see at the bottom, there is a spot for animation. I looked at this and realized that the amount of frames in my timeline wasn't matching up with the number being output in the GIF file. Photoshop was reusing images that were identical to save filesize. So, if frames 1-18 were identical, but held for 1 second (18fps) then Photoshop would export 1 frame and reuse it 18 times, instead of exporting 18 different frames.

This shouldn't have been a surprise as it's a common practice in web design to reuse as much as possible, but it did confirm to me that lots of moving parts were causing large filesize as well as the amount of frames. These “realizations” seem simple after the fact, but hindsight is 20/20.

(24 color limit, 71 frames, output via Photoshop, 80KB)

 

Conclusion

The hard truth is that one can imagine all sorts of glorious animations and interesting designs, but accomplishing them technically is another story. This process was frustrating mainly because my biggest goal was to use more powerful tools for animation than Photoshop, but in the end came right back to it.

 

---