| |
| Tutorials |
When we talk about "optimizing" an
animation we are referring to reducing its file size. The smaller the file size of an
animation, the faster it will download over the Internet. Usually the goal is to make an
animation’s file size as small as possible while keeping the animation itself as
presentable as possible. There are many different ways to optimize a GIF animation. Here
are the possible ways to optimize a GIF animation:
- 1. Reduce the number of colors used
- 2. Use "Dirty Rectangle" Optimization
- 3. Use transparency for Inter-frame Optimization
- 4. Remove frames
- 5. Crop the animation’s physical size
- 6. Resize the animation to a smaller physical size
GIF Movie Gear can perform all of these optimizations. Let’s
look at each one. However, before we start let’s make a note of the animation’s
file size before optimizations. GMG provides this information in the status bar at the
bottom of its interface. At the far bottom left you will see the total number of frames in
the animation along with which frame is currently selected. The next box to the right
shows the dimensions of the animation followed by the total running time. Next to this you
will see the current file size of the animation along with its estimated download time at
a given Internet connection speed (you can change the Internet connection speed that GMG
targets with the Download Time item located in the View menu). The last box
shows the current zoom state.
This animation should be approximately
7,153 bytes (the exact number will depend on your GIF Signature setting
in Edit>Preferences>Export) which would take approximately 2 seconds to download over the Internet.
Although two seconds isn’t a very long time, we can shave some bytes off of this
animation so that it will download even faster.
NOTE: The effectiveness of the above
optimization methods vary from animation to animation. All of the specifics discussed
below include numbers that are specific to our sample animation. Results will vary
depending on the animation being produced.
|
This particular animation has very few colors
in it (take a look at the colors using Animation>Edit Global Palette), so it is
already somewhat "optimized." This is because the colors in all of the
files/frames amounted to only 35 colors when the frames were imported into GMG. In other
words, the animation’s "global palette" (the palette used for all of the
frames) contains only 35 colors. Animations that use a global palette can contain up to
256 colors. Typically, the more colors there are in an animation, the larger its file
size. Due to how the GIF format compresses, this is not always true, but this
generalization holds true for the majority of GIF animations.
You can reduce the number of colors in
the animation by either clicking on the Reduce Colors button on the toolbar or by selecting the Reduce Colors
option from the Animation menu. Figure 2 shows the Reduce Colors dialog box
which features two preview windows for the animation. The window on the left shows the
original animation and the window on the right shows the animation after it has been color
reduced. These side by side windows allow you to see the animation before and after color
reduction, which allows you to determine whether or not the color reduction adversely
affects the animation’s visual quality. GIF Movie Gear even allows you to zoom in
within the preview windows to scrutinize the differences more closely.
 Figure 2
In our example,
GMG automatically set the "Number of colors in reduced palette" drop down menu
to a 32 color (5-bit) palette. Since this only removes 3 colors from the animation, go
ahead and select 16 color (4-bit) from the "Number of colors in reduced palette"
drop down menu. Now press play and compare the two variations. The preview on the left
plays the original 35 color animation and the preview on the right plays the new 16 color
version of the animation.
Notice that there is
very little difference between the two versions of the animation. That’s the key.
Also notice that the preview windows provides before-and-after file size information. In
figure 2, the information below the right window indicates that going from a
34 color palette to 16 color palette will remove 1089 bytes from the animation and that the
1089 bytes saved amounts to a 14.4% file size savings. Reducing the animation to a 16 color
palette reduced the overall animation down to 6,334 bytes.
If you look very carefully, you will
notice that the yellow "propulsion rings" have become slightly orange-ish after
the palette reduction. You can fine-tune single colors like this using the Edit Global
Palette as discussed earlier.
|
Dirty Rectangle Optimization refers to a
method of optimization that involves cropping frames in a GIF animation to their smallest
needed rectangle. These frames are then played one atop the other using pixel coordinates
for placement. The best way to understand this is to look at an example. Our little space
alien example animation doesn’t benefit much from this type of optimization, so
let’s look at a different example.
First let’s look at Figure 3. (Click here to get this animation file). As
you can see, this animation is your basic bouncing ball animation. However, notice that
the background (the yellow wall and the brown floor) have a noisy texture. Most
importantly, notice that the background is identical in each frame: it is redundant
information that is repeated over and over. This texture might make the animation a bit
more interesting but it’s not so good for file size. Before optimization, this
animation is 39.6Kb. This animation would take 5.7 seconds to download with a
56K modem. Fortunately we can do better than that.
Figure 3
Open the sample animation file ball.gif (Click here to get this animation file).
Now click on the Optimize
Animation button or select Optimize
from the Animation menu. For now, make sure that the "Replace duplicate pixels
with Transparency" option in the Optimize Animation dialog box is not
selected and then click OK. The results of this operation is that all of the frames except
for the first have been reduced to smaller rectangular areas (as shown in Figure 4 where a
few frames from the animation are shown).
Figure 4
This operation has reduced the file size to only 11.5 Kb.
That’s an over 30K file size savings. Now the animation takes just 1.6 seconds to
download. Much better.
It helps to know what’s happening
with the "dirty rectangle" optimization option because of its impact on how you
might design your animation frames, so let’s quickly cover how this form of
optimization works. Basically each of the frames after frame 1 have been reduced to the
smallest needed rectangle. The duplicated or redundant portions of the frames are cropped
out. So, each frame after frame one is actually simply a smaller GIF file. The smaller GIF
files are displayed over the first frame using pixels coordinates for their placement.
Since the smaller GIF images only partially cover the first frame, you can still see parts
of the original frame as the animation plays.
To verify this, double click on the
second frame of the animation. This will open the Frame Properties dialog box. Notice that
the Offset X and Offset Y options are (or should be) 26 and 12 respectively. These
coordinates correspond to the top left corner of the image in the frame. Change these both
to 1 and notice what happens. Now the contents of the second frame are positioned over the
top left corner of the frame. Undo this change using Edit>Undo or
the keyboard shortcut Ctrl+Z.
Now notice that frame 5-8 actually haven’t been cropped to the
smallest needed rectangle. All we need is the ball and the shadow, but areas to the left
are still visible. This is because there are very slight changes in that region which GMG
has detected. Fortunately we can easily fix this manually.
Click on frame 5 and select Move/Crop
from the Frame menu. Notice that the GIF image for this frame is shown in the
preview window with a bounding box around it. Click and drag the center square on the left
side of the GIF image in the preview window. Drag to the left until the bounding
box’s left edge is almost touching the blue ball. Let up on the mouse and click OK.
If you repeat this operation for frames 6, 7, and 8 (see Figure 5) you should be able to
lop off another 2.5K or so from the animation’s file size. The final animation still plays
exactly the same as the original (no loss of data!), but the file size has
dropped from 39.6Kb to 8.9Kb.
|
An additional way to optimize an animation is
to make the rest of the redundant portions of animation, those that are inside the
"dirty rectangles," transparent. This often results in file size savings. You
may already be familiar with the fact that GIF file can contain transparency information.
In other words, some colors in a GIF file can be made transparent. When parts of a GIF
file are transparent, they show through to any background imagery behind them.
For a static GIF image, this would mean
that transparent portions of a GIF file would show through to the Web page’s
background color or texture. You can take advantage of transparency within animations as
well. Essentially, a GIF frame can contain transparent areas that show through to earlier
frames. We refer to this as "Inter-frame Transparency."
All you need to do to optimize the
animation with inter-frame transparency is click on the Optimize Animation button or select Optimize from the Animation
menu. The Frame Reduction section has three options: "Shrink frames to
smallest needed rectangle," "Replace duplicate pixels with transparency,"
and "Remove unnecessary frame." We are only concerned with the first two options
for the purpose of inter-frame transparency optimization. The "Shrink frames to
smallest needed rectangle" option (which we just talked about in the "Dirty
Rectangle optimization" section) must be selected before you can use the
"Replace duplicate pixels with Transparency" option.
The "Replace duplicate pixels with
transparency" option takes the idea of making portions of GIF animation frames
transparent a little further than the "Dirty Rectangle" method. The idea is to
remove all unnecessarily redundant pixels between frames. Sometimes this results in a
significant file size savings, but not always. As with most optimizations, it depends on
the animation itself.
For example, with the "Replace
duplicate pixels with Transparency" on, the bouncing ball is reduced from 8.9Kb to
7.2Kb--a tidy little savings accomplished without any loss of data. On the other hand on
the alien spaceship example the was no savings. In the alien spaceship animation there are
a lot of black pixels around the little space ship that are redundant between frames 2, 3,
and 4, but this doesn’t mean that making these areas transparent will decrease its
file size--in fact it will likely increase the file size. Consequently, there is no
difference in the optimization when you have the "Replace duplicate pixels with
transparency" option on or off.
This apparent lack of transparency is
because GMG is smart about how it applies transparency. When it determines that a
transparency option will actually increase the file size, it avoids actually applying that
option. So, for alien spaceship example animation, GMG doesn’t actually use
inter-fame
transparency even if you turn it on, because it would increase—not decrease—the
animation’s file size.
In general, you can safely leave both of
these options on and be confident that GMG will choose the best combination of
inter-frame transparency optimization options that will result in the smallest file size or the large
file size savings. They were discussed separately in this tutorial only for instructional
reasons.
Incidentally, the "Remove
unnecessary frame" option removes any duplicate frames in an animation. This feature
is useful because some early GIF animation designers did not realize that each frame can
have its own timing, so they used multiple copies of a given frame to build in pauses. For
example, rather than timing a frame for a second, they would include 10 copies of the
frame each timed at 10/100ths of a second. Those 9 extra frames added needlessly to the
animation’s file size.
Finally notice that you can remove any
inter-frame transparency and/or dirty rectangle cropping in any animation (including any
animations you download from the Web) by selecting Unoptimize from the Animation
menu. Below are the original and optimized versions of the bouncing ball animation:
Original: 39,631bytes
|
Optimized: 7258 bytes |
|
Removing frames is simply a matter of selecting and
deleting a frame. Of course, the fewer frames in an animation, the smaller the file size.
In the spaceship animation, click on frame 4 and delete it. Notice that the resulting file
size of the animation has been reduced to only 4,748 bytes a saving of almost 1,500 bytes.
(You can restore the frame by using Undo, found in the Edit menu.) GMG also
features an option called Thin (Reduce Count) (in the Animation menu). This feature
automates the removal of frames. For instance, if you have an animation with 20 frames,
you can have GMG remove every other frame to bring the animation down to only 10 frames.
This feature is particularly useful for animations created from digital video.
|
As a general rule, the dimensions of a GIF animation
should be no larger than they absolutely have to be. For example, our example animation
(the spaceship) is now overly large after we’ve deleted the last frame. No motion
occurs over a significant portion of the bottom of the animation, so we can slice a bit
off the animation’s file size by cropping out this portion on all of the frames.
To do this, select the frame that
contains artwork that extends furthest to the bottom (which was frame 3). Now choose Crop
from the Animation menu. To crop the animation, you simply drag the handles of the
marquee in the preview window to the position you wish to crop to.
To crop this animation,
click on the bottom center handle and drag up until the Height is about 150 pixels. GIF
Movie Gear also allows you crop numerically and you can preview the results before
cropping. Click OK. Cropping the animation should reduce its file size to 4,733 bytes.
|
Reducing an animation’s dimensions is an
obvious way to reduce the file size of an animation. GIF Movie Gear allows you to resize
animation with the Resize option available in the Animation menu. You can
resize animations according to numerical pixel dimensions or percentages. There is a
"Maintain Aspect Ration" option to keep the animation from becoming deformed.
Resizing animations can adversely affect the palette and inter-frame transparency
optimization so usually it is best to resize the animation before optimizing the palette
or inter-frame transparency of the animation. Reducing the spaceship animation’s
dimensions by 80% of its cropped size results in a file size of 3,551 bytes.
|
|
|
|
| |
Optimizing Animations
