The Web Wizard: Get Your Web Graphics Moving the No-Hassle Way
A litle movement can go a long way toward spicing up a Web site, but investing the time and energy in developing Flash movies or Dynamic HTML animation may seem like overkill for many jobs. In fact, many designers still opt to add a little movement by creating animated GIFs. The secret of the format’s quiet success is its simplicity and compatibility: Unlike Flash and LiveMotion, animated GIFs virtually guarantee backwards compatibility. They don’t require plug-ins or Java applets or the latest version of a browser; they simply play. For this same reason, animated GIFs are still the preferred format for advertising banners on most portals.
If the truth be told, the GIF 89a specification is a little long in the tooth and exhibits some serious limitations. It compresses bitmapped data using the lossless LZW algorithm (creating bigger files than would JPEG compression, for instance), limits you to a 256-color table (which is further reduced to 216 colors if you use a Web-safe palette), and displays the frames in a strict sequential order that you cannot modify at playback time. As a result it is all too easy to create a large file that degrades the download performance of its parent Web page. The trick to using animated GIFs well is getting the effects you want while keeping file-size low. To keep performance acceptably high, most larger portals put a stringent file-size limit on banner ads — typically 12K or less.
A quick search of the Web will reveal dozens of articles meant to help you to reduce a GIF animation’s file size and improve download times. You can sum up the advice as “Less is better.” These articles instruct you to reduce the number of colors, the number of frames, and the amount of frame-to-frame change in an animation. Of course, if you follow that advice blindly, you’ll wind up with a visually unappealing animation. Here we’ll focus on optimization techniques that allow you to create small, efficient files that are still fun to watch.
Hocus-Pocus!
A GIF animation is merely a sequence of still images (much like a flip book or a movie) that when viewed in rapid succession appear to move. Creating a true motion effect, where you reposition an object across multiple frames, is a highly inefficient animation technique, because it requires lots of frames to produce smooth motion. You can, however, create the illusion of motion using only a handful of frames and some good old-fashioned illustration techniques. In Figure 1, for example, the car appears to move quite a large distance and quite quickly. It does this with only 5 frames (and 8K of data). The trick? We applied a motion blur to the image of the car in frames 2 and 3 (see Figure 2).
Figure 1: This animation (looped for convenient viewing here) creates the illusion of motion using only five frames.
Figure 2: Frames 2 and 3 of the animation employ a motion blur (left) and skewing (right) to suggest motion.
The human brain automatically interprets the blur as speed, and speed equals motion. The effect is helped along by skewing the shape of the car. The skew changes from left to right between frames 2 and 3 to suggest the difference between forward motion and a hard stop.
You should take some time to explore other illustration techniques that can telegraph motion. Cartoonists use visual shorthand all the time. Try adding streaked lines behind a “moving object” or showing transparent trails to indicate both where an object is and where it’s been.
You can further enhance the motion effect by taking advantage of a specific feature of the GIF 89a format — namely the ability to specify the delay between frames in 1/100th of a second increments. By reducing the delay for frames 2, 3, and 4 to only 10/100ths of a second (from the typical default delay of 20/100ths of a second), you can create a more believable motion effect.
Adding It Up
You can create visually stunning animations that also download efficiently by leveraging three different characteristics of the GIF 89a format — cropping, transparency, and disposal method (which determines how each frame in an animation is painted over the previous frame).
The overall dimensions of a GIF animation are determined by the size of the first frame. Banner ads, for example, are typically 468 pixels wide by 60 pixels high. But the subsequent frames can be much smaller, and can be positioned using relative X/Y coordinates. You can reduce file size dramatically if you (or the software program you use) crop each frame of the animation down to the smallest possible bounding box. For instance, in the animated-car example above, you might crop down to just enough of the image to show the new instance of the car, along with enough background to cover the car’s position in the previous frame.
Cropping is a terrific first step, but it has one major drawback: Each frame can only contain one cropped bounding box. If you happen to have an animation effect — a frame-to-frame change — in both the upper lefthand corner and lower righthand corner of your graphic, the cropping box will be almost as large as the first frame of the animation. Using cropping alone would force you to restrict frame-to-frame changes to a small contiguous area.
The Layered Look
Luckily, animated GIFs also support transparency, which you can exploit to further reduce the file size. Depending on the software you use, transparency is assigned on a color and/or alpha channel basis, and transparency is not restricted to a single rectangle per frame, unlike cropping. The advantage of transparency in this context is that it is always treated as a single solid color, which the LZW algorithm compresses very well. When you make all of the redundant pixels in a frame transparent, you create a smaller file.
Still, transparency has its pitfalls. By it’s very nature, it allows portions of the previous frame to show through to the current frame. As a result transparency isn’t terribly efficient for true traveling motion effects. In each frame you must paint the new position of the object and restore (or repaint) the background to hide the object in the previous frame.
Here’s where things get creative. You can make the most of transparency by designing your animation as a layered image, where new frames are simply added to the existing frames, and portions of the previous frames are allowed to show through. Take a look at Figure 3 to see this technique in action.
Figure 3: You can create effient animations by adding a series of new images to a graphic and allowing portions of the previous frames to show through.
Once you’ve designed an animation using this technique, you can specify the most efficient disposal method — which determines how the information in the current frame is handled when the next frame appears. Typically, the most efficient option is “no disposal” or “None,” which allows all pixels not covered by the new frame to continue displaying. Figure 4, which displays the workspace of GIF Construction Set Professional, by Alchemy Mindworks, shows the small amounts of data required for each frame of this animation shown in Figure 3. Frame 5 (highlighted in Figure 4) contains a cropped image of only 40 by 55 pixels, and about 50 percent of those pixels are transparent, allowing efficient compression. The animated GIF shown in Figure 3 contains 20 frames — lots of activity — but requires less than 10K of disk space. That’s only a two-second download across a 28.8 bps Internet connection.
Figure 4: GIF Construction Set Professional lets you vew the exact contents of each frame.
Slice and Dice
Take a look at the animated graphic {ftp ftp.creativepro.com/pub/creativepro/Figure5.htm here}, which appears to be a single animated GIF. Upon closer inspection, you’ll discover that this image actually comprises four individual animated GIFs and two still-image GIFs. The individual files were created by slicing a large composition into smaller pieces. Several slices within the composition were then animated, and all the slices were exported as separate files. The individual slices are reassembled into a single composition with an ordinary HTML table.
This approach to building an animation allows you to leverage parameters you can assign to either the frames in a GIF animation or to the entire movie. As mentioned earlier, you can specify the delay between frames. You can also choose whether an animation repeats infinitely — a process known as looping — whether it plays back a specified number of times, or whether it plays only once.
These two seemingly simple attributes can have a big impact on your animations. For example, in the sample splash screen shown here, the twinkling star animation in the upper left corner is created with two frames that cycle repeatedly at an interval of 5/100ths of a second. The pulsar in the lower left corner also employs only two frames, but in this case the frames loop at a rate of 80/100ths of a second. In order for these two interval effects to co-exist in a single animated GIF file, you would have to create an animation containing a minimum of 32 frames.
The math gets very complicated when you factor in the other two animations. The planet animation in the upper right contains 10 frames with varied time delays of 10/100ths or 25/100ths of a second. And the moon animation at the bottom utilizes 6 frames displayed for 20/100ths of a second each. Suffice to say that an animation containing many separate elements, all changing at different speeds, would require a great many frames.
All animations in this sample splash page loop infinitely. But you can build even more sophisticated animations and create more complex sequences by turning looping off and inserting different delays for the first frame of each animation, provided you don’t need the animation to repeat itself, of course.
Tools Of The Trade
Throughout this article, I’ve avoided frequent mention of specific software programs. The truth is that just about any full-featured Web graphics program will provide access to the GIF optimization techniques discussed here — such as cropping, transparency, disposal method, frame delay, and looping. The rub is that each program uses different terminology to identify identical functions. For example, Macromedia Fireworks’ Auto Difference command and Adobe ImageReady’s Redundant Pixel Removal command both create transparent areas to reduce file size, but you wouldn’t know that from the language they use. In some cases, programs also provide different levels of access to GIF optimization techniques. Fireworks, for example, does not let you specify a disposal method (the program automatically determines the best method), so if you want absolute control over the disposal method, you’ll have to use another program. When every pixel counts, you may find it necessary to use a hardcore GIF animation utility, like the Windows-based Construction Set Professional or Yves Piguet’s Mac-only freeware program, GIF Builder.
Regardless of which program (or programs) you choose, the design approaches presented in this article can help you to add life — and motion — to your Web graphics.
This article was last modified on January 8, 2023
This article was first published on September 5, 2000
Commenting is easier and faster when you're logged in!
