This is the second day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Introduction of Gif

The GIF Format name, short for Graphics Interchange Format, was developed in 1987 by Compu Serve Corporation to fill a gap in the cross-platform image Format. GIF can be supported on multiple platforms such as PC and Mactiontosh.

  • A bitmap is made up of many pixels, which together make up an image.
  • The lempel-Zev-Welch (LZW) compression algorithm is used to support up to 256 colors.
  • Come with a color palette, where you can store all the colors you need.
  • There are two versions, GIF87a and GIF89a.

Gif file structure

The file header

File header contains: format declaration, logical screen description block, global color palette

Format statement

  • Signature consists of three characters: GIF.
  • The Version contains 87A or 89a characters.

Logical screen description block

  • Logical Screen stores the width and height information of pixel units.
  • Packet Stores color disk information.
  • Background Color Index defines the Index of the Background color in the palette for the transparent area of the image.
  • Pixel Aspect Ratio defines the Pixel Aspect Ratio, which is generally 0.

Packet Indicates information about the palette

  • Global Color Table Flag indicates the Global Color Table Flag. 1 indicates that the Global Color Table is defined.
  • Color Resolution represents the length of each base Color bit (+1) in the Color table. When it is 111, each Color is represented by 8bit.
  • Sort Flag Indicates whether to prioritize the colors in the color list, putting the commonly used colors first.
  • Global Color Table represents the length of the Color Table. The calculation rule is that the value +1 is taken as a power of 2, and the number obtained is the number of items in the Color Table. When the maximum value is 111, the number of items is 256, that is, the GIF format supports a bitmap of 256 colors at most. It’s the total length of the palette.

Global color palette

GIF has common color palette information that stores the supported color values for each pixel of the GIF. Each pixel of the picture only needs to store the index value of the color palette, and the corresponding color value can be found through the index during display. The Gif format allows two color palettes to exist at the same time, using a common palette for rendering without a local palette.

Image data area

Application Extension

This is provided for the application itself (version 89A required), where the application can define its own identity, information, and so on.

Graphic Control Extension

This is optional (requires version 89A) and can be placed in front of an image block (image identifier) or text extension block to control the Render form of the first image (or text) following it.

Image Extension

The image identifier is where the specific image data begins. The beginning of each identifier also describes the width and height of the image, followed by the local color list, which is followed by the compressed data of the image. GIF image data uses LZW compression algorithm, greatly reducing the size of the image data. Image data can be arranged in two formats before compression: continuous and interleaved (controlled by interleaved marks of image identifiers). Continuous mode arranges raster data in an image from left to right and from top to bottom.

End marker area

The end of the image is represented by a fixed byte 0x3B.

Analysis tools

Gifsicle tool analysis

Gifsicle is a command line tool for creating, editing, and obtaining information about GIF images and animations. Making GIFs with Gifsicle is easy

Install Gifsicle

npm --registry https://registry.npm.taobao.org install  --global gifsicle
Copy the code

ImageMagick tool analysis

brew install imagemagick
Copy the code

Binary viewing tool Synalyze

A binary viewing tool for the Mac environment, for the analysis of Gif images or other formats to help.

Gif Compression Strategy

Image size compression

Compress the Gif image size per frame, such as 1080×720 global size to 108×72. But compression efficiency may not be high.

Frame extraction reduces the number of frames

Capture a few key frames in the Gif, reduce the total number of Gif images to compress the Gif size. The downside, however, is that the animation can become incoherent.

Control the length of the palette

Gif images contain a maximum of 256 RGB values, dynamic Gif each frame between the information difference is not large color will be reused. When storing, we use a public index table to extract the colors used in the picture and form a color palette. In this way, when storing the real picture lattice, we only need to store the index value of each point in the palette.

If you change the total number of colors in the Gif then you compress the size of the palette and you compress the SIZE of the Gif.

reference

  • Concentrate is the essence: a brief analysis of GIF format image storage and compression
  • GIF aspects of
  • GIF file format parsing