This action might not be possible to undo. Are you sure you want to continue?
Web Animation q
The use of animated GIFs on Web sites is an ancient method of attracting users to click to places they might otherwise not have gone—it has been around since the first Web pages came online. As a means of communication, they’ve proved remarkably resilient, thanks largely to the fact that not only can they be effective in catching the eye, but also because they’re small and can be seen on almost any browser.
nimated GIFs remain the most popular way to add movement to a Web page. In fact, they’re the de facto standard for banner ads on the Internet. The reason is simple: most people who surf the We b can actually see a GIF animation unfold, regardless of the computer they own
or the type of browser they use. This contrasts with Flash, Java and Dynamic H T M L, which are very robust and inc reasingly popular formats, but which re q u i re special plug-ins, downloadable applets or the newest browser in ord e r to be viewed. Animated GIFs are based on one of the
oldest of all animation principles—the flip book. Basically, an animated GIF file contains a series of individual images that, when viewed in sequence, cre a t e the illusion of movement. The pro b l e m is, saving a sequence of images can produce very large file sizes. Large file size is anathema on the Web, where it results
q Web Animation
in lengthy download times. Advertisers want the audience to see the entire message which means the animated banner ad must display quickly. Download speed is determined by file size, and this speed is so important that most large Web sites have instituted strict size limits for files. The rule of thumb is that a banner ad should never be larger than 12K. T h e re are some standard techniques that can help you optimise the size of a GIF image. These include re d u c i n g the number of colours in the image, red u c i n g the number of frames, cro p p i n g the dimensions of individual frames and avoiding dithered colours altogether. All of these techniques are based on the premise that less is better. Fewer colours, fewer frames and fewer frameto-frame changes result in smaller files. But less is also boring. Ultimately, a banner ad that isn’t visually intere s t i n g isn’t effective. We’ll show you how to c reate dynamic animated GIF banners that download efficiently and play back smoothly. Animated GIFs have been around for a long time and because of this they exhibit certain intrinsic limitations. For example, the format is restricted to 256 colours and employs the older L Z W c o m p ression scheme. Furtherm o re, it displays the images in a strict sequence that you cannot modify at playback time. But it also supports some wonderf u l features. You can determine the amount of time each frame is displayed ons c reen, make areas transparent and choose the disposal method by which new image data replaces old. If you understand these admittedly technical concepts, you’ll be able to design animation sequences that take ad-
vantage of them. The following tips show you the kind of content that works hand in hand with GIF optimisation techniques. Most of today’s full-featured Web graphics programs, such as Macromedia Fireworks (www.m acromedia.com ) and Adobe ImageReady (www.adobe.com), p rovide access to these functions. We generated the sample animations for this article using Fireworks.
onds and the remaining three frames a re set to 0.1 seconds.
CROP AWAY REDUNDANT IMAGERY
The first frame of a GIF animation typically determines the overall dimensions of the image, but subsequent frames can be smaller. They can even be positioned, using relative x, y co-ord i n a t e s , a n y w h e re within the boundaries of the first image. You can use this feature to crop away redundant image data and reduce the overall size of the file. The p rocess may sound complicated, but it is often as simple as activating an export option. For example, Macro m e d i a F i reworks contains an Auto Crop check box in the Export dialog box. In some r a re cases, you can achieve a tighter c rop (and save one or two more kilobytes) by using a dedicated utility such as Alchemy Mindworks GIF Construction Set Professional to crop each frame manually. This cropping technique works best when you plan your animation with c ropping in mind. Basically, you should restrict the frame-to-frame changes to a small, contiguous area. In addition, you should make sure that the new image data completely obscures the part of the picture you want to erase from the p revious frame. The two sample animations in figure 1 prove this point. The ineff i c i e n t l y c ropped image contains only a small amount of change in each frame. And yet, because the changes appear in several diff e rent locations, a great deal of redundant information must be retained when the subsequent frames are c ropped. The changes in the eff i c i e n tly cropped image occur in the same location and each new element hides the object beneath it. As a result, a very small c r opped rectang le can encompass all of the necessary image data. When you choose a particu la r ani mat ion t echn iq ue, think about how well it fits i n t o a c r op p ed r e c t a n g l e . Glows, for example, which rely on a colour change, work well with cropping. Enlarging a shape while keeping it in the same position is also a good choice. A true motion e ffect is the least efficient animation option because you must paint the new position of the moving object and re paint the background to hide
SLOW DOWN (OR SPEED UP) THE ANIMATION
The GIF 89A format allows you to det e rmine the delay between individual frames of an animation (specified in 0.01-second increments). This gives you the power to control the pace of the animation. Aesthetics aside, in many cases you’ll find that slowing an animation down (or speeding it up) allows you to reduce the overall number of frames in the file. For example, an animation containing a text phrase must be displayed onscreen long enough for the viewer to read it comfortably. You can either cre a t e four identical frames that each display for the default amount of time (0.2 seconds), or you can create one frame and specify an exact delay time of 0.8 seconds. In a GIF file that has not been otherwise optimised, deleting three frames f rom a four-frame animation can re d u c e the file size by 75 percent. The same technique works in re v e r s e . You can often create a more believable motion effect in fewer frames by dec reasing the delay time to 0.1 seconds or less. To see this theory in action, examine the animation with the word s “The illusion of motion” in figure 4, w h e re the first frame is set at 0.6 sec-
Web Animation q
Get the speed right. Set text to display longer and decrease the delay time for motion illusions. C rop par tial frames. Don’t use the entire frame when a smaller image can be cropped and positioned. Layer frame images. Use GIF’s transparency and re-painting methods to cover previous frames with new ones. Use one colour palette. Eliminate local palettes in favour of a single global palette for all frames. Use illusion techniques. Blurs, slants and streaked lines can trick viewers’ eyes into seeing motion. Use optimisation features. Noteworthy are those included within Adobe ImageReady (www.adobe.com), Alchemy Mindworks’ GIF Cons t ruction Set Professional (www.mindworkshop.com), Macro m e d i a F i r eworks (w ww. m a c r om ed ia.com) a nd U le ad Web Razo r P ro ( w w w. u l e a d . c o m ) .
shadow can add 8 or 16 grey tones to the palette. Animated glows and true optical fades are hogs when it comes to colour re q u i re m e n t s . You can often create much smaller animated GIF files by substituting bandw i d t h - e fficient ef fects. For example, instead of a fade that changes the colour of an object frame by frame, use an old fashioned dissolve transition, which paints a random, solidly coloured spray p a t t e rn over an image. Likewise, instead of a pulsating, soft-edged glow, you can animate a neon outline for an object. Compare the glow animation sample illustrations in figure 2. The t r a n s p a rent halo effect looks more sophisticated but produces a file twice as large as its simpler outlined counterpart.
the previous position of the object.
KEEP THE COLOUR PALETTE SMALL
The GIF 89A format stores all of the animation’s colours either in one global palette or in a series of local palettes. Your first goal should be to eliminate local palettes. Utilising one global palette for the entire animation means that colours are consistent from frame to frame, which results in a higher percentage of redundant image data that can either be cropped or converted to t r a n s p a rency. In contrast, a GIF animation compiled from a series of images with diff e rent palettes might contain colour shifts that increase the size of cropping rectangles and interrupt t r a n s p a rent areas. In addition, the fewer colours in the palette, the smaller the file size. Smaller palettes re q u i re less storage space. So a 16-colour palette re q u i res 4 bits, while a 128-colour palette requires 7 bits. It should come as no surprise that images composed of flat areas of colour— specifically text, logos and computer generated graphics—work best with small palettes. Photographic images or gradient fills should not be your first choice when designing an animated GIF because they contain lots of different colours that can bloat the palette. Be on your guard against intro d u c i n g new colours as part of a special eff e c t . For example, the ever popular soft dro p
C R E ATE THE ILLUSION OF MOVEMENT
Ultimately, all animations are nothing m o re than illusions, where a fast sequence of static frames tricks your eye into seeing movement. However, there a re certain visual clues—which cartoonists have been using for years—that can emphasise or suggest movement using a minimal number of frames. Motion blurs, which can be applied as a filter in most image editing programs, do a great job of fooling your eye into seeing movement where none exists. Another great visual clue to indicate movement is an attitude change— skewing or slanting an image. An object that is slanting forward looks like it is moving at great speed and an object that is slanting backward looks like it is attempting to stop. Other examples include streaked lines, which can substitute for a motion blur in many cases, or transparent trails that imply an object is moving so fast you can see it in two places simultaneously. Using this kind of cartooning shorthand can help you to reduce frame count dramatically. For example, our motion animation (figure 4) uses an effect that takes only four frames to accomplish its illusion. We did this by slanting the image and applying a motion blur. The resulting file size is less than 4K.
L AYER IMAGES IN AN ANIMAT I O N
You can create amazingly small animated GIF files by taking advantage of two diff e rent features of the file form a t : GIF files can contain transparent are a s and the format allows you to determ i n e how each frame in an animation will be re-painted or disposed of. If you build an animation by merely layering new image data over old—allowing portions of the previous frame to show t h rough—you can create frames with l a rge transparent areas. Tr a n s p a re n t areas compress very well, because they’re t reated as expanses of solid colour by the compression algorithm. In addition, you can choose the most efficient disposal method, which is no disposal at all, or None. If you are using a pro g r a m that automatically optimises GIF animations, be sure to activate the Auto Differencing option and to specify which a reas of the frames should be transp a re n t . Our sample overlay text animation, which consists of seventeen frames, contains lots of action and still manages to keep the file size under 6K. The illustration in figure 3 shows you a few selected frames from the animation to demonstrate the small amounts of data that are added with each frame.
A banner ad on DITNet attracting users to follow the link to the subscription page for PC Magazine Middle East and Internet Arab World.
This action might not be possible to undo. Are you sure you want to continue?