测试环境
Windows 10家庭中文版、PNGGauntlet、FileOptimizer、Squoosh、pingo、TinyPng、XnConvert。
压缩目标
需源文件290个的PNG图片总计215MB进行压缩,压缩的目标为至少肉眼不太容易看出失真,如渐变、纹理、阴影等保存完好。
开始测试
源文件转PNG
压缩软件 | 是否支持批量 | 压缩质量 |
---|---|---|
FileOptimizer | 是 | 一般 |
pingo | 是 | 一般 |
Squoosh | 否 | 非常好 |
PNGGauntlet | 是 | 非常好 |
TinyPng | 是 | 非常好 |
XnConvert | 是 | 比较好 |
PNGGauntlet、TinyPng压缩png效率非常高,215MB压缩后仅为94.1MB,超过了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。