【图片】深入解析PNG：揭秘PNG8、PNG24、PNG32的奥秘与压缩原理

在数字图像的世界中，PNG格式以其无损压缩和卓越的图像质量，成为了众多设计师和开发者的优选。PNG格式的多样性，特别是PNG8、PNG16?PNG24和PNG32，为不同的应用场景提供了丰富的选择。本文将带您深入了解这些格式的特点，并探索PNG背后的压缩原理。

png的多样性

PNG8、PNG16、PNG24、PNG32 是 PNG 图像格式的不同版本，它们的主要区别在于颜色深度和对透明度的支持：

PNG 8：PNG 8中的8，其实指的是8bits，相当于用2^8（2的8次方）大小来存储一张图片的颜色种类，2^8等于256，也就是说PNG 8能存储256种颜色。它通过两种形式的透明度透明图片：

索引透明（每个颜色在调色板中有自己的透明度设置）

简单的二值透明（完全透明或完全不透明），即Alpha透明

特别适合用于颜色数量较少的图像，如图标、LOGO和简单图。

PNG16：PNG16是指16位灰度或RGB色彩PNG图像，支持更多的颜色表达。它可以显示更丰富的色彩和灰度级别，适用于一般的图像和照片。PNG16图像的文件大小通常比PNG8大，但相对于其他无损格式如BMP和TIFF来说，仍然较小。

PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示R（红）、G（绿）、B（蓝）。R(0~255), G(0~255), B(0~255)，可以表达256乘以256乘以256=16777216种颜色的图片，这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。不支持Alpha透明通道，因此无法实现像素级别的透明度控制，所有的像素都必须是完全不透明的。PNG24适合用于色彩丰富且不需要透明效果的大图、照片等。

PNG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R（红）、G（绿）、B（蓝）、A（透明）。R(0~255),G(0~255),B(0~255),A(0~255)。比PNG 24多了一个8位的Alpha通道（透明），也就是说PNG 32能表示跟PNG 24一样多的色彩，并且还支持256种透明的颜色。因此PNG32 适用于需要高品质色彩和透明度渐变的复杂图像，如半透明叠加层、高质量图标等。

网页中选用PNG格式说明

对于小尺寸、颜色简单且需要透明效果的图标，通常选用PNG8。

对于全彩照片或者色彩丰富的图像，若不需透明效果，优选PNG24。

如果图像需要细腻的透明度控制，比如网页设计中的半透明元素或复杂矢量图形，优先考虑PNG32。

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的无损压缩原理是其广受欢迎的关键因素。PNG压缩分为两个阶段：

预解析（Prediction）

压缩（Compression）

预解析（Prediction）：

PNG将图像数据转换为一种称为"过滤器"的格式。过滤器通过对每个像素进行一系列的转换来减少数据的冗余性。这些转换包括差分、平均值、子级和无转换，使得后续压缩阶段能更高效地工作。

说白了，就是一个女神，在化妆前，会先打底，先涂乳液和精华，方便后续上妆、美白、眼影、打光等等。

png图片用差分编码（Delta encoding）对图片进行预处理，处理每一个的像素点中每条通道的值，差分编码主要有几种：

不过滤

X-A

X-B

X-(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）

PNG采用DEFLATE算法，结合LZ77算法和Huff**n编码，对预处理后的图像数据进行压缩。这一阶段的压缩率受到预解析阶段结果和Deflate算法匹配情况的影响。

压缩阶段会将预处理阶段得到的结果进行Deflate压缩，它由 Huff**n 编码 和 LZ77压缩构成。如前面所说，Deflate压缩会标记图片所有的重复数据，并记录数据特征和结构，会得到一个压缩比较大的png图片 编码数据。

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

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

什么样的PNG图片适合压缩

常规的png图片，颜色越单一，颜色值越少，压缩率就越大，比如下面这张图：

它仅仅由红色和绿色构成，如果用0代表红色，用1代表绿色，那用数字表示这张图就是下面这个样子：

00000000000000000

00000000000000000

00000000000000000

1111111111111111111111111

1111111111111111111111111

1111111111111111111111111

我们可以看到，这张图片是用了大量重复的数字，我们可以将重复的数字去掉，直接用数组形式的[0, 1]就可以直接表示出这张图片了，仅仅用两个数字，就能表示出一张很大的图片，这样就极大的压缩了一张png图片。

所以！颜色越单一，颜色值越少，颜色差异越小的png图片，压缩率就越大，体积就越小。

PNG图片的优势

透明度表达方式：PNG格式支持两种透明度表达方式，分别是索引透明和Alpha透明。索引透明是PNG8图像特有的方式，通过调整调色板中的颜色索引来实现透明效果。Alpha透明则是PNG32图像的方式，通过Alpha通道来表示每个像素的透明度级别。使得图像的边缘能与任何背景平滑融合，这种功能是GIF和JPEG没有的。

图像质量和细节：由于PNG是无损压缩格式，它能够保留图像的原始质量和细节。相对于有损压缩格式如JPEG，PNG图像在重要细节和边缘处理上表现更好，不会出现压缩导致的失真。

支持动画：除了静态图像，PNG格式还支持MNG扩展，可以用于创建简单的动画效果。但与GIF相比，MNG并不常见，并且在浏览器和应用程序的支持方面相对有限。

浏览器兼容性：PNG格式得到了广泛的浏览器支持，几乎所有现代浏览器都能够正确显示PNG图像。但在某些旧版本的浏览器中，特别是IE6及以下版本，对PNG透明度的支持可能存在一些兼容性问题。

使用场景：由于PNG格式的透明度支持和图像质量，它常用于需要透明背景、线条和文本等图像元素的场景，如图标、徽标、UI界面等。它也适用于需要无损压缩并保持图像质量的场景，如科学图像、医学图像等。

体积小：它利用特殊的编码方法标记重复出现的数据，使得同样格式的图片，PNG图片文件的体积更小。网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，优先选择PNG格式的图片。

无损压缩：PNG图片采取了基于LZ77派生算法对文件进行压缩，使得它压缩比率更高，生成的文件体积更小，并且不损失数据。