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.