测试环境

Windows 10家庭中文版、PNGGauntlet、FileOptimizer、Squoosh、pingo、TinyPng、XnConvert。

压缩目标

需源文件290个的PNG图片总计215MB进行压缩，压缩的目标为至少肉眼不太容易看出失真，如渐变、纹理、阴影等保存完好。

开始测试

源文件转PNG

PNGGauntlet、TinyPng压缩png效率非常高，215MB压缩后仅为94.1MB，超过了56%。

超过了56%

这里我们需要的是png转WebP，并且要批量，最后剩下PNGGauntlet、TinyPng、XnConvert，而TinyPng为线上工具，不是桌面端，直接排除掉。

源文件(PNG) -> XnConvert -> WebP

源文件(PNG) -> PNGGauntlet -> XnConvert -> WebP

先把源文件png压缩后，再用XnConvert 转为 WebP，测试结果：

测试结果

单独说说Squoosh

Squoosh虽然是在线工具，不过我们可以利用gulp来实现监听文件变化，实时将图片转为WebP格式，并且可以同时转为多种格式的图片，需要用到gulp-libsquoosh，应用实例：

const changed = require('gulp-changed')
const del = require('del')
const gulp = require('gulp')
const squoosh = require('gulp-libsquoosh')

var paths = {
  images: {
    src: 'src/images/**',
    dest: 'dist/images/'
  }
};

/* Not all tasks need to use streams, a gulpfile is just another node program
 * and you can use all packages available on npm, but it must return either a
 * Promise, a Stream or take a callback and call it
 */
function clean() {
  // You can use multiple globbing patterns as you would with `gulp.src`,
  // for example if you are using del 2.0 or above, return its promise
  return del(['dist']);
}

/*
 * Define our tasks using plain functions
 */
function images() {
  return gulp.src(paths.images.src)
    .pipe(changed(paths.images.dest))
    .pipe(squoosh(
      {
        encodeOptions: {
          webp: {
            quality: 75,
          }
        }
    }))
    .pipe(gulp.dest(paths.images.dest));
}

function watch() {
  gulp.watch(paths.images.src, images);
}

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp.series(images, gulp.parallel(images, watch));

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.clean = clean;
exports.images = images;
exports.watch = watch;
exports.build = build;
/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports.default = build;

运行

gulp

就可以将src/images中的图片，编译为WebP到dist/images下面。

注：在测试过程中发现nodejs有内存溢出的情况，建议使用较高版本的nodejs。

总结

PNG压缩PNGGauntlet、TinyPng、Squoosh优势明显，若转为WebP，最好先压缩png后再用XnConvert处理。如果要实时处理，推荐gulp-libsquoosh。