Windows下批量转WebP的推荐方案

测试环境

Windows 10家庭中文版、PNGGauntletFileOptimizerSquooshpingoTinyPngXnConvert

压缩目标

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

开始测试

源文件转PNG

压缩软件 是否支持批量 压缩质量
FileOptimizer 一般
pingo 一般
Squoosh 非常好
PNGGauntlet 非常好
TinyPng 非常好
XnConvert 比较好

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

PNGGauntlet
超过了56%

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

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

源文件(PNG)/MB XnConvert/MB 压缩效率/%
215 27.1 87

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

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

测试结果
测试结果
源文件(PNG)/MB PNGGauntlet/MB XnConvert/MB 最后压缩效率/%
215 94.1 5.24 97

单独说说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。

本条目发布于。属于科技分类。作者是

关于有个狸

2005年开始的一名站长,从事网站策划、运营,早期一批扎根阿里妈妈、Google Adsense的一员,目前司职前端与产品设计。

发表回复