Optimizing Animated GIFs / Crop with Frame Optimization | WebReference

Optimizing Animated GIFs / Crop with Frame Optimization

Crop with Frame Optimization

Optimizing Animated GIFs

The GIF89a spec includes position values for each frame, so smaller frames can be positioned inside the animation. You can use this option is to create the illusion of movement of a static object, for example a football floating by. You can specify the position within the animation of the rectangle that bounds only the football.

Frame positioning also lets you isolate the elements that change from frame to frame, and position them within the animation. GIFBuilder's "frame optimization" feature automatically crops away the non-changing areas in all but the first frame and keeps the rectangle that bounds the area(s) that change. The first frame acts as a background, and subsequent smaller frames layer over it. The resulting file can be dramatically smaller, as you aren't storing the entire frame, just the part that changes.

Combining frame optimization with the frame differencing stores only the pixels that actually change. I found that using the full-frame differences and letting GIFBuilder do the cropping and positioning was the best way to retain registration (see Figures 19-21).

Frame Optimization Method Comparison

Min. Bounding Rectangle

Fig. 19: Min. Bounding Rectangle

 Frame differencing

Fig. 20: Frame differencing

 LZW optimization

Fig. 21: LZW optimization

Of course, if you have Web access you can follow the instructions above except leave your animation full-frame. Browse on over to https://www.gifwizard.com and run it through. GIF Wizard automatically does:

all in one pass.

GIF Wizard Tips

Page at a time
In addition to optimizing GIFs off the Web or your hard drive, you can optimize an entire page at a time. Just type in the URL of the page you want optimized and it'll shrink all your GIFs!
Run it twice
GIF Wizard adds a comment block if it shrinks your file by more than 2% or 200 bytes. To remove this block just run it a second time.
intro ->backgroundcolor palettesframe optimization
resultstutorialreduce paletteframe differencing
set optionscroptweakconclusions

Comments are welcome

 


Created: Oct. 7, 1996
Revised: Oct. 18, 1999

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