in lengthy download times. Advertisers want the audience to see the entire mes-sage which means the animated bannerad must display quickly. Downloadspeed is determined by file size, and thisspeed is so important that most large We bsites have instituted strict size limits forfiles. The rule of thumb is that a ban-ner ad should never be larger than 12K.T h e re are some standard techniquesthat can help you optimise the size of a GIF image. These include re d u c i n gthe number of colours in the image, re-d u c i n gthe number of frames, cro p p i n gthe dimensions of individual frames andavoiding dithered colours altogether. All of these techniques are based onthe premise that less is better. Fewercolours, fewer frames and fewer frame-to-frame changes result in smaller files.But less is also boring. Ultimately, abanner ad that isn’t visually intere s t i n gisn’t effective. We’ll show you how toc reate dynamic animated GIF bannersthat download efficiently and play backs m o o t h l y . Animated GIFs have been around fora long time and because of this they exhibit certain intrinsic limitations. Forexample, the format is restricted to 256colours and employs the older L Z W c o m p ression scheme. Furtherm o re, itdisplays the images in a strict sequencethat you cannot modify at playback time.But it also supports some wonderf u lf e a t u res. You can determine the amountof time each frame is displayed on-s c reen, make areas transparent andchoose the disposal method by whichnew image data replaces old.If you understand these admittedly technical concepts, you’ll be able to de-sign animation sequences that take ad- vantage of them. The following tipsshow you the kind of content that workshand in hand with GIF optimisationt e c h n i q u e s .Most of today’s full-featured Web graph-ics programs, such as Macromedia Fire- works (www.macromedia.com) and Adobe ImageReady (www.adobe.com),p rovide access to these functions. Wegenerated the sample animations forthis article using Fireworks.
SLOW DOWN (OR SPEED UP) THE ANIMATION
The GIF 89A format allows you to de-t e rmine the delay between individualframes of an animation (specified in0.01-second increments). This gives youthe power to control the pace of theanimation. Aesthetics aside, in many cases you’ll find that slowing an ani-mation down (or speeding it up) allows you to reduce the overall number of frames in the file.For example, an animation containinga text phrase must be displayed on-screen long enough for the viewer to read
it comfortably. You can either cre a t efour identical frames that each display for the default amount of time (0.2 sec-onds), or you can create one frame andspecify an exact delay time of 0.8 sec-onds. In a GIF file that has not been oth-erwise optimised, deleting three framesf rom a four-frame animation can re d u c ethe file size by 75 percent.The same technique works in re v e r s e . You can often create a more believablemotion effect in fewer frames by de-c reasing the delay time to 0.1 secondsor less. To see this theory in action, ex-amine 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-onds and the remaining three framesa re set to 0.1 seconds.
CROP AWAY REDUNDANT IMAGERY
The first frame of a GIF animation typ-ically determines the overall dimensionsof the image, but subsequent framescan be smaller. They can even be posi-tioned, using relative x, y co-ord i n a t e s ,a n y w h e re within the boundaries of thefirst image. You can use this feature toc rop away redundant image data and re-duce the overall size of the file. Thep rocess may sound complicated, but itis often as simple as activating an ex-port option. For example, Macro m e d i aF i reworks contains an Auto Crop checkbox in the Export dialog box. In somer a re cases, you can achieve a tighterc rop (and save one or two more kilo-bytes) by using a dedicated utility suchas Alchemy Mindworks GIF Construc-tion Set Professional to crop each framemanually.This cropping technique works best when you plan your animation withc ropping in mind. Basically, you shouldrestrict the frame-to-frame changes to asmall, contiguous area. In addition, youshould make sure that the new imagedata completely obscures the part of the picture you want to erase from thep revious frame.The two sample animations in figure1 prove this point. The ineff i c i e n t l y c ropped image contains only a smallamount of change in each frame. And yet, because the changes appear in sev-eral diff e rent locations, a great deal of redundant information must be re t a i n e d when the subsequent frames arec ropped. The changes in the eff i c i e n t-ly cropped image occur in the same lo-cation and each new elementhides the object beneath it. As a result, a very smallc ropped rectangle can en-compass all of the necessary image data. When you choose a partic-ular animation technique,think about how well it fitsinto a cropped re c t a n g l e .Glows, for example, whichrely on a colour change, work well with cropping. Enlarg-ing a shape while keeping itin the same position is also agood choice. A true motione ffect is the least efficient an-imation option because youmust paint the new positionof the moving object and re -paint the background to hide
u ore ruary