gulp 图片压缩

项目中有压缩图片的需求,因此对 gulp 压缩图片的三种插件进行比较。下面这张图是未压缩的原图,后续的比较也是基于这六张图的压缩效果比较。

gulp-imagemin

gulp-imagemin 插件支持的图片类型比较多,常用的 JPGPNGSVG 均支持,不过压缩效果不是特别理想。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 已更新至版本 4.1.0
gulp.task('img:min', () => {
return gulp.src(imgDir)
.pipe(cache(imagemin([
imagemin.jpegtran({ progressive: true }),
imagemin.optipng({ optimizationLevel: 7 }),
imagemin.svgo({
plugins: [
{ removeViewBox: false },
{ cleanupIDs: false } //是否删除未使用的 ID 属性
]
})
], { verbose: true }
)))
.pipe(gulp.dest(`${targetDir}/img/imagemin`));
});

gulp-tinypng-compress

gulp-tinypng-compress 插件是 tinypng 推出的,压缩效果比较满意,但它需要申请官网的 key,且每个月只能免费压 500 张图。另外,这个插件只支持压缩 PNGJPG 格式的图片。

1
2
3
4
5
6
7
8
9
gulp.task('img:tiny', function () {
gulp.src(`${assetsDir}/img/*.{png,jpg}`)
.pipe(tinypng({
key: 'API_KEY',
sigFile: 'images/.tinypng-sigs',
log: true
}))
.pipe(gulp.dest(`${targetDir}/img`));
});

gulp-tinypng-nokey

补充一个不需要 key 的压缩插件,这个插件其实模拟的是官网上传压缩图片的流程,可以突破 500 张的限制。这个插件的压缩时间取决于网络环境。

1
2
3
4
5
gulp.task('img:tiny', () => {
return gulp.src(`${assetsDir}/img/*.{jpg,png}`)
.pipe(tinyPng())
.pipe(gulp.dest(`${targetDir}/img/tiny`));
});

gulp-imageisux

腾讯开发了一款专门用于图片压缩和格式转换的平台 — 智图,这款插件是基于其 API 接口封装的,压缩效果也比较满意。

1
2
3
4
5
6
var imageisux = require('gulp-imageisux');

gulp.task('img:isux', function() {
return gulp.src(`${assetsDir}/img/*.{jpg,png}`)
.pipe(imageisux('',true));
});

该插件已停止维护了,建议使用智图平台或工具进行压缩

总结

由于项目中的图片格式存在 JPGPNGSVG 三种,考虑到压缩效果,最终采取的是 gulp-imagemin 和 gulp-tinypng-compress(gulp-tinypng-nokey) 两个插件同时使用,前者主要用于压缩 SVG 格式图片,后者用于压缩 JPGPNG 图片。