1.网页性能优化,通常要处理图片,尤其图片量大的时候,更需要工具来批量处理
2.在实际工程中,借助自动化工具可以很方便地实现图片的压缩,本文主要介绍gulp下图片的压缩方法。
1.基本使用方式对比
gulp-imagemin
1.功能:压缩图片
2.支持的图片格式:png,jpg,svg和gif
3.使用方式:
- 本地安装:
npm install gulp-imagemin --save-dev
- 说明:–save-dev 保存配置信息至 package.json 的 devDependencies 节点
- 配置gulpfile.js:
3.1. 基本使用:
3.2. 其他参数的使用var gulp = require('gulp'), // 确保安装gulp并引入gulp imagemin = require('gulp-imagemin'); gulp.task('testImagemin', function () { gulp.src('src/img/*.*') .pipe(imagemin()) .pipe(gulp.dest('dist/img')); });
3.3. 深度压缩图片pngvar gulp = require('gulp'), imagemin = require('gulp-imagemin'); gulp.task('testImagemin', function () { gulp.src('src/img/*.*') .pipe(imagemin({ optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等 级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化 })) .pipe(gulp.dest('dist/img')); });
使用方式:确保本地已安装imagemin-pngquant
npm install imagemin-pngquant --save-dev
var gulp = require('gulp'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'); gulp.task('testImagemin', function () { gulp.src('src/img/*.*') .pipe(imagemin({ progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件 })) .pipe(gulp.dest('dist/img')); });
gulp-smushit
1.功能:压缩图片
2.支持的图片格式:png,jpg
3.使用方式:
- 本地安装:
npm install gulp-smushit --save-dev
- 说明:–save-dev 保存配置信息至 package.json 的 devDependencies 节点
- 配置gulpfile.js:
3.1. 基本使用:
var gulp = require('gulp');
var smushit = require('gulp-smushit');
gulp.task('smushit', function () {
return gulp.src('src/*')
.pipe(smushit())
.pipe(gulp.dest('smushit-dist'));
});
gulp-tinypng-nokey
1.功能:压缩图片
2.原理:模拟用户上传和下载的行为(需要联网),来得到压缩图片,突破使用官网api每月500张的限制,可以不用key。
3.支持的图片格式:png,jpg
4.使用方式:
- 本地安装:
npm install gulp-tinypng-nokey --save-dev
- 说明:–save-dev 保存配置信息至 package.json 的 devDependencies 节点
- 配置gulpfile.js:
4.1. 基本使用:
var gulp = require('gulp');
var tiny = require('gulp-tinypng-nokey');
gulp.task('tinypng', function(cb) {
gulp.src('src/img/*.*')
.pipe(tiny())
.pipe(gulp.dest('dist'));
});
2.图片优化对比
此处,选取2张gif,2张jpg和4张png图片进行试验:
图片优化1(gulp-imagemin),结果如下:
图片优化2(gulp-smushit)
图片优化3(gulp-tinypng-nokey)
总结
组件名称 | 组件功能 | 图片压缩比例 | 优势 | 劣势 |
---|---|---|---|---|
gulp-imagemin | 压缩png、jpg、gif和svg | 各种格式压缩比例大概在10%-20%,有些小图有时不能压缩 | 可以压缩的常用格式多,结合imagemin-pngquant 可以提升总体压缩比 | 总体压缩比例适中,压缩速度快 |
gulp-smushit | 压缩png,jpg | jpg压缩比在10%-20%, png50%以上但不稳定 | png压缩比例高 | 不能压缩gif,且压缩速度慢 |
gulp-tinypng-nokey | 压缩png,jpg | jpg压缩比在10%-20%, png50%以上 | png压缩比例高,并且没有限制张数 | 不能压缩gif,压缩过程整体速度取决于网速,慢 |
综上,
1.tingpng-nokey的优势大,但不能压缩gif,并且限制于网速,所以若在网速无压力的情况下,可以根据具体情况配合使用。
2.gulp-smushit 虽然不限制于网速,但压缩速度慢,且压缩情况不稳定,一般不考虑选取使用。
3.从整体来看,优先使用gulp-imagemin
,因为稳定,压缩速度快,支持的图片格式多。
4.多次实践来看,由于图片的选取不同,即使是相同格式的图片,例如gif格式,有些gif图,gulp-imagemin对其压缩效果一般,甚至无效果,但一般情况下,对于gif的压缩还是有效的。
5.所以想更追求图片的压缩效果,当gif的图片少时,可以在使用gulp等构建工具压缩(优先使用gulp-imagemin)之后,再次在网上在线压缩工具手动上传压缩,将图片压缩更进一步优化。