本文首发于微信公众号：大迁世界, 我的微信：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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。