Anatomy of a GIF Image

A single-frame GIF file breaks down into two major parts: the header and the image data. A multiframe GIF file is similar, except that it can include any number of sets of image data after the header. Of course, I've left out some important details in the name of overview, but we'll get to them shortly.

Indexed Image Data

GIF images have, at most, an 8-bit color resolution. With 8 bits, there can be, at most, 256 colors.

GIF image data does not itself represent RGB values. This would be impossible because each of the three components of an RGB triple requires 8 bits, and thus a total of 24 bits for the entire value. Instead, the GIF image data is an index into a palette that defines up to 256 RGB values, as Figure 11.1 shows.

Figure 11.1. Each Pixel in a GIF Image's Data Is Actually an Index into a Palette That Can Contain Up to 256 colors.


You need to know about the GIF indexed image data for several reasons. One reason is the general understanding of the format. Another is that, knowing this, you can easily see why the format is limited to 256 colors. I need to point out here that all GIF images don't have the same palettes each and every one can have a different palette. The last of my three reasons for knowing how GIF data is laid out is that if you want to set a transparent color, you do it with an indexed value and not an RGB value. We'll talk more about this later.

GIF Data Compression

OK, let's say you open a GIF file with a disk editor and want to look at the data. You want to get a look at some of the data indices. Although this is a nice thought, it won't work because GIF image data is compressed by a technique know as LZW (which stands for Lempel, Ziv, and Welch the original creators). So the image data will look completely unintelligible.

There have been times when I wanted to see the data indices for a GIF image. I resorted to running the debugger and examining the memory contents of an image object, or to saving the image to disk as a BMP file. In the .NET Framework, it's a lot easier to save a GIF image as a BMP and then look at it with a disk editor.

The GIF Header

The GIF header provides a descriptor of the image. The header contains the width and height of the screen (which 99.9 percent of the time is the same as the width and height of the image); some flags indicating palette information, such as whether there is a global palette and, if so, how large it is; a background color; and an aspect ratio value. Table 11.1 shows the layout of the GIF header.

Table 11.1. The GIF Header





3 + 3

"GIF" + "87a" or "GIF" + "89a".

Logical Screen Descriptor

7 + Palette Entries x 3

This section globally describes the image.



Width of logical screen.



Height of logical screen.



Screen and color information:

Bits 0 2: size of global palette

Bit 3: 1 if palette is sorted

Bits 4 6: color resolution

Bit 7: 1 if global palette exists



Background color.



Aspect ratio.


Number of palette entries x 3

Global palette.

The Local Image Descriptor

Because GIF files can have more than one image, it's important that each image can be described independently. For this reason, the GIF format provides the Local Image Descriptor section for each image in the file. This section describes the image that follows. It includes x and y positions, width and height, and palette information. You can see a description of the Local Image Descriptor in Table 11.2.

The Graphics Control Extension

The earlier GIF format is identified by the signature "GIF87a", while the later version that we use today is identified by the signature "GIF89a". The newer version allows additional information that adds flexibility to the format, including the capabilities to make an image transparent and to animate a set of images.

Table 11.2. The Local Image Descriptor




Image Description


This section describes how an image is stored in a file.



Block type (will be 0x2c).



X position of image on screen.



Y position of image on screen.



Width of image.



Height of image.

Local Color Palette (optional)


This is a color palette for this local image. In this way, a different palette can be supplied for each image in an animation. This palette, though, is optional.



Screen and color information:

Bit 0: 1 if there is a local palette

Bit 1: 1 if image is interlaced

Bit 2: 1 if palette is sorted

Bit 3: reserved, always 0

Bits 4 7: size of local palette


Number of local palette entries x 3

Local palette data.

Image data


Compressed image data (indexes into the palette).

Table 11.3. The Graphics Control Extension Block




Hex 21 indicates the start of an extension block.


Hex F9 indicates the extension block is a Graphics Control Extension.


Size of the information.


Information about what the decoder should do after the image is displayed.

Bit 0: 1 if there is a transparent color.

Bit 1: 1 if the decoder should wait for user input.

Bit 2: 1 to leave graphics on screen alone.

Bit 3: 1 to erase graphic to background color.

Bit 4: 1 to restore previous image.

Bits 5 7: reserved, always 0.


Delay in 100ths of a second.


Treat this palette color as transparent.

The Graphics Control Extension is used in the AnimatedGif class to provide transparency and animation delay information. Extension blocks can have a variable size, but the Graphics Control Extension variety has four bytes of data. Table 11.3 shows the Graphics Control Extension Block.

ASP. NET Solutions - 24 Case Studies. Best Practices for Developers
ASP. NET Solutions - 24 Case Studies. Best Practices for Developers
ISBN: 321159659
Year: 2003
Pages: 175 © 2008-2017.
If you may any questions please contact us: