屌丝的眼泪，因为错过的初恋，才搞清楚 PNG 图片压缩原理 (1)

• **三类女神 = PNG 32：**在第三类女神面前，所有的语言都显得苍白无力。那是一种看了让屌丝上下通透、手眼通天的至尊级存在。超凡脱俗、天神下凡都不足以描摹她美色的二分之一。我曾经只有在梦里才见到过。

哎。。。我的初恋，看着她现在的照片，应该是触及 PNG 24 这一等级了。

PNG 图片数据结构

PNG 图片的数据结构其实跟 http 请求的结构很像，都是一个数据头，后面跟着很多的数据块，如下图所示：

如果你用 vim 的查看编码模式打开一张 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 压缩会标记图片所

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

有的重复数据，并记录数据特征和结构，会得到一个压缩比最大的 png 图片 编码数据。

Deflate 是一种压缩数据流的算法. 任何需要流式压缩的地方都可以用。

还有就是我们前面说过，一个 png 图片，是由很多的数据块构成的，但是数据块里面的一些信息其实是没有用的，比如用 Photoshop 保存了一张 png 图片，图片里就会有一个区块记录“这张图片是由 photshop 创建的”，很多类似这些信息都是无用的，如果用 photoshop 的“导出 web 格式”就能去掉这些无用信息。导出 web 格式前后对比效果如下图所示：

可以看到，导出 web 格式，去除了很多无用信息后，图片明显小了很多。

结语

以上就是我对 png 的理解了，写的不好，就像一个支离破碎的中老年，杂乱无章。

想起那年跟初恋分手的原因 是因为怕影响到学习。。。可是分开后成绩也还是很烂，不仅错过了女神，而且到现在也依然一事无成。

如今中年已至，身上背负着巨大的房贷，家里还有嗷嗷待哺的孩子，看着身旁呼噜声轰天熟睡中的妻子，突然也就想开了。