Web Design in a Nutshell

1. Web Design in a Nutshell Chapter 23: Animated GIFs

2. Summary

3. Synopsis • These days, it’s just about impossible to browse the web without seeing the flashing, bouncing, and wiggling of GIF animation. The animated GIF is ubiquitous and there are many good reasons for its popularity: • Users need no special software or plugin • GIF is the standard file format for he web • They’re easy to create • They require no server configuration • They use streaming technology • The only drawbacks to animated GIFs are that they can contain no sound or interactivity and they cause some extra work for the client’s computer to keep refreshing the images.

4. How they work • Animated GIFs work a lot like traditional cell animation. The file contains a number of frames layered on top of each other. • In simple animations, each frame is a complete scene • In more sophisticated animations, the first frame provides the background and subsequent frames just provide the changing portion of the image • The GIF animation consists of a number of images and a set of instructions that specify the length of delay between frames, as well as other attributes like transparency and palettes.

5. Using Animated GIFs • Nowhere has GIF animation made a larger impact than in banner advertising. Ad agencies aren’t stupid; they know that adding motion and flashing lights to a web page is a sure-fire way to attract attention. • But beware that this can also work against you. Many users complain that animation is too distracting, making it difficult ton concentrate on the content of the page. Although it adds a little “pizzazz” to the page, overall, too much animation can quickly spoil the user’s enjoyment f your page • Avoid more than one animation on a page • Use the animation to communicate something in a clever way (not just gratuitous flashing lights). • Avoid animation on text-heavy pages that might require concentration to read. • Consider whether the extra bandwidth to make a graphic spin is actually adding value to your page. • Decide whether your animation needs to loop continuously. • Experiment with timing. Sometimes a long pause between loops can make an animation less distracting.

6. Tools • Applications that include GIF animation tools: • Macromedia Fireworks • Adobe ImageReady • Animation Shop & PaintShop Pro • GIF animation utilities: • GIFmation • GifBuilder • Ulead GIF Animator

7. Creating Animated GIFs • Regardless of the tool you choose, the process of creating an animated GIF is about the same and involves making decisions about a standard set of features and options. Some of the following descriptions use GIFBuilder’s terminology, but the concepts and settings are consistent across tools. • Frame Delay • Also called “interframe delay,” this setting specifies the amount of time between frames. Frame delays are measured in 1/100ths of a second. You can apply a different delay time to each frame in the animation to create pauses and other timing effects. • Transparency • You can set transparency for each frame within an animation. Previous frames will show through the transparent area of a later frame if disposal methods are set correctly. If the background frame is made transparent, the browser background color or pattern will show through. • Don’t be surprised if the transparent areas you specified in your original graphics are ignored when you import them into a GIF animation utility. You may need to set transparency in the animation package. Standard transparency options include: • None: no transparency • White: all the white pixels in the image will become transparent • Based on first pixel: The color of the “first pixel” (top left) is transparent • Other: This option lets you select one of the palette colors as transparent

8. Creating Animated GIFs (cont.) • Disposal methods • Disposal method gives instructions on what to do with the previous frame once a new frame is displayed • Most GIF animation utilities offer “optimization,” a file-size reducing process that takes advantage of the fact that previous frames will “show through” transparent areas of a later frame. In order for this process to work, the disposal method must be set to Do Not Dispose (or Leave Alone, etc.). With this method, areas of previous frames continue to display unless covered up by an area in a succeeding frame. The four choices are: • Unspecified (Nothing): Use this option to replace one full-size, nontransparent frame with another • Do Not Dispose (Leave As Is): In this option, any pixels not covered by the next frame continue to display. Use this when you want a frame to continue to show throughout the animation • Restore to Background: The background color or background tile shows through the transparent pixels of the new frame (replacing the image areas of the previous frame). • Restore to Previous: Only works with IE

9. Creating Animated GIFs (cont.)

10. Color palette • Animated GIFs, like static GIF files, use a list of up to 256 colors that can be used in the image. They can have multiple palettes (one for each frame) or one global palette. The palette choice affects how well the images appear on the inevitable variety of systems and monitor setups. • One problem with using multiple, frame-specific palettes is that they cause a dramatic increase in file size. It is recommended you use one global palette for the whole animation.

11. Other options • The following are descriptions of other aspects of animated GIF files that can be set within most animation programs: • Loop: you can specify the number of times an animation repeats – none, forever, or a specific number. • Interlaced: Like ordinary GIFs, animated GIFs can be set to be interlaced, which causes them to display in a series of passes. For animated GIFs, it is recommended that you leave the interlacing option set to “no” or “off”. • Depth: This option allows you to limit the bit depth of the image to some number less than 8 (the default for GIF). • Dithering: This is a way to simulate intermediate color shades. It should be used with continuous-tone images. • Background Color: Regardless of what color you select in the background color option, Netscape & IE display the background color or image you specify in your HTML page. So, the option doesn’t affect the display of the GIF in a browser, only within the tools itself.

12. Recommended starting options • These settings are a good starting point for creating full-frame animations: • Color Palette: Global, adaptive palette • Interlacing: off • Dithering: on for photographic images; off for drawings • Image Size: minimum size • Background Color: the background color of your web page • Looping: forever • Transparency: off • Disposal Method: do not dispose

13. Optimizing animated GIFs • Start by applying the same file-size reduction tactics used on regular, static GIF files to the images in your animation frames including: • Reduce number of colors • Reduce the bit depth • Eliminate unnecessary dithering • Removing “stray” pixels from the otherwise solid areas • In addition to the standard image-compressing methods, GIF animation tools optimize animations by eliminating the repetition of pixels in unchanging image areas. Only the pixels that change are recorded for each frame.