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.
 Figure 1: Original, full-frame animated penguin, 21,069 bytes Note: GIFBuilder 0.5 creates smaller full-framed animations than v 0.4  Figure 2: Full-frame 3 off-color blues patches removed, 21,001 bytes (use this to start from)
Figure 3: Frame Difference Optimized - 4852 bytes (includes no comment) ImageReady 3.0 w/ Transparency, no lossy
Figure 4: LZW Optimization, 4827 bytes GIF Wizard's best (run twice)
Figure 5: LZW Optimized - 4826 bytes (includes no comment) Fireworks 3.0 lossless
Figure 5a: LZW Optimized - 4818 bytes (no comment) WebPainter 3.0's best
Figure 5b: LZW Optimized - 4648 bytes (no comment) SuperGIF 1.04's best Lossy Records Start Here Figure 5c: Unnecessary pixels removed - 4682 bytes Hand tuned with GIFMation - Travis Anton, BoxTop Software
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.
Figure 5e: "Lossy GIF" - 4495 bytes (includes no comment) Fireworks 3 with Lossy=22% (smallest acceptable lossy setting)
Figure 5f: "Lossy GIF" - 4427 bytes (includes no comment) ImageReady 3.0 w/ Transparency, lossy = 36%, weighted (smallest acceptable lossy setting)
Figure 5g: "Lossy GIF" - 4230 bytes (includes no comment) ImageReady 3.0 w/ Transparency, lossy=22% interior, 50% exterior ice |
Contents
- Background and Foreground
- Reducing Color Palettes
- Frame Optimization New
- Results New
- GIF Animation Tutorial
- Conclusions New
- References
- "Squeeze the Penguin" Contest results summary
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: https://webreference.com/dev/gifanim/
Find a programming school near you