屌丝的眼泪，因为错过的初恋，才搞清楚 PNG 图片压缩原理
老弟 莫慌，讲实话，如果撩妹纸有那一坨坨乱码那么简单，哥哥我早就妻妾成群啦。
接下来我就一一讲解这一堆十六进制编码的含义。
8950 4e47 0d0a 1a0a：这个是 PNG 图片的头，所有的 PNG 图片的头都是这一串编码，图片软件通过这串编码判定这个文件是不是 PNG 格式的图片。
0000 000d：是 iHDR 数据块的长度，为 13。
4948 4452：是数据块的 type,为 IHDR，之后紧跟着是 data。
0000 02bc：是图片的宽度。
0000 03a5：是高度。
以此类推，每一段十六进制编码就代表着一个特定的含义。下面其他的就不一一分析了，太多了，小伙伴们自己去查吧。
什么样的 PNG 图片更适合压缩
常规的 png 图片，颜色越单一，颜色值越少，压缩率就越大，比如下面这张图：
它仅仅由红色和绿色构成，如果用 0 代表红色，用 1 代表绿色，那用数字表示这张图就是下面这个样子：
00000000000000000
00000000000000000
00000000000000000
1111111111111111111111111
1111111111111111111111111
1111111111111111111111111
我们可以看到，这张图片是用了大量重复的数字，我们可以将重复的数字去掉，直接用数组形式的[0, 1]就可以直接表示出这张图片了，仅仅用两个数字，就能表示出一张很大的图片，这样就极大的压缩了一张 png 图片。
所以！颜色越单一，颜色值越少，颜色差异越小的 png 图片，压缩率就越大，体积就越小。
PNG 的压缩
PNG 图片的压缩，分两个阶段：
**预解析（Prediction）：**这个阶段就是对 png 图片进行一个预处理，处理后让它更方便后续的压缩。说白了，就是一个女神，在化妆前，会先打底，先涂乳液和精华，方便后续上妆、美白、眼影、打光等等。
**压缩（Compression）：**执行 Deflate 压缩，该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。
预解析（Prediction）
png 图片用差分编码（Delta encoding）对图片进行预处理，处理每一个的像素点中每条通道的值，差分编码主要有几种：
不过滤 X-AX-BX-(A+B)/2(又称平均值)Paeth 推断（这种比较复杂）假设，一张 png 图片如下:
这张图片是一个红色逐渐增强的渐变色图，它的红色从左到右逐渐加强，映射成数组的值为[1,2,3,4,5,6,7,8]，使用 X-A 的差分编码的话，那就是:
[2-1=1, 3-2=1, 4-3=1, 5-4=1, 6-5=1, 7-6=1, 8-7=1]
得到的结果为
[1,1,1,1,1,1,1]
最后的[1,1,1,1,1,1,1]这个结果出现了大量的重复数字，这样就非常适合进行压缩。
这就是为什么渐变色图片、颜色值变化不大并且颜色单一的图片更容易压缩的原理。
差分编码的目的，就是尽可能的将 png 图片数据值转换成一组重复的、低的值，这样的值更容易被压缩。
最后还要注意的是，差分编码处理的是每一个的像素点中每条颜色通道的值，R（红）、G（绿）、B（蓝）、A（透明）四个颜色通道的值分别进行处理。
压缩（Compression）
压缩阶段会将预处理阶段得到的结果进行 Deflate 压缩，它由 Huffman 编码 和 LZ77 压缩构成。
如前面所说，Deflate 压缩会标记图片所有的重复数据，并记录数据特征和结构，会得到一个压缩比最大的 png 图片 编码数据。
Deflate 是一种压缩数据流的算法. 任何需要流式压缩的地方都可以用。
还有就是我们前面说过，一个 png 图片，是由很多的数据块构成的，但是数据块里面的一些信息其实是没有用的，比如用 Photoshop 保存了一张 png 图片，图片里就会有一个区块记录“这张图片是由 photshop 创建的”，很多类似这些信息都是无用的，如果用 photoshop 的“导出 web 格式”就能去掉这些无用信息。导出 web 格式前后对比效果如下图所示：
可以看到，导出 web 格式，去除了很多无用信息后，图片明显小了很多。
结语
以上就是我对 png 的理解了，写的不好，就像一个支离破碎的中老年，杂乱无章。
想起那年跟初恋分手的原因 是因为怕影响到学习。。。可是分开后成绩也还是很烂，不仅错过了女神，而且到现在也依然一事无成。
如今中年已至，身上背负着巨大的房贷，家里还有嗷嗷待哺的孩子，看着身旁呼噜声轰天熟睡中的妻子，突然也就想开了。
就像鲁迅说的：
“爱情就像在海滩上捡贝壳，不要捡最大的， 也不要捡最漂亮的，要捡就捡自己最喜欢的， 最重要的是捡到了自己喜欢的 就永远不要再去海边了。”
。。。。。。
写完文章，不知不觉睡着了
梦回到十年前的那个夏天 我们都笑的很甜
看着你哭泣的脸 微笑着对我说再见
再见...
如果你觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言，一定会认真查询，修正不足，谢谢。
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论