How Animated GIFs Store Canvas Dimensions

Animated GIFs efficiently store large canvas dimensions while using smaller individual frame updates by separating global screen specifications from localized frame data. The format defines a master canvas size in a global header, while each subsequent frame contains its own dimensions and coordinate offsets. This design allows the file to update only the modified portions of the screen rather than rendering the entire canvas on every frame, significantly reducing overall file size.

The Logical Screen Descriptor

At the beginning of any GIF file (after the signature and version block), the file format defines the Logical Screen Descriptor. This block establishes the overall canvas for the animation and contains:

• Logical Screen Width: A 16-bit integer defining the maximum width of the display area.
• Logical Screen Height: A 16-bit integer defining the maximum height of the display area.
• Global Color Table Flags: Information regarding whether a global palette is used, color resolution, and the background color index.

Every frame in the animation renders onto this designated logical screen. The dimensions set here remain constant throughout the entire playback of the GIF.

Image Descriptors and Local Coordinates

Instead of redrawing the entire logical screen for every tick of the animation, individual frames are encoded using an Image Descriptor block. Each frame acts as an independent sub-image placed on the larger canvas.

The Image Descriptor specifies four critical spatial parameters:

1. Image Left Position: The X-coordinate (horizontal offset) where the top-left corner of the frame should appear on the logical screen.
2. Image Top Position: The Y-coordinate (vertical offset) where the top-left corner of the frame should appear on the logical screen.
3. Image Width: The actual width of the update region.
4. Image Height: The actual height of the update region.

Because the frame's width and height are decoupled from the logical screen's width and height, an individual frame update can be as small as a few pixels wide and tall, positioned anywhere within the boundary of the logical screen.

The Role of the Graphics Control Extension

To make partial updates visually coherent, the GIF89a specification utilizes the Graphics Control Extension (GCE), which precedes each frame's Image Descriptor. The GCE defines:

• Transparency Index: Marks a specific palette color as transparent, allowing the previous frame's content to show through unaffected areas of the new sub-frame.
• Disposal Methods: Instructs the decoder on how to handle the current frame once its display delay expires. Common methods include:
  • Do Not Dispose (Leave in Place): The new sub-image is drawn on top of the existing canvas, preserving previous frames beneath it.
  • Restore to Background: The area covered by the current sub-frame is cleared to the background color before the next frame is rendered.
  • Restore to Previous: The canvas state prior to the current frame's appearance is restored.

Delta Encoding for Optimization

By pairing a static Logical Screen Descriptor with localized Image Descriptors and transparency, animated GIFs achieve a form of spatial delta compression. If only a small element moves—such as a character blinking or a cursor moving—the GIF only encodes the bounding box containing the altered pixels and places it onto the larger canvas using its coordinate offsets. Decoders composite these smaller rectangles directly onto the larger logical screen in real time.