Image Tools Group

Part 4.
Other parts:

| 1. The GIF-format. The application and features.
| 2. The GIF87a and GIF89a standards.
| 3. The creation of the animation

During creating the animated GIF-files the main problem is in the following: the necessity of saving a sequence of images may lead to creation of too big files. Working in WWW large file sizes are extremely undesirable, because they increase the loading period. The loading speed depends on a file's length and is so much important, that most of big Web-servers strongly restrict the file size.
There are several standard methods of the GIF-image size reduction. They are the following: the reduction of the number of colors in the image, the reduction of the number and the size of the frames and the rejection of half-tones.
The basic principle of these methods is "the less, the better". The less colors, frames and changes when moving from one frame to another, the shorter files we get. Nevertheless this reduction leads to quality worsening. It's important to find an optimal combination of size and quality.
Let's take up the optimization methods by the example of previously worked with files.
Let's remember the initial file sizes:

(254x226) - 14 523 bytes | 12 frames - 11 709 bytes

File size
If you are not limited by certain restrictions, that the animated GIF-file should "fit in", try to imagine its maximum size for one of the frames.
For example, in a "horse-file" we can trim the outermost boundaries without any loss for the animation. Let's trim 8 pixels from the above, 4 from the left and 19 from the right.

(231x218) - 14 322 bytes

A number of frames
The file weight can be reduced by the reduction of the number of frames. The more frames in animation are used, the heavier is the file. If it is possible to fit the animation in 8 frames instead of 12, then create an 8 frames animation. In a ball example 4 frames are cut out. The ball still bounces off the walls (may be not as smoothly). But the size has reduced greatly.

8 frames - 8 081 bytes

The color palette optimization and the reduction of the number of colors
Already during working with the initial frames you should think of the reduction of the future file. Try not to include too many colors to animation. It is better to optimize the frame color palette size before the including it into the animated GIF-file.
The GIF89a format provides for the animation color data storage, it is available either in a united global color palette or in a sequence of local color palettes. The local color palettes should be excluded. The use of the united global color palette for the whole animation means, that all the colors are coordinated between the frames.
As a rule, a simple reduction of the number of gradations, making up an image, is not enough: it is necessary to reduce the respective value in a file color palette. It is better to do color palette editing manually, not by standard methods, because the automatic reduction may probably result in the incorrect substitution of the gradations with an area of several used colors. It is necessary to determine visually the number of colors in the image, whereupon to correct the color palette elements.
The smaller is the number of colors in the color palette, the shorter are the files. Small color palettes take less place when stored. Thus the 16-color color palette needs 4 bits, whereas the 128-color color palette needs 7 bits.
The monochrome images (especially text, logos and computer graphics) work better with small color palettes. During creating of animated GIF-images, the photos and files with gradient fill should not be used, because they contain a big number of different colors, that increases the color palette size.

| A file size - 14 322 bytes

The horse's color palette consists of 256 colors that take 8 bits. But if we look more attentively, we may not go beyond 16 colors and a 16-color color palette that takes 4 bits.

| A file size - 11 142 bytes

The animation layers
The incredibly small GIF-files may be created when 2 features of the GIF-format are used: the GIF-format allows the availability of transparent areas; and the GIF-format enables the repainting mode and the animation frame cleaning. You can create an animation by simply applying the layers with a new image one over another, admitting the translucency of the previous frame fragments, so you can image frames with expanded transparent areas. The transparent areas are well packed, as for as in the compression algorithm they are considered as the continuos monochrome areas.
In an example of a horse only the position of the head and the tail is changed, whereas the horse's body and the lawn stay motionless. That's why we'll make the motionless area in frames 2, 3, and 4 transparent.
Let's check out how the image's reduced.

Frames 2,3 with transparent areas.
The initial animation. | The final animation.
Size - 11 342 bytes | Size - 8 499 bytes

This method is applicable only for opaque pictures.

The image excess parts trimming
The size of the image is usually determined in the first GIF-animation frame, the following frames may come smaller. Moreover they may be positioned in any place within the first frame's boundaries, dimensioning the relative coordinates of X and Y. Thus the excess data of an image may be trimmed and the file size may be reduced. For example, we may reduce the file size in horse image that is we can trim the unnecessary transparent areas and set the shift.

The initial animation. | The final animation.
A file size - 8 499 bytes | A file size - 7 957 bytes

The file structure
To effectively optimize we need to know something about the compression algorithm. The GIF is being compressed before saving to a hard disk by LZW-method. The peculiarity of this type of compression is that the compression better works in areas with a monochrome color, and worse in areas with a set of multicolored points.
For example, if we take a horizontal- or vertical - stripped background (red and white occupy equal places), the file with the horizontal-stripped background will be of the smaller size.

The gradient fill direction
The file size also depends on the gradient fill direction. The mapping of the horizontal gradient fill takes less place on the disk, than the vertical one, because the image scanning in LZW-compression goes line-by-line. But it's better to completely exclude the gradient fill.

The optional data deletion.
To reduce the file size the text commentaries and headers may be deleted.

The initial file size - 14 523 bytes | After optimization file size - 7 957 bytes

Image Tools Group 2004.

Home / Previous part / Back to top