大家好，今天来为大家分享你真的看懂gif吗？分析gif文件和一些奇怪的gif特征的一些知识点，和的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

大多数人都知道，gif 是一种动画文件格式。您可能看过有关gif 文件的信息，并认为这些文件非常大。也许你看着它们会想：哇，这些图片的分辨率这么低。但无论怎样，一提到gif，你的印象应该是一种简短的动画文件格式。

然而，这个用例与编写gif 的开发人员的意图有很大不同。在本文中，我们将仔细研究gif 文件的结构，并讨论它的一些有趣的功能。

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

W3 规范Matthew Flickinger：gif 中有什么？我从ntfs.com 找到了这个指南来帮助入门

在写文章的时候，我其实是利用这些资源做了一个勉强达到要求的gif解析器，取名为awesome-gif，可以解析一些gif。我不建议大家使用它。

让我们进入正题吧。

gif 的历史

gif 文件格式由Compuserve 于1987 年创建。早在1987 年，gif 就是一种非常紧凑的格式！它采用的压缩方式，并不是普通的压缩方式，而是LZW压缩技术。许多较旧的文件格式（其中一些由Compuserve 生成）使用RLE（运行长度编码），这在许多情况下效率不高。 GIF 的一大获胜因素是其良好的压缩和色域（全256 色，太棒了！）。 (注1)

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

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

附录A。快速参考表。块名称所需标签扩展名。 Vers.应用程序扩展选项。 (*)0xFF (255) 是89aComment 扩展选项。 (*)0xFE (254) 是89a 全局颜色表选项。 (1) 无否87a 图形控制扩展选项。 (*)0xF9 (249) 是89a 标头要求。 (1) 无无N/A 图像描述符选项。 (*)0x2C (044) 无87a (89a) 本地颜色表选项。 (*) 无无87a 逻辑屏幕描述符要求。 (1) 无否87a (89a) 纯文本扩展选项。 (*)0x01 (001) 是89aTrailer 要求。 (1)0x3B (059) 无87aUnlabeled BlocksHeader Req。 (1) 无否N/A 逻辑屏幕描述符要求。 (1) 无否87a (89a) 全局颜色表选项。 (1) 无否87a 本地颜色表选项。 (*) 无无87a 图形渲染块纯文本扩展选项。 (*)0x01 (001) 是89a图像描述符选项。 (*)0x2C (044) 无87a (89a)控制块图形控制扩展选项。 (*)0xF9 (249) 是89a 特殊用途块拖车要求。 (1)0x3B (059) 无87aComment 扩展选项。 (*)0xFE (254) 是89a 应用程序扩展选项。 (*)0xFF (255) 是89alegend: (1) 如果存在，最多出现一次(*) 出现零次或多次(+) 出现一次或多次

其中大部分内容会让那些没有阅读完整规范的人感到困惑，所以让我们讨论一下gif 是如何组合在一起的，并讨论它的一些怪癖。

在开始之前，让我们先来了解一下这些规格。

附录D. Conventions.Animation – 图形交换格式并非旨在作为动画平台，尽管它可以通过有限的方式完成。

附录

D. 公约。

动画—— 这种图形交换格式并非旨在成为动画平台，尽管在某种程度上它可以是这样。

gif 的结构

下面我用一个例子来详细分析一下。如果您想跟随，只需下载即可。 (注2)

如果您在家中进行操作，您所需要的只是一台安装了hexdump 工具的计算机。我要使用的是xxd，它预装在大多数UNIX 系统（Linux、macOS）上，或者可以通过vim-common 包安装。

gif 标题

每个gif 都以标头、标记gif 类型的魔法位以及提供图像基本详细信息的一些额外信息开始。

xxd Sunflower_as_gif_websafe_89a.gif | xxd Sunflower_as_gif_websafe_89a.gif | head -1 # 和一些箭头00000000: – 4749 4638 3961 – dc00 0501 f700 0002 0102 gif89a…

gif 标头可以使用xxd 轻松解码为ascii（如果有意义的话）。看看上面写着什么，gif89a！这是经过认证的有效gif！

每个字母都是一个字节，因此我们在这里寻找的神奇字节是：0x47、0x49、0x46、0x38、0x39、0x61。

另外，最后三个字节可能是：0x38、0x37、0x61，如果仅支持gif87a文件格式，就会出现这种情况。我们主要研究gif89，旧版本的格式忽略不计。

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

我先问你一个问题：谁会接受gif87a？

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

这是我们之前看到的向日葵的gif87a 版本。该版本仅用于此处。

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

特诺吉菲姆古菲猫

我们从这个gif 标题开始：

xxd Sunflower_as_gif_websafe_gif87a.gif | xxd Sunflower_as_gif_websafe_gif87a.gif |头-100000000: 4749 4638 3761 fa00 2901 f500 00ff 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 0000 0000 gif89a.).%.

事实上，这有点欺骗性，giphy只接受动画gif，所以我们必须单击编辑按钮（显示帧编辑器），然后单击完成。 gif87a规范允许存储多个图像，但它们不能被延迟（因此没有动画，见注释3）。

imgur 保留原始文件！

下载xxd aUxm3NN.gif |头-100000000: 4749 4638 3761 fa00 2901 f500 00ff cc33 gif87a.).3

至于gfycat，则在最后的“编码”阶段卡住了整整20分钟。希望周末我没有提醒他们的一位可怜的工程师一些事情。

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

无论如何，回到探索文件格式的主题。

逻辑屏幕描述符

那么如何以一定的分辨率显示图像呢？假设我们使用macOS Preview 中的“获取信息”功能，它如何知道这张图像是220×261？

不管你相信与否，这是内置于文件格式中的！ (注4)

字节0x6-0xA是这部分信息，还添加了一些额外的内容。字节0x6 和0x8 指的是长度和宽度。

xxd Sunflower_as_gif_websafe_89a.gif | xxd Sunflower_as_gif_websafe_89a.gif | head -1 # 和一些箭头00000000: 4749 4638 3961 – dc00 0501 – f700 0002 0102 gif89a…

每个维度有两个字节来指定大小。同样重要的是要记住，gif 文件格式中的所有字节都指定为小尾数（注5）。

首先是宽度，即0x00dc（从dc00 重新排序）=220（十进制）。

然后是长度，即0x0105（从0501 重新排序）=261（十进制）。

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

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

其他文件格式在这方面是类似的。如果你想下载理论上最宽的png，可以点击这里。该文件很小，但打开它时您的图像浏览器可能会崩溃。 Firefox 无法打开它并报告错误，尽管它是合规的。

回到逻辑屏幕描述符

但逻辑屏幕描述符还没有完成，接下来是一组打包字段。通过规范中的图表更容易解释。

打包字段=全局颜色表标志1 位颜色分辨率3 位排序标志1 位全局颜色表大小3 位

这里有关于全局颜色表的信息。如果设置了全局颜色表位，它将出现在逻辑屏幕描述符之后。

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

排序标志告诉解码器前面的颜色更重要，并且它按照有用性的顺序从高到低对颜色进行排序。

全局色表的大小是指色表有多大。

在向日葵图像的0xA 字节中，我们得到了0xF7 的结果

xxd Sunflower_as_gif_websafe_89a.gif | xxd Sunflower_as_gif_websafe_89a.gif |头-100000000: 4749 4638 3961 dc00 0501 – f7 – 00 0002 0102 gif89a…

或二进制：1111 0111

这意味着我们的gif 基本上已经满了，除了未排序的GCT。

GCT 未按重要性排序 1111 0111 GCT 集 每个3 个字节 GCT 为768 字节颜色 （最大尺寸）（最大分辨率）

全局颜色表存储每个字节部分使用的颜色。它们是0-255 之间的标准RGB 值，您可以在任何现代RGB 颜色选择器中使用。

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

您可能已经注意到，0xA 字节的第一位表示GCT 可以是可选的。这真的很有趣。我们如何在不指定图像颜色的情况下渲染图像？

根据以下规格：

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

如果我们去掉图像的全局颜色表，现代渲染器会对我们的图像做什么？我确信将会发生一些奇妙的事情。

我们的图像指定了768 字节的颜色表大小。它从0xA 字节开始.假设我们像这样将0xA 字节的最高有效位清零。

然后删除到字节789（不包括）。

xxd Sunflower_as_gif_89a-no-gct.gif | xxd Sunflower_as_gif_89a-no-gct.gif |头-100000000: 4749 4638 3961 dc00 0501 007f 8121 f904 gif89a.

既然第一行像这样结束，它仍然是一个完全有效的gif，如下所示：

简单地！在撰写本文时，它仅显示一个完美的黑色方块。我尝试过的每个渲染器都是这种情况。 Gimp、Chrome、Firefox、Preview、gifiddle，等等。

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

继续讨论逻辑屏幕描述符

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

字节B是背景颜色，指的是全局颜色表的索引；字节C是像素长宽比，描述像素的方形度。

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

等等，像素长宽比是多少？

像素并不总是正方形！字节也不总是8 位，但这不会详细说明。

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

我想知道最流行的gif 渲染器在渲染非方形像素时的兼容性如何。让我们在Firefox 和Chrome 中进行一个流行的测试，看看它们的外观：http://frs.badcoffee.info/PAR_AcidTest/

以上是：jpg、png 和gif。 Firefox、Chrome 和Preview 都忽略宽高比。

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

即使是我能找到的最兼容的gif 浏览器gifiddle，也不支持非方形像素：https://github.com/ata4/gifiddle/issues/1

如果您确实想显示非方形像素，可以使用调整后的gimp 来实现。此外，grafx2 显然可以处理非常具体的奇怪像素分辨率。不过我自己还没有测试过。

返回全局颜色表

全局颜色表(GCT) 无疑是gif 中最无聊的部分。这里确实没有什么值得谈论的。

我的bad-gif 项目可以输出向日葵的GCT 中的所有颜色（也许还有其他图像）。

GCT的解析就到这里了，可以看到其实没什么特别的。

运行以下命令：

货物运行–quiet — –gif-file ./experiments/Sunflower_as_gif_websafe.gif

可选的图形控制扩展

接下来我们讨论图形控制扩展（GCE），由扩展引入者0x21（扩展引入）引入，然后是0xF9（！）

有许多可用的扩展，但图形控制扩展可以说是最重要的扩展之一，至少在现代用例中是这样。 GCE 允许帧之间有显示延迟，以便gif 可以变得“动画”。 GCE 还允许做一些其他事情。

xxd Sunflower_as_gif_websafe_89a.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 6c 65 2073 6f75 .QFile sou

这张gif 不是动画，所以这里没有太多内容。正如你所看到的，上面有很多零，但我们仍然在逐字节讨论。

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

等等，我们可以摆脱块大小吗？

如果块大小始终是一个静态常量，那就没什么大不了的，不是吗？从技术上讲，它是规范的一部分，但实际上并没有做任何事情。让我们在流行的图像浏览器中打开它并看一下。

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

在下面的测试中我修改了它以删除GCE。下面以xxd格式保存修改后的版本。

00000000: 4749 4638 3961 2000 3400 f0ff 00ff ffff gif89a .4.00000010: 0000 0021 f903 0500 0002 002c 0000 0000 ..000000 20: 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 e34 e bfcb Nf.p,6u.N.00000050: 0131 ace1 ea47 0405 9128 9f42 9714 2667 .1.G.(.B.g00000060: a70d 3564 bd1a b52e 25b7 f905 8729德31. 5d .%.).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;

（更新字节位于：0x16，从0x4-0x03）

第一个是macOS 预览版：

预览符合！

接下来我们试试火狐浏览器：

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

当块大小被删除时，Chrome 会变得有点疯狂。 Chrome 绝对是这里最不合规的。

返回图形控制扩展

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

打包字段=保留3 位处理方法3 位用户输入标志1 位透明颜色标志1 位

在我们的图像中所有这些字段都被设置为 0，所以我只解释它们。

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

User Input 是为了接受用户输入，通过点击鼠标或按下键盘将 gif 图片推进到下一幅。

透明索引是用来设置我们是否应该允许透明。

等一下，gif 可以接受用户输入？？？

是的，你没看错。gif 可以接受用户的输入来推进到下一帧。这个可怜的家伙为了用 png 重现这一特性建立了一个网站。真可惜，他像我一样被困在这里了，就因为他没看过 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 剩下的大部分只是数据和终止符。

附加内容：真彩 gif

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

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

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

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

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

总结

用户评论

病态的妖孽

一直觉得 GIF 就只是动图，看了这篇才知道居然这么复杂！作者分析真细致，比如讲到它的压缩算法和色彩限制，我都眼开眼闭就听懂啦哈

    有18位网友表示赞同！

不相忘

作为一名设计师来说，我对 GIF 的应用频率很高，但这篇文章让我发现了很多原来没注意到的细节。比方说那"GIF的循环特性会导致误导"这个观点，很有道理！很多时候我们只是用来渲染短暂情绪，却可能忽略了它的潜在影响。

    有17位网友表示赞同！

容纳我ii

看完这篇文章，我才真正明白 GIFs 的原理和局限性！以前都是一味地拿来用，没想到背后还有这么多知识点。作者的举例也很生动形象，让我更容易理解一些概念。推荐给同样对 GIF 有兴趣的朋友来看看！

    有20位网友表示赞同！

我怕疼别碰我伤口

我倒是觉得这篇文章有些过于专业了，对非专业人士来说可能不太友好？太多技术细节，看了一大堆就记不住什么重点，感觉像在看学术论文一样 😅

    有12位网友表示赞同！

灬一抹丶苍白

GIF的色彩限制确实很令人头疼，有时候想表达一些复杂的色调，却只能用有限的颜色来完成，这让我很苦恼！文章也提到了很多解决这个问题的方法，希望以后能尝试一下。

    有9位网友表示赞同！

夜晟洛

我有个问题，就是关于GIF循环特性会导致误导的地方，我觉得这取决于具体的使用场景吧？像用来展示产品演示动画或者一些科技概念的视频讲解，用循环播放可能更能让观众清楚地理解内容。作者可以补充更多讨论?

    有17位网友表示赞同！

抓不住i

我还挺喜欢这种分析式的科普文章，能让我们了解到很多平常不关注的小细节！这篇介绍GIF的原理和特性真的是很专业了，我以前只知道GIF是动图，现在才知道它背后还有这么复杂的编码结构。感谢作者的讲解！

    有11位网友表示赞同！

何必锁我心

我觉得文章写的不错，但总觉得缺少一些实践类的应用示例？比如可以用一些具体的案例来说明如何利用GIF的特点来创作更有趣、更有效的视觉效果，这样更有说服力吧 🤔

    有12位网友表示赞同！

你tm的滚

这篇文章确实让我对 GIF 进一步了解了，之前只知道它是用来分享动态图片的，没想到它的编码算法和特性居然这么复杂！文章内容很全面，读完仿佛打开了新世界的大门 😊

    有13位网友表示赞同！

笑叹★尘世美

这个"GIF 文件大小问题"确实挺头疼的，有时候想上传一个高质量的 GIF，却因为文件太大而被限制。看了这篇文章后了解到原因是它所用的压缩算法，希望以后会有更高效的压缩方法！

    有20位网友表示赞同！

顶个蘑菇闯天下i

我一直觉得GIF很酷炫，能快速地表达情绪和动作，看完之后对它的原理有了更深入的理解。作者把复杂的知识点解释得通俗易懂，很有耐心！点赞 👍

    有6位网友表示赞同！

坏小子不坏

我还挺好奇GIF未来的发展方向？随着技术的进步，会不会出现更高效、更加灵活的图片格式呢？我觉得文章中探讨这个部分略有不足 😜

    有11位网友表示赞同！

志平

我比较不喜欢文章末尾提到的那些奇怪GIF现象，感觉有些哗众取宠，浪费篇幅。还是应该专注于对GIF本质的深入分析，例如它的历史起源、发展趋势等等，这样更有意义！

    有9位网友表示赞同！

剑已封鞘

作者提出的这些观点很有启发性，比如"GIF循环特性会导致误导"，确实需要我们引起重视。我们平时在制作或传播GIF时，要更加注重表达内容的真确度和信息的可信度，避免造成不必要的负面影响！

    有9位网友表示赞同！

可儿

我觉得这篇文章对于那些对设计、动画或者编码技术感兴趣的人来说非常有帮助，能拓宽他们的知识视野。我也会推荐给我的朋友们看看，相信他们也能从中获得启发！

    有15位网友表示赞同！

葵雨

看了这篇后我突然意识到，很多我们平时常用的GIF，其实都隐藏着一些有趣的特性和背后的科学原理！这让我们更加珍惜和理解这种技术给我们带来的便利。

    有6位网友表示赞同！

杰克

我一直很喜欢GIF这种富有创意的图片格式，它承载着许多人的情感和故事。希望以后能够看到更多创新和应用型的GIF作品，展现它的无限可能的魅力！

    有13位网友表示赞同！