Optimizing Animated GIFs / GIF Animation (banner study mockup) | WebReference

Optimizing Animated GIFs / GIF Animation (banner study mockup)

Optimizing Animated GIFs

by Andrew King ([email protected])

Introduction

GIF Animations are everywhere. Since they were first used on a Web page (1) animated GIFs have spread through the Web like wildfire. For good reason, they're easy to make, easy on servers, and ideal for smaller animations. However, finding ones that are browser-friendly and small in file size is another matter. This article shows how you can create the smallest possible animated GIFs.

During the creation of our new Web site, Cool Central, we found it difficult to meet our goal of 30 Kb per page and still include four or five animations. The problem with conventional GIF animation is that each additional full-size frame adds a significant percentage to the file size ((1/number of frames)*100). The first step we tried was using the "frame optimization" feature of GIFBuilder. This cut the file size considerably by using only the rectangle that bounds the pixels that change from one frame to another (2).

I thought, why not take it a step further and use only the pixels that change from frame to frame? GIFBuilder 0.4 did not have this feature (yet, I've suggested it to the author, Yves Piguet), but Debabelizer does. By using Debabelizer's compare feature, you can create an image that contains only the pixels that change from one frame to another. By combining these "difference frames" with an initial full-size "background" image you can create the smallest possible GIF89a file. For Windows users I recommend ULead's PhotoImpact GIF Animator. Flash! - PhotoImpact now does this entire difference method automatically! (i.e., performs a frame difference and palette optimization).

Minimize colors - For GIFs the smaller your palette, the smaller the GIF, especially with multi-framed GIF89as. To find out more about shrinking graphics and color palettes read our companion article Optimizing Web Graphics.

GIF Wizard - This on-line GIF reduction program can reduce GIFs (animated or otherwise) beyond conventional methods. Combined with frame optimization or the difference method, you can create highly optimized GIFs with less work. GIF Wizard's "remove repeated image data" is actually superior to the difference method, as it optimizes the run lengths of flat areas used in LZW compression.

Contents

Comments are welcome


Created: October 7, 1996
Revised: May 2, 1997

URL: https://webreference.com/dev/gifanim/