Advanced GIF

Great GIFs

On the Internet, GIF is the defacto standard for images on web pages. The standard GIF technical specifications specify the exact format for specifying these ubiquotous images.

Web Features

In addition to the compressed format and 8-bit color features of the GIF format that yield small file sizes making it an appropriate format for Web images, the GIF format has other features which make it an ideal Web image format. The extended features of transparency, interlacing and animation are discussed in the sections that follow.

Transparency

Fig. 1

The GIF format optionally allows one color of an image to be specified as a transparent color. If supported by a viewing program, (Web browser), this causes any underlying image or background to replace the transparent color in the image or 'show thru'. Given the original non-transparent gif in Figure 1, one can observe that the gray background does not 'show'thru' the image.

Fig. 2

The same GIF image can be saved specifying black as the transparent color, as shown in Figure 2. The problem with the display of the image in Figure 2 is that the transparent color, (black), exists in other areas of ther image besides the border. (Depending on the image, this can in a few instances be used to create a startling effect.)

Fig. 3

The above problem with Figure 2 can be solved by using an image processing program to change, (paint), the color of the black borders to a color that does not appear elsewhere in the image. (Care must be taken to only alter the border black pixels and not the interior black pixels.) This remapped color can then safely be set to be the transparent color. A better solution would be to select the part of the image not to be made transparent and then soften the edges of the selection by anti-aliasing against the desired background, (some image processing programs term this effect 'feathering'), and then optionally setting the background color to be transparent. The results of this technique of this can be seen in Figure 3.

Interlacing

The GIF format includes an option to aid in the viewing of images as they are being downloaded. For many images browsers will either wait until the entire image is downloaded before displaying or slowly showing the image from top to bottom, displaying the image as it is transferred. Interlaced GIF images are stored to allow alternating lines of the image to be viewed as they are received. Every 8^th line is displayed, followed by every 4^th lines, then every 2^nd line and then the remaining lines. This provides a fading in effect for viewing of the image during transmission. The JPEG image format supports a similar feature format: progressive JPEG. The Va Tech home page features a non-interlaced GIF logo which should of course be an interlaced VT GIF logo. Interlaced GIFs and progressive JPEG images are especially helpful to modem users.

Animation

Classic cell-based animation, (flip-page Disney animation), is possible through the GIF format. Successive screen images, (cell, frames, etc.) are stored in one GIF file. A GIF animation is downloaded once and 'played' from the client browser cache. The images are displayed in various ways depending upon animation control settings.

Cell Location
The X, Y pixel corrdinates of each animation cell (image) can be specified. This allows for movement to be performed by the browser instead of being drawn into each frame. A traditional cell animations each cell would have the same location, with the movement embedded in the frawings. The pixel coordinates are relative to the cell animation.
Intercell Delay
A display delay factor for each individual frame can be specified in 100^ths of a second. This is the amount of time the browser will pause before displaying the next cell image. Care must be taken to not specifiy to low of a value or the animation will 'fly off' the screen before it can be viewed.
Cell Disposal
After a cell has been displayed and the intercell delay has elasped an animator may instruct the browser to handle the image in one of several ways:
- No Disposal
  If an animation sequence uses a common background it need only be rendered once at the beginning of the sequence and the disposal method set to 'N', do not dispose.
- Previous
  When a common background is being used that is not drawn in each individual cell. Then each cell following the initial background cell should have their disposal method set to 'P', revert to previous.
- Background
  A Web page can be used as the animation background. In this case each cell must have their disposal method set to 'B', revert to background. The background must be chosen to be the same color for all cell images and set as the transparency color for the animation.
- Unspecified
  When classic cell animation is used, each cell contains all of the movement and covers the entire animation area then each cell's disposal method must be set to 'U', unspecified. This causes each cell to be removed as the next is rendered.
Transparent Background
A color chosen that has the same effect for each cell image of the animation as a transparency color for a single GIF image. All pixels in each cell that are equal to the background color are not drawn when the cell is rendered.

Other types of animation methods are used on the Web, (client-pull, server-push, JAVA), but require more learning overhead and bandwidth than GIF animations.

Further Exploration

Transparent GIF Links

Interlacing Imaging Links

GIF Animation Tools