loading tricks and tips
colours
The GIF compression algorithm works best with flat colour graphics. That doesn't mean images that actually look flat, but images in which the number of colours, as well as the number of blends, have been kept to a minimum. GIF allows for any number of colours between 2 and 256. The fewer colours the less data and the smaller the graphic files. Not all software will let you set the bits per pixel for GIFs. Some programs will let you do 256 colour, 16 colours, or black and white. Not all do adaptive palettes -- that is construct a palette that is specifically for the colours you used in your image.
To get fewer colours and blends, you're better off working with illustrations versus photographic imagery. Fully rendered photographs require a lot of different colours. Black-and-white photos are a little better, but browsers can only read the four grays in the colour-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 optimises the appearance of your GIF89.
Finally, if you must work with photographs, consider using monochromatic palettes to reduce the number of colours while still maintaining the quality of your image. The same effect could be achieved with a more economised monochromatic palette.
anti-aliasing
Avoid it! It adds extra colours to your palette and leaves a 'halo' effect on images which have one colour designated as transparent. Preload Once an image has been downloaded by a viewer it is cached on their hard-drive and therefore will display and play quickly the next time that it is needed. You can 'pre-load' larger images and GIF animations as 'invisible' 1 pixel by 1 pixel images on a previous page if that page contains mostly text which the viewer will probably be reading.
low res images
Use <LOW SRC> to preload a static first frame of your animation whilst the actual animation loads. The only problem with this method is that the
<LOW SRC> assigned image is not cached unlike the rest of the animation. Unfortunately Explorer 4.0 on does not support <LOW SRC>. long first frames
Time the first frame of the animation 'run long' allows time for the rest of the animation to load -- at least 2 seconds but more depending on the size of the animation file.
Remember that the time set in GIFBuilder may not be the actual time which the frame displays for.
sequential animations
Careful planning in the timing of first frames can allow for the sequential loading of multiple animations -- just remember that as CPU and modem speed vary wildly this method can have widely varying results. You can also use JavaScripts to sequence and delay start times for the animations.
multiple use
Use one animation multiple times on a page (especially in conjunction with tables). Re-using elements will help reduce your total file size and therefore load times as the animation is cached and then just replayed as needed. Try experimenting with motion which tiles -- especially useful for movement cycles.
preload
Preload animations for fast playback -- if, for example, your viewer is very likely to start at a reasonably image-light but interesting text-heavy page, preload animations to be displayed on following pages as 1pixel x 1pixel images at the bottom or some other inconspicuous part of the page. They will then be cached on the viewers harddrive and will load very quickly when they click to the page on which they are displayed full size.
reduce frame number
Usually 3 frames is enough to communicate a movement (any fewer, though, and it will blink in and out of existence).
timing
Pay very close attention to the timing of the animation and explore setting different frame speeds through it. The tempo of the animation affect the way that viewers 'read' it -- fast tempo giving an impression of excitement and speed, slow-motion building a sense of anticipation and drama.
Other Tricks and Tips
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 favour by making it a part of your aesthetic. Consider "cutout" style animations (a la Terry Gilliam's Monty Python animations or South Park). You're better off designing from the very start with limitations in mind (versus creating the perfect animation, then having to hack away at it to make it Web-worthy).
close action
Always keep the action close. Think carefully about constructing your action to best utilise frame optimisation. 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.
motion-blur
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 good cheat - it can also add a sense of reality to your higher-end animations.
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.
Stretching images with HTML (versus making them bigger in your image editing program) can reduce file size in comparison with the size of the viewed image -- allowing you to create more elaborate multiframed animations. However stretching transparent animations on a Mac can lead to 'artifacts' as though the pixel order has become confused.
Also note that GIF animations may play more slowly through Netscape than Explorer.
frame optimisation
The smaller the number of pixels in your animation the smaller the file size and the faster it will load. By selecting Options:Frame Optimisation, 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, and your application may not even include this feature, so you may have to hand-optimise the frames. Hand optimisation 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. This method also helps reduce the number of colours in each frame
using transparency
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 colour, which will be designated as transparent n the GIF animation program. (In this case, you would want your disposal setting to be N, as in Do Not Dispose.)
creating the illusion of sound
GIF animations do not support the inclusion of sound -- however there are a many tricks which can be used to create an analogous effect. Look to comics for some ideas. These include:
• word and sound balloons -- both for dialogue and 'sound effects'
• sound, smell and motion 'lines'
• use typography
optimising file sizes
If your animation has large, static areas, chop it up to save on file size. Rebuild your sliced-and-diced animations with tables or with the positioning abilities of cascading stylesheets. Remove complex elements from the animation that might be better utilised by another format (like a JPEG).
looping
If you are looping your animations the first frame should be the presentable one. Most browsers will display this as a static GIF so this will make the most pleasant appearance in the most browsers. If you aren't looping your animations remember the last frame will be the final one, the one that will stay on screen. You can remove the last frame completely, having the graphic apparently vanish once it has played.
<< home ] [ shiralee saul 2001