PNG、JPEG、BMP等几种图片格式详解(四)—— GIF

版本记录

版本号 时间
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文件的程序,则需向该公司支付版税。由此,人们开始寻求一种新技术,以减少开发成本。PNGPortable 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 89aGIF 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 ImageReadyfireworks 两个。
WEB上gif在线制作编辑gif5.net,支持图片、视频、FLASH转GIF。

我一般使用LICEcap制作gif图。

参考文章

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

后记

未完,待续~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • 前言 本文参考gif 格式图片详细解析。加入了一些自己的理解和解析方面的示例。 GIF格式解析 图像互换格式(GI...
    oceanLong阅读 16,198评论 4 26
  • 关于图片的格式和隐写术 图片隐写总结 需要掌握的处理技术 python PIL python struct 文件格...
    Arklight阅读 2,306评论 0 0
  • 版本记录 前言 只要是做图片的或者与图片相关的,那么图片的格式就是一个不可以绕过的问题,我们见过很多的图片格式,但...
    刀客传奇阅读 87,247评论 0 22
  • 最近花了点时间用 C++ 写了一个 GIF 图片的解析程序,在这一过程中我找了许多中文相关的材料,但没有哪一篇是真...
    _番茄沙司阅读 7,015评论 4 16
  • 参考文章:What's In A GIF 本文全面介绍了GIF文件格式的编码格式。 GIF文件内容 GIF现在是一...
    小鸟君阅读 9,755评论 1 5