gulp压缩图片组件对比，gulp-imagemin，gulp-tinypng-nokey和gulp-smushit使用方式以及图片优化

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. 基本使用：

  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.2. 其他参数的使用

  var 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'));
  });
  

  3.3. 深度压缩图片png
  使用方式：确保本地已安装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）之后，再次在网上在线压缩工具手动上传压缩，将图片压缩更进一步优化。