Unveiling the GIF Format: Structure, iOS Quirks, and Animation Mechanics

GIF is a container that uses LZW compression and supports multiple images, 256 colors, and a 1‑bit transparency channel. As the carrier of internet memes, this 1980s technology remains widely used.

However, GIF has obvious drawbacks: visible edge artifacts, poor color fidelity, and low compression ratio. To address these issues, Mozilla released APNG as a replacement, and many open‑source components adopt WebP instead of GIF.

GIF’s Awkward Situation on iOS

iOS photo scenes do not auto‑play GIFs and lack badge indicators.

Some apps treat GIFs as static images, saving them as JPG after a user keeps a GIF.

iOS can only manipulate GIF data via Image I/O; UIKit does not provide direct support.

GIF Storage Structure

Historically, GIF has two versions that share the same file structure, composed of control blocks and data blocks. Control blocks contain parameters that determine GIF behavior, while data blocks hold the actual image data interpreted according to those parameters.

Internal structure of a GIF file:

Header: file signature and version.

Trailer: file end marker.

GIF Data: the bytes between Header and Trailer.

Example Simple GIF (Two Frames)

Hexadecimal representation (different blocks colored):

Header

The file starts with a 6‑byte Header whose ASCII value is "GIF87a" or "GIF89a" (signature "GIF" followed by a version number).

On iOS you can simply check whether the first four bytes are "GIF8" to determine if a binary file is a GIF.

Logical Screen Descriptor

0A000A00 B30000

This 7‑byte block defines the canvas width and height (first four bytes, big‑endian). In the example, 0x0A00 = 10, so the GIF is 10 × 10 pixels.

The packed field (first byte after width/height) contains several flags:

Global Color Table Flag (1 bit): whether a global palette exists.

Color Resolution (3 bits): number of bits per primary color (011 → 4 bits, 111 → 8 bits).

Sort Flag (1 bit): whether the palette is sorted by frequency.

Size of Global Color Table (3 bits): actual size = 2^(N+1).

Background Color Index (next byte) points to the background color in the global palette. The final byte is the pixel aspect ratio; most of the time it is 0. The conversion formula is:

aspectRatio = (pixelAspectRatio + 15) / 64

Global Color Table

000000 80000000 80008080 00000080 80008000 8080C0C0 C0808080 FF000000 FF00FFFF 000000FF FF00FF00 FFFFFFFF FF

The example has 16 entries, each 3 bytes (RGB), occupying 48 bytes. Colors are referenced by index in the image data.

Application Extension

Hex block:

21FF0B 4E455453 43415045 322E3003 01000000

Extension blocks start with 0x21; the next byte is the extension label. The Application Extension (label 0xFF) contains application‑specific data. The Netscape Application Extension is commonly used to control the loop count of an animated GIF. It is 19 bytes long; the last four bytes store the loop count as an unsigned integer (0 means infinite looping).

Graphic Control Extension

21F90409 32000F00

This block (defined in the "89a" version) appears at the beginning of an image data block and specifies transparency and animation parameters. The first two bytes are 0x21F9 (extension identifier). The packed byte contains:

Disposal Method (bits 2‑4): how the decoder should treat the canvas after displaying the frame.

User Input Flag (bit 1): whether user interaction is required to advance.

Delay Time (bits 5‑16): unsigned integer representing frame display time in 0.01 s units.

Transparent Color Index (bit 8 of the next byte): index of the transparent color in the palette.

Image Descriptor

2C000000 000A000A 0000

Starts with 0x2C, followed by 10 bytes describing the frame’s left, top, width, height, and a packed byte that indicates interlacing and local color table usage.

Local Color Table

If the local color table flag in the image descriptor is set, a palette follows the descriptor and is used only for that frame; otherwise the global palette is used. Its size and format are calculated the same way as the global table.

Image Data

041C 1080472B 0549DA9B BAAE58E7 4D4F288E E629A519 697E1C0C 92DB1301 00

The image data is a LZW‑compressed binary stream. The first byte is the LZW minimum code size, the second byte is the block size, and the remaining bytes constitute the compressed pixel data until the block terminator.

Trailer

3B

The single byte 0x3B marks the end of the GIF file.

GIF Animation Principles

Loop count is controlled by the Application Extension, while frame transition and timing are governed by the Graphic Control Extension. The Image Descriptor defines the region each frame occupies, allowing partial updates when the disposal method is 1.

Disposal Method values:

0: No disposal specified (do nothing).

1: Do not dispose; the next frame is drawn over the current canvas.

2: Restore to background color before drawing the next frame.

3: Restore to previous canvas state before drawing.

4‑7: Reserved.

User Input Flag = 1 requires a mouse or keyboard event to advance the frame. Delay Time specifies how long the frame is shown (in 0.01 s units). If the Transparent Color Flag is set, the decoder treats the indexed color as transparent, allowing the background to show through.

Experiment

Modifying the first frame’s Graphic Control Extension to set the transparent color to red (global palette index 9) and the delay to 0.1 s yields the following block:

21F90409 0A000900

The resulting GIF reflects the new transparency and timing settings.