本文首发于微信微信官方账号：感动世界，我的微信：qq449245884。我会第一时间和你分享前端行业动态，学习途径等等。

更多开源作品请看Github https://github.com/qq449245884/xiaozhi,包括完整的测试站点、资料和我采访一线厂商的系列文章。了解GIF图像的格式，解释图像编码的工作原理。

尽管GIF(图形交换格式)在现代网络上不是特别有用，但它为我们介绍图像编码的核心概念提供了基础。

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

GIF采用的是无损数据压缩方式，如果你感兴趣的话，可以看作是“莱姆佩尔-齐夫-韦尔奇”算法的变种。这里不需要了解算法的细节，但是从高层次上来说，有点像“刮”JavaScript，文件中重复的字符串保存在内部字典中，这样每次出现都可以引用而不是重复。

当然，算法不是用数字着色那么简单。它通过生成的颜色代码表再次找到像素颜色的重复序列，并创建可以引用代码的第二个表。但是，任何时候都不会丢失任何图像数据，而只是以一种无需更改即可读取的方式进行排序和重组。

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

GIF的逻辑屏幕上绘制的每一帧最多只能包含256种颜色。GIF还支持‘索引透明’，透明像素会引用颜色表中的透明‘颜色’索引。

将数值范围缩小到更小的近似输出值集的做法称为量化，这是您在学习图像编码时经常看到的。这种调色板量化的结果通常很明显。

为了更好地理解这个过程，回想一下您可以根据我的描述重新创建的光栅图像网格。

这一次，在原图上增加一点细节：多几个像素，其中一个像素是略深的蓝色。

在没有任何压缩的情况下——可以这么说——你可以把这个网格描述为：

第一行和第一列是#0000FF。第一行和第二列是#0000FF。第一行和第三列是#0000FF。第一行第四列是#FF0000。第二行和第一列是#0000FF。第二行第二列是#000085。第二行和第三列是#0000FF。第二行第四列是#FF0000。使用类似于GIF无损数据压缩和颜色索引的东西，可以将其描述为：

甲：#0000ff，乙：#ff0000，丙：#000085 .第一行第一到第三列是A，第一行第四列是B，第二行第一列是A，第二列是C，第二列是A，第二列是B.这个方法可以在几个地方简化像素的描述('第一列到第三列是.')，并通过在开头定义重复颜色的字典类型来节省一些字符。图像的可见性没有改变。信息已经被压缩，没有任何损失。

010-350003

如你所见，一个深蓝色的像素对我们代码的大小有很大的影响。如果我把自己限制在一个量化的调色板上，它可以进一步减少：

甲：#0000ff，乙：#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,有完整的测试站点、资料和我采访一线厂商的系列文章。