【学习图片】05：GIF

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，包含一线大厂面试完整考点、资料以及我的系列文章。

理解GIF图像格式，同时解释图像编码的工作原理。

虽然在现代 Web 上不是特别有用，但 GIF（Graphics Interchange Format）为我们对图像编码核心概念的介绍提供了基础。

GIF 可以被认为是图像数据的一个包装器。它有一个称为 logical screen 的视口，到该视口的单独的图像帧绘制，这有点像 Photoshop 文档中的图层。这就是 GIF 支持它翻页动画的方式：一个帧被绘制到逻辑屏幕上，然后被另一个替换，再另一个取代。当然，当我们处理静态GIF时，这种区别并不重要，它是由绘制在逻辑屏幕上的单帧组成的。

GIF 使用无损数据压缩方法，如果你感兴趣，可以看作是“Lempel–Ziv–Welch”算法的变体。该算法工作的细节在这里不需要了解，但从高层次上看，它有点像“Uglifying” JavaScript，其中文件中的重复字符串被保存到内部字典中，因此可以引用而不是每次出现时重复。

当然，该算法并不像按数字涂色那么简单。它通过生成的颜色代码表再次查找像素颜色的重复序列，并创建一个可引用代码的第二张表。但是，在任何时候都不会丢失任何图像数据，而仅仅是以可以读取而不改变它的方式进行排序和重新组织。

虽然GIF在技术上使用无损压缩，但它确实有一个严重影响图像质量的主要限制：将图像保存为GIF总是会导致保真度降低，除非该图像已经使用256色或更少。

在GIF的逻辑屏幕上绘制的每一帧最多只能包含256种颜色。GIF还支持 "索引透明"，一个透明的像素将参考色表中一个透明 "颜色 "的索引。

将一个数值范围缩小到一个较小的、近似的输出值集合的做法被称为量化，在学习图像编码时你会经常看到这个术语。这种调色板量化的结果通常很明显。

为了更好地理解这个过程，回想一下你能够从我的描述中重新创建的光栅图像网格。

这一次，在那张原始图像上增加一点细节：多几个像素，其中一个是稍微深一些的蓝色。

如果没有任何压缩--可以这么说--你可以把这个网格描述为：

第一行，第一列是#0000FF。第一行，第二列是#0000FF。第一行，第三列是#0000FF。第一行，第四列是#FF0000。第二行，第一列是#0000FF。第二行，第二列是#000085。第二行，第三列是#0000FF。第二行，第四列是#FF0000。

使用类似于GIF的无损数据压缩和颜色索引的东西，你可以把它描述为:

A：#0000ff，B：#ff0000，C：#000085。第一行第一至三列是A，第一行第四列是B，第二行第一列是A，第二行第二列是C，第二行第三列是A，第二行第四列是B。

这种方法能够在几个地方简化像素对像素的描述（"第1列到第3列是..."），并通过在开头定义重复颜色的字典类型来节省一些字符。图像的可视度没有改变。信息已经压缩，没有任何损失。

正如你所看到的，单个深蓝色像素对我们编码的大小产生了过大的影响。如果我把自己限制在一个量化的调色板上，它可以被进一步减少：

A：#0000ff，B：#ff0000。第一行，第一至三列是A，第一行，第四列是B。

不幸的结果是，节省的字节导致我们失去了像素完美的精度。

当然，你，渲染引擎，不知道这一点——更深蓝色像素的细节被我编码源图像时遗漏了。你按照我们关于手头的颜色的共同理解恰好渲染了图像。

现在，在这个夸张的例子中，将三种颜色减少到两种，使质量有了明显的差别。在一个更大、更详细的图像中，其效果可能不那么明显，但它们仍然是可见的。

当编码为GIF时，像阴影这样的微妙渐变变得斑驳，个别像素与周围环境形成鲜明对比：

实际上，无损压缩和调色板量化的结合意味着GIF在现代Web开发中并不是很有用。无损压缩并不能有效减少文件大小，减少调色板意味着质量明显下降。

归根结底，GIF只是一种有效的格式，用于编码简单的图像，这些图像已经使用了有限的调色板、硬边缘而不是抗锯齿、纯色而不是渐变--所有的使用情况都是由其他格式更好地满足的。更小、更有特色的PNG通常是光栅图像的更好选择，尽管两者在文件大小和视觉保真度方面都远逊于SVG，而在图标或线条艺术等使用案例中，矢量图像是最突出的。GIF最常见的现代用例是动画，但有更有效的、更容易获得的现代视频格式来满足这一目的。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://web.dev/learn/images/...

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。