Detailed explanation of PNG, JPEG, BMP and other image formats (4) - GIF

Part of the following content comes from Baidu Encyclopedia, and some of it is my own opinion. The purpose of writing this article is to let everyone understand the existing knowledge on Baidu without having to go to Baidu. Also, you can see my in-depth understanding of this image format. After reading this article, including me, you will feel that even a very small knowledge point will be very deep when you go into it. The bottom layer and deep-level principles are my favorites, and this is also the original intention and purpose of my blog.

The original meaning of GIF (Graphics Interchange Format) is "Graphics Interchange Format", which is an image file format developed by CompuServe in 1987. The data of the GIF file is a continuous-tone lossless compression format based on the LZW algorithm. Its compression ratio is generally around 50, and it does not belong to any application. The GIF format can store multiple color images. If multiple image data stored in a file are read out one by one and displayed on the screen, one of the simplest animations can be formed.

GIF images are based on color lists (the stored data is the color of the point corresponding to the index value of the color list), and only support up to 8 bits (256 colors). The GIF file is internally divided into many storage blocks, which are used to store multiple images or control blocks that determine the behavior of the image to implement animation and interactive applications. GIF files also compress image data through the LZW compression algorithm to reduce image size.

Since the GIF format was introduced by CompuServe in 1987, it has become very popular because of its small size and relatively clear imaging, which was especially suitable for the early slow Internet.

In the early days, the LZW compression algorithm used by GIF was a free algorithm developed by Compuser. However, to the surprise of many software developers, the compression algorithm used in GIF files suddenly became the patent of Unisys.

According to Unisys, they have registered the W part of the LZW algorithm. If you develop a program that generates (or displays) GIF files, you need to pay royalties to the company. As a result, people began to seek a new technology to reduce development costs. The PNG (Portable Network Graphics) standard came into being under this background. On the one hand, it meets the market's need for fewer regulatory restrictions, and on the other hand, it also brings fewer technical restrictions, such as the number of colors.

On June 20, 2003, the patent rights of the LZW algorithm in the United States expired. Patent rights in Europe, Japan and Canada also expired on June 18, June 20 and July 7, 2004 respectively. Despite this, the PNG file format has become the third most widely used format on the Internet due to its technical advantages. The patent related to GIF expired on August 11, 2006.

For a long time, iOS has been criticized for not being able to use GIFs. The main reasons for this situation are:

GIF is divided into two types: static GIF and animated GIF. The extension is .gif. It is a compressed bitmap format that supports transparent background images and is suitable for a variety of applications. The operating system is very small in size, and many small animations on the Internet are in GIF format. In fact, GIF saves multiple images into one image file to form an animation. The most common one is a funny gif picture connected through a frame of animation, so in the final analysis, GIF is still a picture file format.

But GIF can only display 256 colors. Like the jpg format, this is a very popular graphics file format on the Internet.

GIF is mainly divided into two versions, namely GIF 89a and GIF 87a

The syntax given here is used to describe the block sequence that forms the gif data stream, expressed by some rule lists . The symbol definitions used in gif syntax are listed below.

Symbol definition of gif syntax: lt; GIF data flowgt; ::= headerlt;; logical screengt; lt;; datagt; * tail record

gif data The data blocks in the stream can be divided into three groups: control blocks, imaging blocks and special purpose blocks.

Color table - The GIF format utilizes a color table to display raster-based images. The color table is divided into a global color table and a local color table. The global color table works for images that do not have a local color table set. The scope of the global color table is the entire data stream. The local color table works for the single image immediately following it. Both color charts are optional.

The global color table is what we are interested in. It is a bit like the palette defined in the png format. If you want to modify the color of the gif image, haha, just modify the global color table. If There is a global color table block, then it must start from 14 bytes of the gif stream (header 6 logical video description blocks 7).

The following is the description of each data block. If it is marked as version 89a, it means that this data block will not appear in the protocol version 87a.

Packed Fields Description:

GIF files are internally divided into blocks, including Control Block and DataSub-blocks. The control block controls the behavior of the data block. It contains different control parameters according to different control blocks; the data block only contains some 8-bit character streams, and its function is determined by the control block in front of it. The size of each data block From 0 to 255 bytes, the first byte of the data block indicates the size of this data block (number of bytes). This byte is not included when calculating the size of the data block, so an empty data block has one byte, That is the data block size 0x00. The following table shows the structure of a data block:

The structure of a GIF file can be divided into three parts: File Header, GIF DataStream and File Terminator (Trailer). The file header contains the GIF file signature (Signature) and version number (Version); the GIF data stream consists of a control identifier, an image block (ImageBlock) and some other extension blocks; the file terminator has only one character with a value of 0x3B (' ';'') indicates the end of the file. The following table shows the structure of a GIF file:

is used to identify the GIF signature (Signature) and version number (Version).

The GIF signature is used to confirm whether a file is in GIF format. This part consists of three characters: "GIF"; the file version number also consists of three bytes, which can be "87a" or "89a". The details are shown in the figure below.

It contains many parts.

(1) Logical Screen Descriptor: This part consists of 7 bytes and defines the size of the GIF image (Logical Screen Width amp; Height), color depth (Color Bits) ), background color (Blackground ColorIndex) and whether there is a global color list (Global Color Table) and the index number of the color list (IndexCount). See the figure below for detailed description.

You can also refer to the picture below.

(2) Global Color Table:

The global color list must immediately follow the logical screen identifier. Each color list index entry consists of three bytes Composition, arranged in the order of R, G, B.

(3) Image Descriptor: A GIF file can contain multiple images. Immediately after the end of an image is the identifier of an image. The identifier starts with the 0x2C ('', '') character and defines the properties of the image immediately following it, including the offset of the image relative to the logical screen boundary, the image size, and whether there is a local color list and color list size , consisting of 10 bytes, as shown below.

You can also refer to the picture below.

(4) Local Color Table: If the above local color list flag is set, you need to define a local color list here (immediately after the image identifier) ??to For use by the image immediately following it, please note that the original color list should be saved before use, and the original saved global color list should be restored after use. If a GIF file does not provide a global color list or a local color list, you can create a color list yourself or use the system's color list. The arrangement of the local color list is the same as the global color list: RGBRGB...

(5) Image data based on the color list (Table-Based Image Data): consists of two parts: LZW Code length (LZW Minimum Code Size) and image data (Image Data).

The following is a schematic diagram of the overall storage structure.

The two main production software on PC are Adobe ImageReady and fireworks.

Gif online production and editing on the WEB gif5.net, supports pictures, videos, FLASH to GIF.

I usually use LICEcap to create gif images.

1. Baidu Encyclopedia

2. File storage structure and animation principle of GIF images

3. In-depth analysis of GIF image principles and storage structure