GIF Format: Past, Present, and Future

What Is GIF Format? A Brief History

The Graphics Interchange Format (GIF) is a compressed image format, originally developed by Steve Wilhite in 1987. It uses the Lempel-Ziv-Welch (LZW) compression algorithm, a lossless compression method (meaning it does not degrade image quality).

GIFs generally allow up to 8 bits per pixel per image and up to 256 colors. By contrast, the more advanced JPEG format can display up to 16 million colors, very close to the limit of the human eye.

GIF was a major development in the early days of the Internet, because bandwidth and device capabilities were very limited. GIF compression made it possible to serve image content over the Internet with acceptable performance.

In the early 1990s, the GIF89a spec added the ability to combine many images or frames into a single file and display them in sequence to create an animated clip or short video. This turned GIF into a video format. Like in the original GIF format, colors are limited to a maximum of 256 per frame. In 1995 this capability was added to the Netscape Navigator browser, leading to widespread use of compressed animated GIFs.

Today GIFs are still widely used. GIPHY, an online database and search engine for GIFs, has over 250 million active users and was purchased by Facebook for an estimated $400 million. Whatsapp supports the use of animated GIFs, and over 70 million GIFs are sent via the WhatApp application daily.

In this article:

  • GIF File Format: How Does GIF Work
  • What Are GIFs Used For?
  • GIF Format: Pros and Cons
  • Automating GIFs and Animated GIFs with Cloudinary

GIF File Format: How Does GIF Work

GIF files describe a logical screen with a graphical area of a fixed size. This screen may contain one, multiple, or no images. A GIF file may contain a single image filling the whole logical screen, or it may divide the screen into separate smaller images. These images can function as animation frames in animated GIF files, but they don’t have to fill the whole logical screen.

A GIF file starts with a header with a fixed length – for example, GIF87a or GIF89a. It provides the file version and logical screen descriptor (also with a fixed length) specifying logical screen dimensions in pixels and additional characteristics. The descriptor can specify if there is a Global Color Table (GCT), followed by the size description if present.

The GIF file then splits into various segments introduced with a single-byte sentinel:

  • The image – starts with 0x2C and an ASCII comma
  • The extension block – starts with 0x21 and an ASCII exclamation point
  • The trailer – has a 1-byte value of 0x3B and an ASCII semicolon (this should be the file’s last byte)

The image component begins with a fixed-length image descriptor that specifies if a local color table is present (and its size). Following is the image data, with a single byte providing the unencoded symbol width (in bits) – there must be minimum 2-bit width. Next is a linked list with sub-blocks defining the data encoded by LZW.

The extension blocks extend the 87a definition using a pre-defined mechanism from the 87a spec. Each block consists of a sentinel and another byte specifying the extension type, followed by a linked list with sub-blocks for the extension data. An extension block that modifies an image must precede the file segment containing the relevant image. For example, graphic control extensions can specify optional animation delay times and transparent background colors, but they must be next to the affected image.

The extension blocks and image data use linked lists consisting of several sub-blocks. Every sub-block starts with a single byte specifying the number of data bytes following it within the sub-block (up to 255). Each sub-block series ends with an empty (0-byte) sub-block.

This file structure enables parsing even when a decoder does not understand some parts of the file. GIFs marked with an 87a can include extension blocks – the idea is for the decoder to read and display files while ignoring features in the extensions it doesn’t understand.

What Are GIFs Used For?

GIFs have a variety of uses, both personal and professional:

  • Marketing—GIFs provide a simple, lightweight mechanism for promoting products and services. GIF images and animations can be used to share brand images, create banner ads, and even show a quick animated preview of how products work and their benefits.
  • Information sharing—GIFs can be used to deliver graphs and charts with engaging animation effects, to help users better understand complex information. Animated GIFs can be used to create step-by-step how-to guides that are lightweight and can be viewed on any device.
  • Social media engagement—GIFs are used to create animated responses to social media discussions and add humor to blog posts, allowing brands to improve customer relationships and create a better connection with digital-first consumers.

GIF Format: Pros and Cons

Benefits of GIFs:

  • Small file size—GIFs provide a relatively small file size compared to other image formats. They can be downloaded faster without sacrificing quality, and are especially suitable for environments with limited bandwidth and computing resources.
  • Transparent background—both regular GIFs and animated GIFs support transparent backgrounds. This can let you combine GIF images with background colors, images, or animations, to create innovative web designs.
  • Easy to use animation—animated GIFs are easy to create and easy to consume on almost any device. This can help creators and website owners deliver a better experience to their audiences.

Shortcomings of GIFs:

  • Limited color scheme—both GIFs and animated GIFs support only a 256-color palette, making it look less attractive and detailed than other image formats. In some cases, the image may appear slightly jagged or pixelated.
  • Cannot be edited—an animated GIF has the frames and animation encoded in the actual file, and cannot be edited. To modify an animated GIF, you must recreate it from the source data. Other images and animation formats make it possible to edit the image or video without recreating it.
  • Heavyweight compared to other animation formats—while animated GIFs have advantages, they have a heavier file size than other optimized video formats. Adding a large number of animated GIFs to web pages can make them load slower. It is a best practice to use HTML5 video instead of animated GIF to improve performance.

Automatically Converting GIF into Modern Image Formats with Cloudinary

GIF is a commonly used format, but it has inefficient compression, which means larger file size and slower page load times. Wouldn’t it be great if you could keep your old GIF images, but serve them to users in next-generation formats that are a fraction of the size?

Since different browsers support different image formats, the best solution to optimize delivery time and save bandwidth is to deliver the best format according to the browser used by each of your visitors. This is exactly what Cloudinary does with a feature called “f_auto”.

Cloudinary is a cloud-based image management platform. You can upload GIF or any other images (and videos too for that matter) to Cloudinary (signup is free). From that point onwards, you can serve a GIF image using a dynamic URL. When you use the “f_auto” parameter in the URL, it will automatically convert the image into the best possible format for the user’s current browser.

How does dynamic format conversion (f_auto) work?

f_auto performs automatic format selection based on the requesting browser – for example, the image could be delivered as AVIF, WebP or JPEG-2000. If the original image is an animated GIF, f_auto will automatically convert it into animated WebP, which is much lighter and faster.

If a browser does not support any of the optimized formats that f_auto is enabled to return, then the image is delivered in the format specified by the file extension.

Live demo of automated conversion from GIF to modern file formats

Take the example of the scaled shoes image below. The source format of GIF (98 KB) is quite heavy. By using f_auto, we can deliver this image as an AVIF (14.6 KB), WebP (16.1 KB) or JPEG-2000 (21.0 KB) to the client browser.

In fact, the image below has already loaded on your browser as one of these modern formats and not as GIF (assuming you are running a current browser).

https://res.cloudinary.com/demo/image/upload/c_scale,w_500/f_auto/docs/shoes.gif

Next steps: