是的，我说的是在b谷歌的Tenor或Facebook的giphy等网站上无处不在的主流、全网通用的gif。Gif是每个人最喜欢的分享动画片段的文件格式。

大多数人都知道，gif是一种动画文件格式。您可能已经看到了gif文件信息，并认为这些文件真的很大。也许你看着它们会想，哇，这些图片的分辨率这么低。但无论如何，当你想到gif时，你可能会想到它们是一种简短的动画文件格式。

然而，这个用例与编写gif的开发人员的意图非常不同。在本文中，我们将深入研究gif文件的结构，并讨论它的一些有趣的特性。

请注意，本文探讨的主题是理解gif格式，并研究它的一些更深奥的特性。如果您想了解有关解析gif文件的更多信息，我推荐使用以下资源。

W3规格Matthew Flickinger: gif里有什么？我发现这个来自ntfs.com的指南对入门也很有帮助。实际上，我使用这些资源构建了一个勉强够用的gif解析器，名为awful-gif，它可以在编写本文时解析一些gif。我不建议使用它。

0

大多数人眼中的 gif

gif文件格式是Compuserve在1987年创建的。早在1987年，gif还是一种非常紧凑的格式!它使用压缩，而且不是任何压缩方法，而是LZW压缩技术。许多旧的文件格式(一些由Compuserve制作)使用RLE(运行长度编码)，在许多情况下效率较低。gif的一大获胜因素是它的压缩和色域(256色，太棒了!)。(注1)

两年后，补充内容(gif89a)被添加到gif文件格式中，增加了许多我们今天所知道和喜爱的功能。

通过gif89a规范，我们可以快速总结出gif89和gif87a所支持的所有特性之间的差异。

AppendixA。快速参考表。块名称所需标签分机。应用扩展Opt. (*)0xFF (255) yes 89comment扩展Opt. (*)0xFE (254) yes 89aGlobal颜色表选择(1)none no 87agrapic控制扩展Opt. (*)0xF9 (249) yes 89aHeader Req. yes(1) none no N/image Descriptor Opt. (*)0x2C (044) no 87a (89a)Local Color Table Opt. (*) none no 87allogic Screen Descriptor Req。(1)无否87a (89a)明文扩展选项(*)0x01(001)是89atailer请求。(1)0x3B (059) no 87unlabeled BlocksHeader Req(1) none no N/逻辑屏幕描述符请求。(1) none no 87a (89a)Global Color Table Opt. (1) none no 87allocal Color Table Opt. (*) none no 87agrapic - rendering BlocksPlain Text Extension Opt. (*)0x01 (001) yes 89image Descriptor Opt. (*)0x2C (044) no 87a (89a)Control BlocksGraphic Control Extension Opt. (*)0xF9 (249) yes 89special Purpose BlocksTrailer Req. (*)0xF9 (249) yes 89special Purpose BlocksTrailer Req. (*)(1)0x3B (059) no 87comment Extension Opt. (*)0xFE (254) yes 89aApplication Extension Opt. (*)0xFF (255) yes 89传奇：(1)如果存在，最多出现一次(*)零或多次出现(+)一次或多次出现对于那些没有阅读整个规范的人来说，大部分都没有意义，所以让我们谈谈gif是如何组合在一起的，并谈谈它们的一些奇怪之处。

在开始之前，让我们来看看规范。

AppendixD。约定。动画-图形交换格式并不是打算作为动画的平台，即使它可以以有限的方式完成。附录

D.公约。

这种图形交换格式并不打算成为一个动画平台，尽管在某种程度上它可以这样做。

当前位置我将用一个例子来具体分析。如果你想跟随，就下载它。(注2)

如果您在家里跟着做，您所需要的只是一台安装了hexdump的机器。我将使用xxd，它预装在大多数unix系统(Linux、macOS)上，也可以通过vim-common包安装。

gif头

每个动图都有一个头部，上面有一个标记它是什么类型的动图，还有一些额外的信息，提供了关于图像的基本细节。

xxd Sunflower_as_gif_websafe_89a.gif |头-1 #和一些箭头00000000:- 4749 4638 3961 - dc00 0501 f700 0002 0102 gif89a..GIF头信息可以很容易地用xxd解码成ASCII(如果有意义的话)。看看这个。上面写着gif89a!这是一个认证和有效的gif!

每个字母都是一个字节，所以我们要找的神奇字节是：0x47;0x49,0x46,0x38,0x39,0x61

另外，如果只支持gif87a文件格式，最后三个字节可能是0x38、0x37、0x61。我们将专注于gif89，我们将跳过旧格式。

此外，gif标题中没有什么有趣的东西，因为它只是静态文本，所以让我们继续。

等一下，问一个问题：谁会接受gif87a?

在研究gif时，我想看看主要的gif托管供应商是否会接受并保留gif87a规范的格式。它们能工作吗，还是只会报告错误？

这是我们之前看到的向日葵的gif87a版本。这个版本只在这里使用。

让我们将图像上传到4头gif托管提供商：

我们从一个像这样的gif标题开始：

xxd Sunflower_as_gif_websafe_gif87a.gif | head -100000000: 4749 4638 3761 fa00 2901 f50000ff cc33 gif87a.)…3以下是我刚刚上传的图片重新下载后的结果。

男高音编码为gif89a:

下载xxd tenor.gif |头-100000000:4749 4638 3961 a401 f201 f700 0006 0406 gif89a..Giphy编码为gif89a:

下载xxd giphy.gif |头-100000000:4749 4638 3961 fa00 2901 f525 00000000 gif89a.)。%……这有点欺骗性，giphy只接受动画gif，所以我们必须点击编辑按钮(显示帧编辑器)并点击完成。gif87a规范允许存储多个图像，但是它们不能被延迟(因此没有动画，参见注释3)。

Imgur保留了原始文件!

下载xxd aUxm3NN.gif |头-100000000:4749 4638 3761 fa00 2901 f50000ff cc33 gif87a.)…至于gfycat，它在最后的“编码”阶段被困了整整20分钟。我希望我没有在周末把他们的一个可怜的工程师暴露在警报中。

上面的简短分析表明，世界上最大的两家科技公司旗下的两家最大的托管提供商不尊重我的旧gif文件，并完全重写了它。事实上，giphy作为一家公司似乎只尊重一种gif.

不管怎样，回到探索文件格式上来。

逻辑屏幕描述符

那么你的图像在一定的分辨率下会是什么样子呢？假设我们在macOS预览中使用“获取信息”功能，它如何知道该图像是220x261?

信不信由你，这是内置于文件格式!(注4)

字节0x6-0xA是这些信息，再加上一点。字节0x6和0x8表示长度和宽度。

xxd Sunflower_as_gif_websafe_89a.gif |头-1 #和一些箭头00000000:4749 4638 3961 - dc00 0501 - f700 0002 0102 gif89a..每个维度有两个字节来指定大小。同样重要的是要记住，gif文件格式中的所有字节都指定为小端字节。

首先是宽度，它是0x00dc(从dc00重新排序)=220(十进制)。

然后是长度，它是0x0105(从0501重新排序)=261(十进制)。

等等，这是不是意味着我们的gif有分辨率限制？

这是正确的!因为每个位置只有两个字节，所以宽度和长度都不能大于65535。我们可以尝试通过在gimp中创建一个1x65536的新gif来验证这一点

其他文件格式在这方面是相似的。如果你想下载理论上最宽的png，你可以在这里下载。这个文件很小，但是当您打开它时，您的图像浏览器可能会崩溃。Firefox很难打开它，并报告了一个错误，尽管它是兼容的。

回到逻辑屏幕描述符

但是，我们还没有完成逻辑屏幕描述符。接下来是一组打包字段。说明书中的图表更容易解释。

打包字段=全局颜色表标志1位颜色分辨率3位排序标志1位全局颜色表大小3位包含关于全局颜色表的信息，如果设置了，它会出现在逻辑屏幕描述符之后。

颜色分辨率决定每种颜色在全局颜色表中有多少字节。

Sort Flag告诉解码器第一种颜色更重要，并以一种有用的方式将颜色从高到低进行排序。

全局颜色表的大小就是颜色表的大小。

在向日葵图片的0xA字节中，我们有结果0xF7

xxd Sunflower_as_gif_websafe_89a.gif | head -100000000: 4749 4638 3961 dc00 0501 - f7 - 00 0002 0102 gif89a..或者用二进制表示：1111 0111

这意味着我们的gif基本上是满的，除了GCT没有排序。

GCT不排序重要性，1111年、0111年带来GCT设置带来带来3字节/GCT是768字节的颜色(Max大小)(最大分辨率)全局颜色表保存在每个字节中使用颜色部分。这些是从0到255的标准RGB值，您可以在任何现代RGB颜色选择器中使用这些值。

等等，全局颜色表是可选的吗？

0

按以下规格：

颜色表——全局和局部颜色表都是可选的；如果存在全局颜色表，它将用于数据流中没有给出局部颜色表的所有图像；如果存在本地颜色表，它将覆盖全局颜色表。但是，如果两个颜色表都不存在，则应用程序可以自由地使用任意颜色表。

我们的图像指定了一个768字节的颜色表。它从0xA字节.开始假设我们像这样将0xA字节中最有意义的位归零。

然后删除到789字节(不包含)。

xxd Sunflower_as_gif_89a-no-gct.gif | head -100000000: 4749 4638 3961 dc00 0501 007f 8121 f904 gif89a. 现在第一行是这样结束的，这仍然是一个完全有效的gif，看起来像这样：

绝对的!在撰写本文时，它只显示了一个完美的黑色正方形。这是我尝试过的每个渲染器的情况。Gimp、Chrome、Firefox、Preview、gifdle等等。

不管怎样，回到逻辑屏幕描述符。

继续讨论逻辑屏幕描述符

在描述全局颜色表的字节之后，有两个结束字节描述屏幕描述符。

0

xxd Sunflower_as_gif_websafe_89a.gif | head -100000000: 4749 4638 3961 dc00 0501 f700 0002 0102 gif89a..^ ^ | |背景色为|索引0中的颜色GCT |像素宽高比为0:0或主机像素宽高比。等等，像素宽高比是多少？

像素并不总是方形的!字节也不总是8位，但我不会说太多。

GIF和一些最流行的现代图像格式支持非正方形像素。

我想知道最流行的gif渲染器在渲染非方形像素时是如何兼容的。我们做了一个在Firefox和Chrome中很流行的测试，看看它们是什么样子：http://FRS. Badcoffee。信息/PAR_AcidTest /

Jpg, png和gif，按此顺序。Firefox、Chrome和Preview都忽略宽高比。

不幸的是，这个特性通常是不支持的，并且目前在Firefox中有一个16年的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=333377

即使是gifiddle兼容性最好的GIF浏览器也不支持正方形像素：https://github.com/ata4/gifiddle/issues/1

如果真的想显示非正方形像素，可以使用调整后的gimp。此外，grafx2显然可以处理非常特定的奇数像素分辨率。但我还没有亲自测试过。

回到全局颜色表

全局颜色表(GCT)显然是gif中最无聊的部分。这里真的没什么好谈的。

我的awful-gif项目可以在向日葵的GCT中输出所有颜色(也可能是其他图像)。

GCT的分析在这里，你可以看到它并没有什么特别之处。

执行如下命令：

cargo run——quiet -- --gif-file./experiments/Sunflower_as_gif_websafe.gif可选图形控件扩展

现在让我们谈谈图形控制扩展(GCE)，它是由扩展介绍者0x21引入的，然后是0xF9(!)。

有许多可用的扩展，但图形控件扩展可以说是最重要的扩展之一，至少在现代用例中是这样。GCE允许帧之间的显示延迟，以使gif“动画化”。普通教育证书还允许其他事情。

xxd Sunflower_as_gif_websafe_89a.gif |头-50 |尾-200000300:88ae b091 a5b1 a4b9 be94 887f 81 - 21 f904 .. 00000310: 0000 0000 - 0021 fe51 4669 6c65 2073 6f75 . 这个gif不是动画的，所以这里没有太多内容。正如你所看到的，这里有很多零，但是让我们一个字节一个字节地看。

第一个字节是块大小，在本例中是0x04，但实际上根据规范它总是0x04。

等等，我们能去掉块大小吗？

0

对于这些测试，我将使用一个更简单的gif，这样更容易看到发生了什么：

在接下来的测试中，我修改了它，去掉了GCE。修改后的版本以xxd格式保存在下面。

00000000: 4749 4638 3961 2000 3400 f0ff 00ff FFFF gif89a .4.00000010: 0000 0021 f903 0500 0002 002c 0000 0000…！ …,……00000020: 2000 3400 0002 788c 8fa9 cb0b 0fa3 94ed .4…x……00000030: cc7b abc1 1cea d075 5fc8 8d64 a69d 68a5 .{.u_ .d .h.00000040: 4e66 eba5 702c 3675 cddc a5bd e34e bfcb Nf.p 6 u…N .00000050: 0131 ace1 ea47 0405 9128 9f42 9714 2667 .1…G……(。b .G00000060: a70d 3564 bd1a b52e 25b7 f905 8729 de31 .5 d…%…).100000070:cd1c c9a2 016a 74db fc1e c7c3 f36f 9d7b .jt……O. {00000080: d7e6 af7b 6a7f f607 13d8 32a8 5258 55e6…{j……2. rxu。00000090: 9608 b728 d748 f768 1789 f751 b950 0000…(.H.h…Q.P。000000a0: 3b;将其保存到一个名为invalid的文本文件。十六进制，然后做：XXD -r无效。十六进制invalid.gif

(更新字节：0x16，从0x4-0x03)

首先是macOS预览版：

预览达到标准!

接下来让我们试试Firefox:

Firefox知道这是一个静态值，并忽略它的结果。虽然不完全符合标准，但这可能是最明智的做法。

当块大小被删除时，Chrome会有点崩溃。Chrome无疑是最不标准的。

回到图形控件扩展

在我们读取块大小之后，有一个包装字段，如下所述。

填充字段=保留3位处理方法3位用户输入标志1位透明颜色标志1位所有这些字段在我们的图像中设置为0，所以我将解释它们。

Reserved是为gif22a出现时设置的，我们需要这三个位来做一些好事。

用户输入被设计为通过单击鼠标或按键盘将gif图像推进到下一个图像来接受用户输入。

透明指数用于设置我们是否应该允许透明度。

等等，动图可以接受用户输入？

是的，你没看错。GIF可以接受用户的输入，推进到下一帧。这个可怜的家伙建立了一个网站，用png重新创建了这个功能。可惜他像我一样被困在这里，因为他没有读过gif规范。

让我们讨论一下gif支持的另一个奇怪的特性，纯文本扩展。

纯文本扩展允许gif制作者在他们喜欢的任何地方嵌入单色文本，并直接在图像上做一些基本的样式。

纯文本扩展和用户输入扩展一样，除了像gifiddle 的这样为了好玩而制作的gif 查看器外，可能从未被任何gif 查看器实现。

BOB_89A.gif 可能是有史以来在互联网上发布的第一个gif，是一个同时使用这两种方式的gif 例子。

下面是BOB_89A.gif 在现代浏览器中的渲染。

然而，如果你把它放到gifiddle 中，会得到一个非常不同的结果，最后的信息是一个非常重要的事实。

不过我不会剧透这个惊喜。你可以下载这个gif 放到gifiddle 里，看看会发生什么。

gifiddle 链接：http://ata4.github.io/gifiddle/

任何现代浏览器或gif 浏览器都不支持这两项特性。

如果你想阅读更多关于纯文本扩展的信息，可以看这里。

可选的注释扩展

接下来是注释扩展，实际上它可以出现在一个块可能开始的任何地方。然而它最常出现在gif 的这一部分。

注释部分只允许包含7 位的ascii，并且是供人类阅读的。

由于注释部分只是ascii，你可以直接发射字符串并在输出中找到注释。

strings Sunflower_as_gif_websafe_89a.gif | head -7 | tail -1QFile source: https://commons.wikimedia.org/wiki/File:Sunflower_as_gif_websafe.gif在这张图片中，它开始于图片的0x310 字节。

xxd Sunflower_as_gif_websafe_89a.gif | head -55 | tail -600000310: 0000 0000 0021 fe51 4669 6c65 2073 6f75 .QFile sou00000320: 7263 653a 2068 7474 7073 3a2f 2f63 6f6d rce: https://com00000330: 6d6f 6e73 2e77 696b 696d 6564 6961 2e6f mons.wikimedia.o00000340: 7267 2f77 696b 692f 4669 6c65 3a53 756e rg/wiki/File:Sun00000350: 666c 6f77 6572 5f61 735f 6769 665f 7765 flower_as_gif_we00000360: 6273 6166 652e 6769 6600 2c00 0000 00dc bsafe.gif.图像数据的剩余部分

之后就没有什么可谈的了。这张图像跳过了大多数其他的gif 特性，如本地颜色表和动画，所以这张gif 剩下的大部分只是数据和终止符。

老实说lzw 压缩并不难学，但本文并不是要讲这个话题。如果你想学习它，Matthew Flickinger 在他的网站上有一篇好文章。

附加内容：真彩gif

你知道gif 可以是真彩色的吗？这和“局部颜色表“有关系。每个数据段都允许有自己的局部颜色表，因此如果你把一个gif 分成足够多的片断，你就可以得到真彩色了！

大多数gif 不会这样做，有几个原因。

首先，这样生成的图像是非常大的。每一个新的256 色调色板将消耗额外的768 字节。

第二，现在的渲染器不会“正确“渲染这样的图像。浏览器在默认情况下，如果没有指定，通常会在帧之间设置0.1 的延迟。

然而，一个真正符合规范要求的gif 渲染器会正确地显示真彩色gif。因此，如果你有足够的空间、内存和多余的CPU，为什么不做一个真彩gif 呢？

如果你想了解更多关于真彩gif 的信息，维基百科上有一整个章节。

gif 的历史

感谢大家有耐心看到这里。gif 规范中还有更多部分我没有讲到，如果你有兴趣了解更多关于gif 的信息，我建议你查看规范和我在文章顶部添加的那些链接。

gif 的结构

https://en.wikipedia.org/wiki/gif#history向日葵图片转自维基百科关于gifs 的文章（见脚注1）gif87a 在技术上是以比较有限的格式支持动画的。要了解更多信息，你可以试试gifiddle 仓库上的gif87a 动画例子：https://github.com/ata4/gifiddle更多信息请参见gif 规范的第18 节（逻辑屏幕描述符）。更多信息，请参见第4 节。文档来自gif 规范：https://www.w3.org/Graphics/gif/spec-gif89a.txt