Optimizing Animated GIFs / GIF Animation | WebReference

Optimizing Animated GIFs / GIF Animation

Optimizing Animated GIFs

by Andrew King

Introduction

Animated GIFs 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. Finding ones that are browser-friendly and small in file size is another matter entirely. This article shows how you can create the smallest possible animated GIFs.

To illustrate the process Penny the Penguin, the animated logo for Cool Central's Site of the Moment, has bravely volunteered to go on a crash diet (Figure 1). I'll walk you through her optimization, and discuss the specific issues, techniques, and key features of available software as we go. Note that these techniques can be used on any GIF animation including banner ads, which are often limited to 7-10K in file size.

This article deals with animated GIFs only, for more info on how to optimize all types of Web graphics, try Optimizing Web Graphics.


Full frame Penguin animation

Figure 1: Original, full-frame animated penguin, 21,069 bytes

Note: GIFBuilder 0.5 creates smaller full-framed animations than v 0.4

Full frame Unnec. Colors Removed - 21,001 bytes

Figure 2: Full-frame 3 off-color blues patches removed, 21,001 bytes (use this to start from)

ImageReady 2 w/ Transp

Figure 3: Frame Difference Optimized - 4852 bytes (includes no comment)

ImageReady 3.0 w/ Transparency, no lossy

LZW Optimization Animation

Figure 4: LZW Optimization, 4827 bytes

GIF Wizard's best (run twice)

Fireworks 3.0

Figure 5: LZW Optimized - 4826 bytes (includes no comment)

Fireworks 3.0 lossless

WebPainter 3.0

Figure 5a: LZW Optimized - 4818 bytes (no comment)

WebPainter 3.0's best

SuperGIF 1.0

Figure 5b: LZW Optimized - 4648 bytes (no comment)

SuperGIF 1.04's best
Current "lossless" one-step record


Lossy Records Start Here

Figure 5c: Unnecessary pixels removed - 4682 bytes

Hand tuned with GIFMation - Travis Anton, BoxTop Software
Winner of the original "Shrink the Penguin" Contest (with a 4432 byte manually reduced and tuned bird)

John Ahlquist's record

Figure 5d: Unnecessary pixels removed - 4600 bytes

Hand tuned with Fireworks - John Ahlquist, Macromedia

"I opened the original in fireworks, fit the penguin at 400%, then turned off the background layer's visibility. Then I stepped through the frames, 2-5, and edited the GIF layer's images. I double clicked on it to edit, and then used the eraser tool (set to 1 pixel wide) to clear out pixels that were not part of the penguin. The penguin is basically black, white, gray and red in this animation. So I erased the blue/white pixels that crept in around the edges.

Took me about 10 minutes to do it carefully. Final size, 4600 bytes.

Nice job John.

Fireworks 3 w/ Transp Lossy=22%

Figure 5e: "Lossy GIF" - 4495 bytes (includes no comment)

Fireworks 3 with Lossy=22% (smallest acceptable lossy setting)

ImageReady 3 w/ Transp Lossy=36% weighted to ice

Figure 5f: "Lossy GIF" - 4427 bytes (includes no comment)

ImageReady 3.0 w/ Transparency, lossy = 36%, weighted (smallest acceptable lossy setting)

ImageReady 3 w/ Transp Lossy=22% interior, 50% exterior ice

Figure 5g: "Lossy GIF" - 4230 bytes (includes no comment)

ImageReady 3.0 w/ Transparency, lossy=22% interior, 50% exterior ice

Contents

Quick Tips and Resources

ImageReady 3 (beta)
Adobe's updated ImageReady 3 (bundled with Photoshop 6) with a unique "weighted optimization" feature that allows regional compression of your images. This new feature allowed us to selectively apply the lossy setting to the ice, and not harm a feather on penny, for an lightweight 4427 bird, and with different interior/exterior lossy settings, a 4230 bird. See the results. (See Wendy Peck's review of Photoshop 6). 082800
Xara 2.0
Xara shrank our test penguin down to 4884 bytes using frame differencing. See a tutorial on using Xara. 081600
SuperGIF 1.0
BoxTop's newest creation leaps over the "lossless" competition with a 4648 byte bird. SuperGIF does one thing, and it does it extremely well, optimizing animated GIFs. Employing interframe optimization for LZW and a smart re-dithering algorithm SuperGIF optimizes animated GIFs smaller than any non-lossy program we tested. (Mac/PC) 000808
Fireworks 3.0
Along with improved interframe optimization over version 2.0, Fireworks 3 adds a lossy image preprocessing slider, similar to Adobe's Imageready. Is this the holy grail of animated GIF optimization? Read the results. 000807
Ignite 1.0
This just in from the UK, Ignite. Ignite is a product focused on one thing, making your images smaller for the Web. Features auto-optimization of GIFs and JPEGs, splitting to isolate the moving portions of your image, and more. Numerous features for a v1.0 product, unfortunately the optimization is only bounding box (5177 bytes for a lossless GIF89a optimization) though at the default settings (used colors, adaptive, web safe palette, 20% dither) it produced a svelte 4349 byte bird. The interface takes some getting used to, to optimize open an image, select from the new output menu, and click on the resulting "outputx.gif" tab. 991122
Ulead GIF Animator 4.0
For Windows users I recommend Ulead GIF Animator. It does frame differencing automatically and produced a 4852 byte bird. (i.e., performs a frame difference and palette optimization) (version 1.5 had LZW optimization and for some reason version 2.0+ removed LZW, and performs frame only differencing). 991112
WebPainter 3.0
Totally Hip's WebPainter 3.0 now includes frame differencing and hybrid LZW inter-frame optimization and with comments removed (Edit->Document Info and erase comment), came in first for lossless LZW-optimized file size. WebPainter's interface rivals GIFMation's in ease of use and includes many Photoshop-like features for image editing and creation. Like GIFMation, WebPainter is cross-platform (Mac/PC). 990817
ImageReady 2.0
Adobe's leap-frogged (leap-penguined?) the competition with its nifty new "lossy GIF" feature added to both ImageReady 2 and Photoshop 5.5, now bundled together. ImageReady 2 features improved frame differencing (transparency on) and a new "lossy GIF" slider that allows dramatic reductions in file size with little or no loss of image quality. Without the lossy feature IR2 shrank Penny down to a mere 4852 bytes, with lossy set on at 22% (the maximum visually indiscernible setting I found for this animation) the test penguin shrank to an amazing 4469 bytes. 990809 More... (Mac/PC)
Fireworks 2.0
Macromedia released Fireworks 2.0 this week and it's hot. The new version features automatic comment removal and produces the smallest animated GIFs yet. Now integrated with Dreamweaver Fireworks 2 takes tweaking to another level and allows anything to be editable at any time. (Mac/PC). 990222 More...
GIF Wizard
This on-line GIF reduction program can reduce GIFs (animated or otherwise) beyond conventional methods, and leapfrogged Fireworks 1.0 in our most recent test. In one (or two) steps you can create highly optimized GIFs with less work. GIF Wizard's "remove repeated image data" is actually superior to the frame differencing, as it minimizes the frequency of pixel patterns to optimize LZW compression. Note, to achieve the compression levels shown here, you must use the pay version. 981021
WebUtilities.com
Check out Ulead's new Web utilities site with its interactive on-line graphics optimizer based on their SmartSaver product. You can interactively set various optimization parameters (interlace, smooth, dither, palette, number of colors) and view and save your results, until you've got what you want. The GIF optimizer reduced our test penguin down to 4893 bytes (at 24 colors, includes a 36 byte comment), and supports frame differencing. 980911
PhotoAnimator 1.0
Extensis' PhotoAnimator includes efficient frame differencing for optimizing animated GIFs. On export, select "interframe transparency optimization" and PhotoAnimator performs a frame difference between frames saving only the pixels that change from frame to frame. It also automatically removes any comments. PhotoAnimator reduced our test penguin down to a mere 4878 bytes. For a more in-depth review read the July 27, 1998 Update PhotoAnimator 1.0. 980727
Adobe ImageReady 1.0
On Tuesday, July 7th Adobe will release Imageready 1.0. We received a preview of this released version and it is essentially unchanged from the M82p beta we reviewed earlier, with a few improvements. Color palette reduction adds a "Selective" method which is a faster variant of Perceptual which produces slightly different results, and the DitherBox plug-in is now included. The animated GIF interframe optimization remains unchanged, ImageReady includes both "dirty rectangles" (the minimum bounding box method) with transparency off and frame differencing with transparency checked on. The interface is superb. For Photoshop users the transition is a no-brainer. For a more in-depth review read the June 15, 1998 Update Fireworks vs. Imageready. 980702
GIFBot
Netmechanic's new entry into the online GIF reducing arena. Unfortunately, it only reduces colors, no interframe optimization. 980610
Fireworks
Macromedia released Fireworks yesterday, and version 1.0 is much improved from the beta I reviewed. Fireworks is a new class of Web-centric image creation and optimization program, and merges many features found once in separate graphics products. Fireworks also includes a powerful set of image manipulation and creation tools and can handle most Web image formats. Plus, it includes one-step GIF89a optimization that automatically optimizes your superpalette, and performs LZW optimization. Finally, there's one program you can buy that combines the creation, and manipulation of Web images, with efficient optimization. 980610
Animato
Animato is a new GIF animation program for the PC. It's a paint program with some nice image manipulation features, with minimum bounding rectangle interframe optimization. You can get more information and download the shareware version at Lake Clear Software's Web site. 980609
GIFCruncher (NEW SERVICE)
Shrink your static and animated GIFs from your hard drive or the Web with GIFCruncher's HVS technology. Best of all, it's free for single images. Performs frame differencing for interframe optimization with HVS color reduction. Another free Web-based service for webmasters brought to you by Digital Frontiers and Mecklermedia. 980522
Adobe ImageReady
Adobe's entry into the image processing tool pool: it looks a lot like BoxTop's GIFMation and will be familiar to Photoshop users. It has a number of powerful image manipulation features, including editing of frames, layers, masks, selections, filters, and animation viewing and optimization. The optimization includes dirty rectangles (default) and frame differencing (transparency turned on). ImageReady 1.0 - M71. 980414 (corrected 980702 - frame differencing added)
Picobello
Windows users have another GIF89a optimization alternative, Picobello. It reduces images using true color reduction, and can selectively reduce individual colors. You can convert any image automatically into a default Web-safe palette. 10-2-97
SPG's ColorWorks:WEB 3
Window's users, check out this powerful new integrated graphics suite from SPG. Paint, view, animate, tweak, and optimize graphics for the Web. The GIF Animator component has lossless or lossy frame differencing and minimum bounding box frame optimization. 8-18-97
BoxTop's GIFMation
For the Mac (and now Windows!), there's finally a compelling alternative to GIFBuilder, BoxTop's GIFMation. GIFMation 2.1 adds optimization features (intelligent frame differencing) to 2.0's newly revamped and intuitive interface. The combination makes this product a pleasure to use. Add on BoxTop's unique touchup tools and you've got one gnarly GIF grinder. 6-25-97
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, including the 216-color "non-dithering" palette, read the companion article Optimizing Web Graphics.

Note: This article is an expanded version of the article that first appeared in the June 1997 issue of Web Techniques.


Comments are welcome


Created: October 7, 1996
Revised: August 28, 2000

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