Animated GIF banners and file compression by Grantastic Designs. Learn tips on reducing the file size of animated GIFS.

home > design tips > banner design > compressing animated GIFs

Compressing animated GIF banners

In another article entitled Using GIF Animations in Banner Designs, Grantastic Designs outlined the advantages of using GIF-animated banners to advertise a web site. Since most web publishers expect animated GIF banners to have a file size of less than 12K, this banner design tip addresses how to reduce the file size of your animated-GIF banners.

Colors
Dithering
Interlacing
Number of frames
File compression
Conclusion

Colors

GIF is short for Graphics Interchange Format. A GIF file can store from 2 to 256 different colors. Thus, when working on an animated GIF banner design, it is best to work in a 256-color palette.

To help keep file size to a minimum, use only a few high contrasting and complementary web colors because the more colors you use in your banner, the larger the file size will be. Utilizing the smallest color palette possible in your animated GIF banners will allow you to use more creative special effects in your animation.

Dithering

In order to display a full-color graphic image on a 256-color monitor, computers must simulate the colors it cannot display. They do this by dithering, which is combining pixels from a 256-color palette into patterns that approximate other colors. At a distance, the human eye merges the pixels into a single color. Up close, the graphic image will appear pixelated and speckled.

Using dithered images in an animated GIF banner will increase the file size. For example, photographs typically display thousands to millions of colors. If you use a photograph into a GIF banner, the resulting photo will become dithered because the GIF file format will reduce the colors in the photo to only 256 colors.

Thus, if you choose to use photographs in your animated GIF banner, try and use photos that do not use many colors in order to minimize dithering.

Interlacing

Interlacing is storing partial data from a single graphic image in multiple sequences. With interlacing, equally spaced sets of lines from the original image are stored together, and these sets appear one on top of the other in sequence. You will often see a set of horizontal lines appear first before you see an entire graphic image — this is interlacing.

The purpose of interlacing is to have a partial image initially appear on screen rather than having to wait for the image to download in its entirety. The main advantage of interlacing is that end users know that they are about to view a graphic image rather as opposed to viewing a blank space.

However, interlacing adds to the download time of an animated GIF banner. So before you make the decision to use interlacing on your animated GIF banner, you must decide which is more important: the addition to the overall file size or the interlacing effect.

Number of frames

You can decrease the file size of any animation by using the smallest number of frames possible.

Some special effects take longer to download than other special effects, both in animated GIF banners and rich media banners. Glow effects and fading text effects take longer to download because (a) the animation generally requires more frames to achieve the effects, and (b) glows and fades use a larger color palette.

If you want to use glows and fading text in your animated GIF banners, it is possible to achieve a smaller file size if you compress the animation via lossy compression.

File compression

Compression is a technique to make a file or a data stream smaller for faster transmission or to take up less storage space. In web design, there generally are two types of compression: lossless and lossy compression.

Lossless compression refers to a data compression technique where the file quality is preserved and no data is lost. Lossless compression is commonly used on GIF images, including GIF animations, but can only reduce file size to about half of its original size.

Lossy compression refers to a technique of shrinking file sizes by giving away some precision of detail. JPEG images are an example of a file that is compressed this way. By reducing the so-called quality of a picture when you save it, you can make the file size smaller. Many photos can take of loss of fine detail before the photo quality becomes noticeable.

If you find that your banner is 12.2K in size and you just cannot make it any smaller by using a small color palette and by limiting dithering and interlacing, the latest versions of Adobe Photoshop and Macromedia Fireworks will allow you to compress your GIF files via lossy compression.

Conclusion

The main goal of any banner is to inspire your target audience to click on your banner and visit your site. By creating a banner ad that downloads quickly, you are increasing the probability that this will happen.

If you have any specific questions about our banner design tips, or if you would like permission to republish this banner design tip on your web site or newsletter, please use our contact form or email us at info@grantasticdesigns.com.

Related banner design and marketing tips:

Featured Vendors

banner design tips - sizes, colors and image files