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

原始图片的体积是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.

好像得自己编译(当然,也可以把编译后的 zopflipng 程序设置为全局的命令):

1
2
3
$ git clone https://github.com/google/zopfli.git
$ cd zopfli
$ make zopflipng

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

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

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