How GIF Encodes Sub-Rectangle Frames
The Graphics Interchange Format (GIF) achieves efficient animation by allowing individual frames to update only specific regions of the display rather than refreshing the entire canvas. This article explains the technical mechanics behind GIF sub-rectangle encoding, covering how the format defines the global canvas, positions localized frames via Image Descriptors, compresses localized pixel streams, and manages frame retention using Graphic Control Extensions.
The Logical Screen Descriptor
A GIF file begins by establishing a global canvas known as the
Logical Screen. Defined within the Logical Screen Descriptor block, this
sets the fixed width and height of the entire animation area. Every
individual frame rendered thereafter exists within the boundary of this
defined coordinate space, sharing a unified coordinate origin at the
top-left corner (0, 0).
Image Descriptors and Coordinate Mapping
When a frame only modifies a tiny sub-rectangle of the full canvas,
it uses an Image Descriptor block (identified by the byte value
0x2C). Instead of defining pixels for the entire screen,
the Image Descriptor specifies four essential 16-bit parameters:
- Image Left Position: The horizontal offset (in pixels) from the left edge of the Logical Screen to the left edge of the sub-image.
- Image Top Position: The vertical offset (in pixels) from the top edge of the Logical Screen to the top edge of the sub-image.
- Image Width: The exact width of the sub-rectangle.
- Image Height: The exact height of the sub-rectangle.
By specifying these values, the decoder maps the incoming pixel data strictly to the defined bounding box, leaving the rest of the canvas untouched during that frame's decoding pass.
Localized LZW Raster Data
Directly following the Image Descriptor (and an optional Local Color Table), the GIF stores the frame's image data encoded using LZW compression. Because the sub-image dimensions are restricted to the tiny rectangle:
- The raster data only contains pixels for
Image Width × Image Height. - Pixels outside this bounding box are not transmitted or processed, significantly reducing file size.
- The decoder uncompresses the scanlines sequentially according to the
sub-image's width and writes them directly into the canvas memory buffer
at the specified
(Left, Top)offsets.
Graphic Control Extension and Frame Blending
To seamlessly blend a sub-rectangle over previous frames, the GIF format relies on the Graphic Control Extension (GCE), which precedes the Image Descriptor:
- Disposal Method: Determines what happens to the canvas before the next frame is rendered. By setting the disposal method to Do Not Dispose (Method 1), the previous canvas contents persist, allowing the new sub-rectangle to simply draw over the existing pixels. If set to Restore to Background (Method 2) or Restore to Previous (Method 3), the decoder can clean up the specific rectangle area after the frame duration ends.
- Transparent Color Index: Allows designating a specific palette color as fully transparent. If the sub-rectangle contains irregular shapes within its bounding box, any pixel matching the transparency index is not drawn, preserving the underlying canvas pixels.
By combining coordinate-based Image Descriptors, restricted LZW raster data, and Graphic Control Extensions, GIF encoders isolate localized screen changes and avoid redundant pixel storage.