图片压缩知识梳理(1) PNG 原理

1、概述

对于PNG这种图像存储格式，它有两个特色：无损压缩和支持透明效果。

• 因为PNG文件采用LZ77算法的派生算法进行压缩，其结果是得到高的压缩比，不损失数据。它利用特殊的编码方法标记重复出现的数据，于是对图像的颜色没有影响，也不可能产生颜色的损失，这样就能够重复保存而不下降图像质量。
• PNG能够为原图像定义256个透明层次，使得彩色图像的边缘能与任何背景平滑地融合，从而完全地消除锯齿边缘。这种功能是GIF和JPEG没有的。

今天，咱们就来介绍一下PNG的相关知识。

2、PNG 原理

2.1 PNG 文件结构

PNG由一个8字节的PNG文件署名域和按照特定结构组织的3个以上的数据块组成，其中数据块分红两种，关键数据块和可选数据块，关键数块为以下四种：

• 文件头数据块
• 调色板数据块
• 图像数据块
• 图像结束数据块

而每一个数据块由如下四个数据域组成：

• 长度
• 数据块类型码
• 数据块数据
• 循环冗余校验

从上面的构成中，咱们能够看到，对于用户可见的部分，真正和展示有关就是图像数据块中的数据块区域，所以，咱们就须要注意有没有在别的数据块中引入了没必要要的数据，例以下面的右图，在从Photoshop中导出的时候，选择了export to web，所以它的大小就比左图要小不少。

2.2 PNG 格式

PNG的格式有8/24/32三种，称为PNG 8/ PNG 24 / PNG 32，其中后面的数字表示最多能够索引和存储的颜色值。

• PNG 8支持两种不一样的透明形式，索引透明和Alpha透明
• PNG 24不支持透明
• PNG 32在24位基础上增长了8位透明通道，所以可展示256级透明程度

咱们应当根据图片来选择正确的格式，在能表示图片中颜色的前提下，尽可能选择位数较少的PNG格式。

2.3 PNG压缩原理

PNG压缩过程分为两个阶段：Prediction 和 Compression。

2.3.1 Prediction

在这一阶段，咱们每次会处理图片中一行的数据，首先经过Filter阶段处理这一行当中每个的像素点中每条通道的值，也就是咱们常说的ARBG。它交由差分处理器来从新计算该通道的值。差分处理会根据这个像素点上通道和以前或者之上像素点对应通道值之间的差别，进行差分编码，也就是说，若是本来相邻像素点之间通道的值之间很接近，那么咱们就会得到不少的1,0,-1这种很小的值。这里有两点须要注意：

• 整个Prediction阶段的目的，也就是选择合适的差分处理器，让最终的编码结果出现尽量多的零值和重复值，这一结果将会影响到Compression阶段的压缩率。
• 差分编码器比较的是像素点之间对应通道的值，而并非整个像素点。

2.3.2 Compression

在Prediction处理完毕以后，再将这一转换的结果输出给Deflate，Deflate执行真正的压缩操做，它会经过LZ77和Huffman对图像进行编码，最后将处理以后的结果保存。在Compression阶段，它最终的压缩率会受到两方面的影响：

• Prediction 的处理结果：对于颜色相近的区域，也就是有不少零值的区域，那么压缩率将会更高，而若是颜色之间差别很大，那么压缩效果将不尽人意。
• Deflate 每一行的匹配状况：前面咱们分析过，整个处理过程是按行来处理的。而在处理每一行的数据时，Deflate把处理的符号数限制为3 ~ 258，也就是说，最大的压缩率为1032:1，当出现符号数小于3个时，那么就有可能出现没法匹配的状况，所以，对于图片宽度的改变将有可能影响最终压缩的效果。

下面，咱们对于上面描述的第二点举一个例子，对于下面两幅图，右图虽然之比左图宽了两个像素，可是它的大小整整大了一倍：

咱们经过下面这个工具能够观察每一个像素点的压缩率：

• Pngthermal

在分析的结果中，深蓝色表示该像素点具备较高的压缩率，而黄色/红色则表示压缩率较低，能够发现正是因为改变了图片的大小，致使某些像素点没有匹配到，从而产生了一个较大的文件。

2.3.3 代码表示

对于 Prediction 和 Compression 这两个过程，能够经过下面这个代码来理解：

• gist.github.com/anonymous/9…

3、总结

PNG有不少优势，而且应用普遍，可是仍是须要根据具体的场景来选用：

• 若是原始的图片为高清的，可是不要求进行无损的压缩，那么能够选择相似于JPG这样的有损压缩
• 可是从反方面来讲，若是原始图片较为简单，而且须要支持透明形式，那么PNG要因为JPG。

这一篇文章，介绍了PNG相关的一些知识，目的仍是让你们对这种图片格式有一个大概的理解，这也是咱们后面分析优化的基础。

4、参考文献

1.How PNG Works 2.PNG - 百度百科