Background and Foreground

Optimizing Animated GIFs

Figure 4: Cool Central Home Page

When we designed Cool Central, we wanted an eye-catching look with lots of movement, but fast download times. We settled on a goal of 30Kb total per page. We decided on a single visual theme, an iceberg, with melted portholes showing movement outside the berg; see Figure 4. The first two pages of Cool Central have four animations, a static logo, and a seamless background "ice" JPEG. By feathering our foreground graphics we were able to make the background graphic appear as the foreground, and the foreground graphics appear as the background (got that?). After countless hours of tweaking we finally got the seamless appearance we wanted, but without the long download times associated with large one-screen graphics. After deducting for our 1.2K background and the 4K of text we realized we would have make each GIF no greater that 5K in file size.

Penguin on a low-pixel diet

In conventional GIF animation, each additional full-size frame adds a significant percentage to the file size ((1/number of frames)*100). With seven frames, our mascot penguin took 21Kb (Figure 1) and waddled across the screen. In order to meet our goal of no more than 5K per animation we had to find a way to cut the file size by more than a factor of four.

Since animated GIFs are essentially multiple GIFs with timing and transparency information, the same optimization principles apply: minimize colors and maximize crop. The secret of shrinking animated GIFs is to save only the parts of the animation that change from frame to frame. By overlaying these changes on an initial full-sized "backdrop" frame you can create animations that appear identical to the full-frame version but are dramatically smaller.

Minimize Key Frames

What you end up with is an initial full-sized "key" frame and several "motion" frames. This is a well-established technique used in game animation. Once you crop the motion frames, they become a much smaller percentage of the file's size. In our case the key frame is 2948 bytes, while the motion frames range from 395 to 629 bytes. Strategically, there's more to gain by optimizing the 3000 byte key frame than the six motion frames, unless there are a lot of motion frames. So you can see the importance of minimizing the color palette and complexity of the initial frame.

What distinguishes the different animation programs is how efficiently they handle color palettes and frame changes. First we'll reduce the color palette, then we'll concentrate on paring the pixels per pane.