【学习图片】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,其中文件中的重复字符串被保存到内部字典中,因此可以引用而不是每次出现时重复。

【学习图片】05:GIF_第1张图片

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

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

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

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

【学习图片】05:GIF_第2张图片

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

image.png

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

【学习图片】05:GIF_第3张图片

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

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

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

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

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

【学习图片】05:GIF_第4张图片

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

A:#0000ff,B:#ff0000。第一行,第一至三列是A,第一行,第四列是B。

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

【学习图片】05:GIF_第5张图片

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

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

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

【学习图片】05:GIF_第6张图片

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

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

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

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

交流

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

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

你可能感兴趣的:(【学习图片】05:GIF)