PNG 图片压缩及若干工具对比

图像处理
,
Catalogue
  1. 1. imagemin-pngquant
  2. 2. ImageOptim
  3. 3. Zopfli
  4. 4. PNGOUT
  5. 5. OptiPNG
  6. 6. pngcrush
  7. 7. 其他参考文章

原始图片的体积是433KB，格式为 PNG，尺寸为 2560×920。【待补充图片测试用例】

这里共使用了5种工具:

  • 有损压缩工具 ImageOptim
  • GUI 工具 ImageOptim
  • Zopfli
  • OptiPNG
  • pngcrush

imagemin-pngquant

第一个找到的工具是 imagemin。不过单纯使用这个工具并不会获得体积更小的PNG图片，需要配合imagemin-pngquant一起使用才可以，后者是一个有损压缩工具。像这样：

1
2
3
4
5
6
7
8
9
const fs = require('fs');
const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

const PATH = './images/distributionBg.png';

imagemin([PATH], './build', {
  plugins: [imageminPngquant({quality: '90-100'})]
});

通过 {quality: '99-100’} 这样的配置，将图片压缩至 156 KB。肉眼的对比也会发现，有可以察觉的差别，但是并不影响图片质量。

相关的 pngquant 是一个命令行有损压缩（lossy compression）工具。可以通过 homebrew 进行安装：

1
$ brew install pngquant

ImageOptim

上面是一种自动化的方式，还找到了一个免费的 GUI 工具：ImageOptim。在这个程序的帮助页面，可以看到其优化原理：

ImageOptim 是这些应用程序的前端界面（GUI）：

  • Zopfli
  • OptiPNG
  • PNGCrush
  • AdvPNG
  • JpegOptim
  • JpegTran
  • MozJPEG
  • 及 PNGOUT
    ImageOptim 会运行它们，最后自动选择最小的文件。

对同一张图片的优化结果，ImageOptim 采用无损压缩，体积为 207 KB。

Zopfli

Zopfli 的介绍：

Zopfli is an encoder implementation of DEFLATE, a compression method commonly used in PNG format (among many other usages, e.g. ZIP, etc), designed to produce the likely smallest compressed output. Since it is a lossless transformation, a PNG file that is recompressed with Zopfli still retains all the pixels as expected.

需要自己编译：

1
2
3
4
$ git clone https://github.com/google/zopfli.git
$ cd zopfli
# 下面这样编译，得到的是 ZopfliPNG 二进制可执行文件
$ make zopflipng

编译完成之后，可以在本目录下生成可执行文件 zopflipng。

1
$ ./zopflipng images/bg.png build/bg_zopfli.png

当然，也可以把编译后的 zopflipng 程序设置为全局的命令，然后方便起见，可以使用短名称来软链接它：

1
2
3
# 在 zopfli 代码目录下
$ mv zopflipng /usr/local/bin
$ ls -s /usr/local/bin/zopflipng /usr/local/bin/zop

上面的软链接效果是可以在系统任意目录下使用 zop 来快捷运行 zopflipng 以压缩图片。

433 KB 的图片，可以被压缩到 207 KB。可知，在前面用 ImageOptim 进行压缩时，其选择了 Zopfli 的压缩结果。

阅读资料：

PNGOUT

没找到资源

OptiPNG

Mac OS X可以用 homebrew 安装：

1
$ brew install optipng

在最高压缩率情况下运行：

1
$ optipng -o7 ./images/bg.png -out build/bg-o7.png

可以将该图片由 432 KB 压缩至 240 KB。

一些阅读资料：

PS：node 如果要用，可以先安装并按照它的示例代码来运行（不过，我实际上没有运行成功）：

1
$ npm install --save imagemin-optipng

pngcrush

1
$ brew install pngcrush

可以像下面这样使用 pngcrush：

1
$ pngcrush -reduce -brute build/bg_crushed.png build/bg_crushed_2.png

一些阅读资料：

其他参考文章

Share