Welcome to GIF89

"The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way," said the CompuServe representative who wrote the GIF specifications back in 1987. Strong words.

Sure, things have changed since the late '80s when the GIF was first developed. Bandwidth has grown from a trickling two-lane highway to an eight-lane expressway, CPU speeds have increased tenfold, and the Web is now a forum for art and communication, not just a place for physics papers. CompuServe's GIF authority was correct about one thing, however: GIF89 is not a great animation medium.

The drawbacks of GIF89 are not insignificant: it tends to create large file sizes and doesn't compress well, plus it has no sound capabilities. On the other hand, it creates animated GIFs that almost every browser can see. And when it comes to small animations - like logos, basic stories, and simple animated icons - the GIF89 format works A-OK. It also does well in combination with other animation mediums, such as dHTML and Flash.

Because it's so suitable for small animations, GIF89 earned a bad rep as the "annoying ad banner" format, a stigma that has kept many creative people from embracing it as a useful art tool. In the pages that follow, we'll show you several examples of innovative animations created with GIF89 that demonstrate some stylistic tricks you can use in your own work. Of course, true style is in the details, so we'll also cover the important nitty-gritty.

Long-time HotWired readers may remember the frontdoor splashes we produced way back in the dark ages (1996). Most of the time, those teasers told a story about that day's featured article. In order to reach the widest audience, the splash team decided that animated GIFs were the best way to go. After creating a butt-load of these daily stories, our team learned how to get the most out of these animations while still maintaining decent color quality and keeping file sizes fighting-trim (under 50 KB). What follows is our brain dump - all the workarounds and trouble-shooting techniques we've developed over countless hours of swearing at our computers, freeware GIF89 programs, and the world at large.

Enjoy.

 

Less Is More
Getting Started

To make your way through today's lesson, you're going to need a GIF89-generating program. Thankfully, several GIF89 software applications are available for both Mac and PC platforms, and some of the best are free and easy to use. Check out Webmonkey's Toolbox for a complete listing of the applications. In my experience, GifBuilder by Yves Piguet (for the Mac) provides the best combination of features and ease-of-use. However this application has several quirks that, without the tips provided in the pages that follow, will drive you Manson-crazy.

Also, you may want to refresh your memory about GIF animation and brush up on the animated GIF versus server push.

OK, ready? On with the show.

Trim the Fat with Flat Files

The GIF compression algorithm works best with flat color graphics. By flat, we don't mean images that actually look flat, but images in which the number of colors, as well as the number of blends, have been kept to a minimum.

To get fewer colors and blends, you're better off working with illustrations versus photographic imagery. Fully rendered photographs require a lot of different colors. Black-and-white photos are a little better, but browsers can only read the four grays in the color-safe palette, so the other, in-between grays depend on dithering (which can degrade the image). Try to use one bare-bones palette with all the frames of your animation, especially if you're forced to work with photos. You can also use DeBabelizer to map all images to the same palette, which helps reduce file size and optimizes the appearance of your GIF89.

Finally, if you must work with photographs, consider using monochromatic palettes to reduce the number of colors while still maintaining the quality of your image. Although the full-color version of the animation below has a relatively limited palette, it still looks beautiful. The same effect could be achieved with a more economized monochromatic palette.

Example: Wired on Pointcast Splash
Animator: Anna McMillan
Media: GIF89
File size: (full color) 136 KB (gray scale) 46 KB

The Sound of Silence
Since GIF89 has no sound capabilities, adding audio to your animations is not an option. However that doesn't necessarily mean your animations can't have a voice. Here are some ways to make some noise with GIF89 animations.

Say It with Typography

Just 'cause it doesn't make a sound, it doesn't mean you can't hear it. Experiment with typography to see if words really must be spoken to be heard. This example says what I mean better than I can:


Example: Consciousness
Animator: Josh Feldman
Media: serverpush animation
File size: 2960 KB

Use Comic Lines

There's no official term for those sound, smell, and motion lines you find in comics. I asked Terry Colon, experienced illustrator and cartoonist, what they were called, and he had no idea either. He calls them ballagraphs or stellamata or motomatic tracks. I just call them comic lines. But whatever you call them, they're a simple yet effective way to communicate movement or senses (like smell and hearing) that can't really be expressed through this medium.

Example: Blender Phone Splash
Animator: Luke Knowland
Media: GIF89
File size: 185 KB

Send up a Word Balloon

Word balloons are a great substitute for sound or spoken expressions. Flip through some comics to get an idea of how to use these to their full advantage. They need not be boring - illustrated balloons can express a wide range of emotions and sounds.

Design Around the Disadvantages
The file-size limitations of GIF89 mean that you have to use as few frames as possible. As a result, the motion in these animations tends to be very choppy. The key is to force this disadvantage to work in your favor by making it a part of your aesthetic. Consider "cutout" style animations (à la South Park or Terry Gilliam's Monty Python animations). You're better off designing with these limitations in mind from the start, as opposed to creating the perfect animation and then hacking it up to make it Web-worthy.

Example: Packet Chip Head Splash
Animator: Anna McMillan
Media: GIF89
File size: 59 KB

Another way to smooth out the bumps is by adding one motion-blur-filtered frame, which gives your animation the appearance of fluid motion. Adobe AfterEffects (a 2-D animation program) has a feature that automatically calculates the strength and distance of a motion blur based on the degree of an object's movement. Motion blur is more than just a nice cheat - it can also add a sense of reality to your higher-end animations.

Example: Packet Server Splash
Animator: Luke Knowland
Media: GIF89
File size: 49 KB

Other blur-like filters can also simulate motion. The following animation uses the Twirl filter in Photoshop.

Example: Netizen Election Splash
Animator: Anna McMillan
Media: GIF89
File size: 43 KB

Usually three distinct frames are enough to give the appearance of believable motion. (If you use fewer than three frames, your animation just looks like it's blinking, so don't go too crazy removing frames.)

Example: Talkie from Talk.com
Animator: Max Kisman
Media: GIF89
File size: 6 KB total

Now Optimize
Now that you are well-versed in some easy ways to make your designs work as animated GIFs, it's time to learn how to make them Web-worthy. Lucky for you, we've done this very painful optimization legwork for you. Each way to approach the creation of your GIF89 (using GifBuilder for the Mac) has its own purpose. Peruse this information before you start to determine the best way to build your animated GIF.

Frame Optimization

Always keep the action close. Think carefully about constructing your action to best utilize frame optimization. Put actions physically close together, not far apart. And since you're going to have to cover up each previous action while maintaining the smallest file size possible, the covering frame should be small as well.

Example: Webmonkey Toolkit Splash
Animator: Judd Vetrone
Media: GIF89
File size: 40 KB

See how the monkey makes small, close movements before heading toward the toolbox? You don't really notice the lack of movement overall, just the unraveling of the action. Which is the way it should be.

By selecting Options:Frame Optimization, you automatically crop the frames to eliminate areas that aren't being used or are redundant (since they were used in the previous frame). GifBuilder isn't always too smart with this function, however, and your application may not even include this feature, so you may have to hand-optimize the frames. Hand-optimization involves cropping the frames in an image-editing program, dragging them back into the GIF89 creation program, and then positioning them manually. This sounds harder than it is. The most important thing to remember is that the previous frame's action needs to be covered up by the next frame. Confused? Try it out a few times (always save your original files!) and you'll get the hang of it.

Why go through all the trouble? Well, the fewer the pixels in the space (in this case the frame), the smaller the file size. Plus this method tends to reduce the colors in each frame, which also contributes to the reduction of the overall file size.

Transparency Images

To employ the transparency technique, use a background image as the first frame of your animation, then layer transparent frames over this background. Each of the transparent frames has action (or image data) in one or more areas, but the rest of the frame is a solid color, which will be designated as transparent in the GIF animation program. (In this case, you would want your disposal setting to be N, as in Do Not Dispose.) A little confusing, yes, but try downloading the fabulous example Lorelei Pepi has created, and play around with it in GifBuilder and Photoshop. You'll figure it out in no time.

Example:Absolut Panuska Map Art
Animator: Lorelei Pepi
Web Site: Absolut Vodka
URL: panushka.absolutvodka.com
Media: Gif89
File size: 140 KB

Cover Up

When you use AfterShock to export a Macromedia Flash file as a GIF89, the program creates elaborate frames that utilize both transparency and frame optimization. In this example, you can see that the black background will be rendered as transparent in the final GIF89, and that the frames have covered up only the pixels used in the previous action. If you already have all your layers in Photoshop, this is an elegant way to overlay the action in the preceding frame. Certainly it's less bulky than using big color blocks to cover things up, and the resulting file size is smaller.

Example: Frame from AfterShock exported GIF89
Animator: Fork Unstable Media
Media: AfterShock exported GIF89

Trouble-Shooting Tips
Typically, bug fixes and shortcuts come from lots of painful trial and error. Since we've been through the ringer already, you get the product without suffering through the process. (Lucky dog!)

The Not-Enough-Color Bug

For some reason when you work with too few colors (most notably, four), the transparency settings eliminate all the colors in the frames. To avoid this, uncheck Remove Unused Colors. This shouldn't increase the file size too much (unless your piece is large in proportion).

Differences in Browser Speed

Recent versions of MSIE have a tendency to display GIF89s at a much faster framerate than Netscape. So you should double-check your animation in both browsers to make sure your message isn't distorted by the speed differences. Always check the tempo over a live Net connection - a desktop drag-and-drop doesn't accurately duplicate real-life usage. Faster CPU processors will also play back a GIF89 at an increased tempo.

Color/Gamma Considerations

The cross-platform palette works for the most part, but IE may not recognize a few colors - namely one dark blue, which it renders as black. I recommend using the 6x6x6 setting in GifBuilder, which imitates the Netscape 216 palette, for most of your GIF animations. Of course, monocromatic and photographic images are an exception.

Test your animations on both PC and Mac, and at 256 colors, to check gamma differences. Animations designed on a Mac will be significantly darker when viewed on a PC and vice versa. In general, try to avoid really dark colors, blues, and grays because they tend to be the most problematic.

Other Known Problems

If you eliminate file frames from a folder before saving the animation, you get an error. The program needs to reference these files during the initial save. If the files have been erased, the GIF89 file cannot be compiled.

Also, you sometimes see GIF89s on the Web that have an extra space along one side or around the entire animation. This happens when the GIF89 size is larger than the largest frame size. Be sure the frame sizes match after you've finished all your file-swapping or cropping.

Finally, you may run into some problems if you introduce new frames that use a different palette or have additional colors. Start over by returning the color setting to 6x6x6, and the program will readjust the palette to include the new colors. To double-check the palette, just save, then reopen the GIF89 file in GifBuilder.

Timing and Loading
How to Integrate that GIF89

The way you include your GIF89 in your Web page is almost as important as how you design the animation and optimize the file. One of the beauties of this format is that it can be treated like any other GIF - so it can be controlled by server push, JavaScript, or dHTML. But always keep in mind the specific limitations of the medium - varying download speeds, CPU speed differences, etc. - when you drop an animation into the page.

Set the Tempo

Pay very close attention to the tempo of your animation. Play around with the timing until you get the desired effect. As it does with acting, timing can have an impact on the way your story is perceived. Fast pacing gives off a frantic feeling, slo-mo pacing adds a sense of drama, and so on.

Here are some ways to tweak your speed settings for optimal Web usage:

Timing the first frame to run long allows for page/animation load time. We recommend at least two seconds (200/100 seconds). Keep in mind that time in GifBuilder, or any other animated GIF program, does not necessarily reflect actual time. Testing is the only sure-fire way to know how your GIF89s will run.

To preserve the colors of your animation, leave the last frame running for the longest setting possible - 100 seconds (10000/100 seconds) to prevent it from dithering down.

By using <lowsrc> in your image code (<img lowsrc="animation1.gif" src="animation2.gif" border="0">), you can preload an image or animation (in this case, animation1.gif), which loads first and is then replaced by the second image (animation2.gif). For instance, you can preload the opening scene of a story and have the second GIF illustrate the next scene. With the Packet Mouse/Punching Bag splash, the first GIF89 began in a static/motionless state (with a Punching Bag/Mouse image), while the second GIF89 looped continuously with the Punching Bag/Mouse in motion. Users didn't have to wait for one large file to download, they just got a seamless story without knowing the trick. One drawback to this method is that only the second GIF is cached, so if users click away from the page, their browsers no longer recognize the low-source image.


Example: Packet Punching Mouse Splash
Animator: Judd Vetrone
Media: GIF89
File size: 63 KB

Another problem with this <lowsrc> trick: it doesn't work in MSIE 4+. The purpose of <lowsrc> wasn't really to fake animations. It was meant to cater to the slow modems of yesteryear, serving up a quick-loading place-holder image right away, then filling in the larger, more sophisticated image as the user read the page. But now MSIE just serves the image it thinks you want, skipping the lower image entirely. If you really want to recreate the effect, you can use JavaScript to serve up the different images.

Multiple Animations

Adjust the first frame's timing just so, and you can load multiple animations onto a page to tell a story. Because modem and CPU speeds vary so dramatically, this tends to be an inexact science, so be careful.

You can also use the same animation multiple times to give the appearance of a more complex animation. This greatly reduces file size and means no extra hits to the server. To make things more interesting, you can use JavaScript to change the order or delay the loading of the animations.

Experiment with an animation that moves across the GIF89 file, gets cut off halfway through the motion, then reappears at the beginning of the file. By nesting a number of these side by side, it looks as though you have a bunch of these elements moving across the screen.


Example: Too Many Rabbits
Media: GIF89
file size: 140 KB

Stretching and Scaling
Adding percent values to the height and width tags in your image code (<img src="animation.gif" width="50%" height="100%" border="0">) will stretch or shrink the animation to fit the page. Adjust the browser window size, and the GIF89 stretches and adjusts to fill the space. This is best used with aliased images as it renders the pixels clearly, without any distortion. (Though you may want to experiment with anti-aliased images as well - you just might like the effect.)


Example: Stretching color cycling circles
Media: GIF89
File size: 6 KB
Frames: 69

Stretching images with the image tag (versus stretching them with your image-editing program), reduces file size considerably. So, with the room you save on file size, you can have more complex, many-framed animations. This is especially useful if you integrate your animation into a frameset or when you use dHTML.

Unfortunately, stretching transparent animations doesn't always work on a Mac. As the example illustrates, you can get artifacts from what appears to be some confusion with the bits. Also, the timing of scaled imagery is usually altered when viewed through Netscape, usually producing slower results. So again, it's important to test your GIF89s on as many platforms and browsers as possible to ensure that all your viewers get quality animations.

Here's a transparent stretched animation (still shot) as it should appear.	And this is a transparent stretched animation (still shot) as it might appear on a Mac.

Stretching frame-optimized, transparent GIF89s will also leave image artifacts.

105 by 100 pixels	actual size	105 by 242 pixels

Example: View the animated example, IE 4.0 only
File size: 16 KB

When you plan to stretch a graphic, you're better off using flat color or ultra photographic imagery. Be leery of stretching text - that's something better left to dHTML.
Example 1: Stretched photograph
Example 2: Stretched flat color
Example 3: Stretched in-between graphic
(Notice this doesn't work as well. It needs extensive cleaning up, or aliasing, before it's stretched.)
Example 4: Anti-aliased versus aliased text zoom [10 KB]

Meta Tags, Mouseovers, and More
Meta Tags/Frames

The meta-refresh <meta http-equiv="Refresh" content="35; URL=xx.html"> allows you to create more dynamic, full-page experiences with your animations.

Example: HotWired's RGB Gallery
Designer: Mary Spicer
Media: GIF89/HTML

JavaScript Mouseover

Use JavaScript to combine an animation with static images. This gives you better control over timing and infuses your pages with more interactivity. Simple JavaScript arrays like this one let you set the loading time for each image. Other JavaScript commands allow the user to interact with your story - even alter the outcome.

  Touch me!

Animated Backgrounds

The 4.0 browsers allow a GIF89 to run as a background image. This lets you overlap animations and strategically place images, text, form elements, or other objects over the animation. As with plain-old static background images, it's difficult to achieve 100 percent accuracy when it comes to placement, so use it wisely.

Example: Red Splash [4.0 browsers only]
Media: GIF89
File size: 16 KB

Static Backgrounds and Transparent Animations

Layer a transparent animation over a page background image to reduce the total file size of your page. Avoid using a complex and bulky background image (like a photograph) in your GIF animation when it could just as easily, and efficiently, be a page background JPEG.
Example: 4YB-002
Animator: David Opp
Media: JavaScript, GIF89, QuickTime

Cropping and Reassembling

If your animation has large, static areas, chop it up to save on file size. You should also remove complex elements from the animation that might be better utilized by another format (like a JPEG). Rebuild your sliced-and-diced animations with tables or with the positioning abilities of cascading stylesheets.

Example: Webmonkey Mad Scientist Splash
Animator: Luke Knowland
Media: GIF89
File size: 79 KB

And so ends the Great GIF89 Brain Dump. Now, with a little patience and creativity, you can produce high-caliber, arty GIF animations so impressive that you'd think that's what the GIF format was meant for all along.

On deck: Lesson 3 - dHTML.

Anna McMillan and Emily Hobson both work at HotWired. Emily, who is a production manager, is a firm believer in consistent tipping of bartenders and hair stylists. Anna is a designer and owns a cat named Pixel.