版本记录

版本号	时间
V1.0	2017.09.06

前言

只要是做图片的或者与图片相关的，那么图片的格式就是一个不可以绕过的问题，我们见过很多的图片格式，但是具体不同的图片格式是如何定义的，又具有什么特点，很多时候我们都没有深入研究过，下面我们就开始深入研究。感兴趣的可以看我上面这篇。
1. PNG、JPEG、BMP等几种图片格式详解（一）—— PNG
2. PNG、JPEG、BMP等几种图片格式详解（二）—— JPEG
3. PNG、JPEG、BMP等几种图片格式详解（三）—— BMP

GIF

以下部分内容来自百度百科，还会有一部分是自己的见解，我写这篇文章的目的是既让大家可以了解百度上已有的知识，但是不用再去找百度，还有就是可以看到我关于这种图片格式的深层次的了解，看完这篇，包括我在内，会感觉到即使很小很小的一个知识点，深入以后都是非常深的，底层和深层次原理是我的最爱，这也是我写博客的初衷和目的。

GIF(Graphics Interchange Format)的原义是“图像互换格式”，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。GIF格式可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。

GIF图象是基于颜色列表的（存储的数据是该点的颜色对应于颜色列表的索引值），最多只支持8位（256色）。GIF文件内部分成许多存储块，用来存储多幅图象或者是决定图象表现行为的控制块，用以实现动画和交互式应用。GIF文件还通过LZW压缩算法压缩图象数据来减少图象尺寸。

GIF格式自1987年由CompuServe公司引入后，因其体积小、成像相对清晰，特别适合于初期慢速的互联网，而大受欢迎。

在早期，GIF所用的LZW压缩算法是Compuserv所开发的一种免费算法。然而令很多软件开发商感到意外的是，GIF文件所采用的压缩算法忽然成了Unisys公司的专利。

据Unisys公司称，他们已注册了LZW算法中的W部分。如果要开发生成（或显示）GIF文件的程序，则需向该公司支付版税。由此，人们开始寻求一种新技术，以减少开发成本。PNG（Portable Network Graphics，便携网络图形）标准就在这个背景下应运而生了。它一方面满足了市场对更少的法规限制的需要，另一方面也带来了更少的技术上的限制，如颜色的数量等。

在2003年6月20日，LZW算法在美国的专利权已到期而失效。在欧洲、日本及加拿大的专利权亦已分别在2004年的6月18日、6月20日和7月7日到期失效。尽管如此，PNG文件格式凭着其技术上的优势，已然跻身于网络上第三广泛应用格式。与GIF相关的专利于2006年8月11日过期。

---

GIF在iOS的尴尬处境

长久以来，iOS一直被吐槽不能用GIF。造成这一局面的主要原因是：

• iOS关于照片的场景不会自动播放GIF，也没有角标。
• 一些应用将GIF视为静态图像去操作，导致用户保持了一个GIF后，结果应用将其保存成JPG。
• iOS只能通过imageI/O去操作GIF数据，UIKit对其绝缘。

---

分类

GIF分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到底GIF仍然是图片文件格式。
但GIF只能显示256色。和jpg格式一样，这是一种在网络上非常流行的图形文件格式。

GIF主要分为两个版本，即GIF 89a和GIF 87a

• GIF 87a：是在1987年制定的版本
• GIF 89a：是1989年制定的版本。在这个版本中，为GIF文档扩充了图形控制区块、备注、说明、应用程序编程接口等四个区块，并提供了对透明色和多帧动画的支持。

---

格式

1. 语法

此给出的语法用来说明形成gif数据流的块序列，用一些规则列表来表达。下面列出用于gif语法的符号定义。

• <> 语法词
• ::= 符号定义
• * 0个或更多的事件发生
• + 1个或更多的事件发生
• | 替代元素
• [] 可选元素

gif语法的符号定义：<GIF数据流> ::= 头部 <；逻辑视屏> <；数据>* 尾记录

gif数据流中的数据块可以分为三组：控制块、成象块和特殊用途块。

• 控制块，如：头部、逻辑视屏描述块、图像控制扩充和尾记录，包含用于控制处理数据流或设置硬件参数的信息。
• 成像块，如：图像描述符和纯文本扩充，包含用于在显示设备上成像的信息和数据。
• 特殊用途块，如：注释扩充和应用扩充，包含那些既不用于处理数据流也不用于在显示设备上成象的信息。

2. 解释

色表- gif格式利用色表来显示基于光栅的图像。色表分为全局色表和局部色表。全局色表对于那些没有设置局部色表的图像起作用。全局色表的作用域是整个数据流。局部色表对于紧接在其后的单张图像起作用。这两种色表都是可选的。

全局色表这东西是我们感兴趣的东西，它有点像png格式定义种的调色板，如果要修改gif图片的颜色，哈哈，修改这个全局色表就可以，如果有全局色表块，那么它一定从gif流的14个字节开始（头部6个 + 逻辑视频描述块7个）。

以下是各数据块的说明，如果注明为版本89a的话，则说明这个数据块不会在87a版的协议中出现。

• 头部（6个字节）
• 标识符(3字节） ---GIF
• 版本（3字节） ---87a (or 89a)
• 逻辑视屏描述块
• 逻辑屏幕宽（2字节）
• 逻辑屏幕高（2字节）
• Packed Fields (1字节）
• 背景色索引（1字节）
• 象素高宽比（1字节）

Packed Fields说明：

• 全局色表标志 1 Bit
• 颜色方案 3 Bits
• 短标志 1 Bit
• 全局色表尺寸 3 Bits

---

文件存储结构

GIF文件内部是按块划分的，包括控制块（ Control Block ）和数据块（DataSub-blocks）两种。控制块是控制数据块行为的，根据不同的控制块包含一些不同的控制参数；数据块只包含一些8-bit的字符流，由它前面的控制块来决定它的功能，每个数据块大小从0到255个字节，数据块的第一个字节指出这个数据块大小（字节数），计算数据块的大小时不包括这个字节，所以一个空的数据块有一个字节，那就是数据块的大小0x00。 下表是一个数据块的结构：

一个GIF文件的结构可分为文件头(File Header)、GIF数据流(GIF DataStream)和文件终结器(Trailer)三个部分。文件头包含GIF文件署名(Signature)和版本号(Version)；GIF数据流由控制标识符、图象块(ImageBlock)和其他的一些扩展块组成；文件终结器只有一个值为0x3B的字符（'';''）表示文件结束。下表显示了一个GIF文件的组成结构：

• 文件头

是用来标识GIF署名(Signature)和版本号(Version)的。

GIF署名用来确认一个文件是否是GIF格式的文件，这一部分由三个字符组成："GIF"；文件版本号也是由三个字节组成，可以为"87a"或"89a"。具体如下图所示。

文件头组成

• GIF数据流

它包含了很多的部分。

(1) 逻辑屏幕标识符(Logical Screen Descriptor)：这一部分由7个字节组成，定义了GIF图象的大小(Logical Screen Width &Height)、颜色深度(Color Bits)、背景色(Blackground ColorIndex)以及有无全局颜色列表(Global Color Table)和颜色列表的索引数(IndexCount)，具体描述见下图。

也可以参考下图。

(2)全局颜色列表(Global Color Table)：

全局颜色列表必须紧跟在逻辑屏幕标识符后面，每个颜色列表索引条目由三个字节组成，按R、G、B的顺序排列。

(3)图象标识符(Image Descriptor)：一个GIF文件内可以包含多幅图象，一幅图象结束之后紧接着下是一幅图象的标识符，图象标识符以0x2C('','')字符开始，定义紧接着它的图象的性质，包括图象相对于逻辑屏幕边界的偏移量、图象大小以及有无局部颜色列表和颜色列表大小，由10个字节组成，具体如下所示。

也可以参考下图。

(4)局部颜色列表(Local Color Table)：如果上面的局部颜色列表标志置位的话，则需要在这里（紧跟在图象标识符之后）定义一个局部颜色列表以供紧接着它的图象使用，注意使用前应线保存原来的颜色列表，使用结束之后回复原来保存的全局颜色列表。如果一个GIF文件即没有提供全局颜色列表，也没有提供局部颜色列表，可以自己创建一个颜色列表，或使用系统的颜色列表。局部颜色列表的排列方式和全局颜色列表一样：RGBRGB......

(5) 基于颜色列表的图象数据(Table-Based Image Data)：由两部分组成：LZW编码长度(LZW Minimum Code Size)和图象数据(Image Data)。

下面给出总体的存储结构的原理图。

制作

PC上制作软件主要为Adobe ImageReady 和 fireworks 两个。
WEB上gif在线制作编辑gif5.net，支持图片、视频、FLASH转GIF。

我一般使用LICEcap制作gif图。

参考文章

1. 百度百科
2. GIF图片的文件储存结构和动画原理
3. GIF图片原理和储存结构深入解析

后记

未完，待续~~~