图片压缩之 PNG

图片压缩之 PNG

程志达  · 3 年前

PNG(Portable Network Graphics) 是一种大家经常使用的位图格式。

PNG 的特点

• 位图
• 支持半透明 (BMP不支持，JPEG不支持，GIF不支持，TIFF支持)
• 支持无损压缩 (BMP不支持，JPEG支持，GIF不支持，TIFF支持)
• 不支持动画 (A-PNG没有得到广泛应用，GIF是事实标准)
• 不支持有损压缩, 确切地说，是没有可调整的质量设置。(JPEG支持，WebP支持)

PNG 的用途

• 有透明度的图标
• 有透明度的界面元素，如按钮，背景
• 对图片尺寸不敏感的一般用途

PNG 的压缩

PNG-8 压缩

虽然 PNG 的自带无损压缩使它比 BMP 和 TIFF 已经「聪明」了很多，但对于网络传播仍然嫌大。PNG-8 是唯一可行的压缩方法。

大家可能立即想到的就是 Photoshop 自带的 PNG-8 压缩。

它的原理是缩减图片的色彩空间，8位就是2的8次方种颜色，也就是256色（或更少）。对于一般的按钮和界面图标，可能只有几种颜色；但对于照片来说，256色肯定完全不够用。为了能显示过渡色，有两种办法来欺骗眼睛。一种是 Diffusion, 有一点像点彩画的做法，用两种相近颜色的来拼凑。它的参数是 Dither，Dither参数越大，混合得越均匀，但文件也会变大。

另外一种就是用图案，看上去不太自然，现在很少用。

Photoshop 自带的 PNG-8 压缩有严重的缺点，就是它的透明只能全透明，不能半透明。虽然这样的格式支持广泛，包括 IE 6 都支持。但也大大限制了 PNG 的使用范围。

透明PNG的压缩

如果不考虑 IE6 的话，又希望在保留透明度同时压缩大小，那么好消息是还可以用第三方工具，在 Mac 上有 ImageAlpha ，网页上有 TinyPNG 。它的原理是让 PNG-8 的 256 色中包含透明色。

可以用的压缩工具：

• http://www.libpng.org/pub/png/apps/pngquant.html 原始的 pngquant
• http://pngnq.sourceforge.net
• pngquant — lossy PNG compressor 升级版的 pngquant
• PNGOUT
• http://optipng.sourceforge.net
• http://pmt.sourceforge.net/pngcrush/

压缩参数

这些库都有很多参数可以调节。有兴趣的同学可以去亲自尝试一下。我知道你们还是想看现成的结果。

原大 94KB, 无压缩 12KB, pngQuant 压缩后 5KB 几乎无变化, WebP压缩后 3KB 有明显瑕疵。

首先，用 ImageMagick 把图标改小：这里附加了一点锐化和高级的重采样算法，可以保证图片压小了之后清晰。用默认的算法有时图片会糊，但这样会稍微增加计算量。

convert ${input} -resize 68x -unsharp 0x1+0.3 -filter Lanczos ${out}

 

然后，用 pngquant 把PNG压缩：

pngquant -f --speed 1 --ext opt.png ${input}

如果嫌压缩的机器太闲，最后还可以用PNGOut压缩掉10%左右：

pngout -ks -f6 ${input}

要用 WebP 吗?

WebP 是谷人希 (谷歌!人类的希望!) 推行的自造轮子，它的特点是，支持半透明的有损压缩，像是 PNG 和 JPEG 的杂交品种。技术小白鼠看到 Spec 容易流口水，也容易尝试使用，因为它号称可以比 png 小 45%，比 JPEG 小 30% 什么的。

WebP lossless images are  26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index.

但我不建议大规模使用，原因无非：

• 支持差。Chrome 当然能用，但包括 Photoshop 在内的大多数程序打不开。
• 压得慢。亲测。人家可能用了高级算法，但对于服务器来说，这点很蛋疼。
• 逻辑复杂。和理想不同，为了万无一失，你需要两套图片。一套 WebP，一套普通的 PNG 或者 JPEG。这就要压两次，还要存两次，还要加判断的逻辑。
• 先把手头的 PNG 和 JPEG 压好再说吧！
  不就是为了让图小一点吗，你已经试了所有的办法了吗？压缩参数都优化过了吗？你用 WebP 默认的参数去压，也不会比别人优化过的 PNG 和 JPEG 参数效果好、文件小的。把参数吃透，压到极限，你还觉得文件太大？

其实除了 WebP，还有类似 JPEG 2000 之类的轮子从来就没有推开，我悲观的认为，现有的格式已经足够好，新格式都没有极其显著的优越性，而大家的网速还在提升，带宽成本在下降。于是它们只能算生不逢时吧。

 

有损压缩和无损压缩的区别：

无损压缩

无损压缩的基本原理是相同的颜色信息只需保存一次。压缩图像的软件首先会确定图像中哪些区域是相同的，哪些是不同的。包括了重复数据的图像(如蓝天) 就可以被压缩，只有蓝天的起始点和终结点需要被记录下来。但是蓝色可能还会有不同的深浅，天空有时也可能被树木、山峰或其他的对象掩盖，这些就需要另外记录。从本质上看，无损压缩的方法可以删除一些重复数据，大大减少要在磁盘上保存的 图像尺寸。但是，无损压缩的方法并不能减少图像的内存占用量，这是因为，当从磁盘上读取图像时，软件又会把丢失的像素用适当的颜色信息填充进来。如果要减少图像占用内存的容量，就必须使用有损压缩方法。

压缩优缺点

有损压缩

有损压缩的特点是保持颜色的逐渐变化，删除图像中颜色的突然变化。生物学中的大量实验证明，人类大脑会利用与附近最接近的颜色来填补所丢失的颜色。例如，对于蓝色天空背景上的一朵白云，有损压缩的方法就是删除图像中景物边缘的某些颜色部分。当在·屏幕上看这幅图时，大脑会利用在景物上看到的颜色填补所丢失的颜色部分。利用有损 压缩技术，某些数据被有意地删除了，而被取消的数据也不再恢复。

无可否认，利用有损压缩技术可以大大地 压缩文件的数据，但是会影响图像质量。如果使用了有损压缩的图像仅在屏幕上显示，可能对图像质量影响不太大，至少对于人类眼睛的识别程度来说区别不大。可是，如果要把一幅经过有损压缩技术处理的图像用高分辨率打印机打印出来，那么图像质量就会有明显的受损痕迹。

无损压缩

无损压缩方法的优点是能够比较好地保存图像的质量，但是相对来说这种方法的 压缩率比较低。但是，如果需要把图像用高分辨率的打印机打印出来，最好还是使用无损压缩几乎所有的图像文件都采用各自简化的格式名作为 文件扩展名。从扩展名就可知道这幅图像是按什么格式存储的，应该用什么样的软件去读/写等等。