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）之後，再次在網上線上壓縮工具手動上傳壓縮，将圖檔壓縮更進一步優化。