之前文章已經提到，圖片的壓縮處理可以很大程度提高網頁性能。在實際工程中，借助自動化工具可以很方便地實現圖片的壓縮，本文主要介紹gulp工作流下圖片的壓縮方法。

準備工作

使用gulp進行圖片壓縮首先要尋找合適的插件，本文主要介紹兩種：

• gulp-imagemin
• gulp-smushit

然后再工作目錄下創建兩個文件夾，分別保存原始圖片和壓縮后的圖片，原始圖片如下：

圖 | Taipei.jpg, 3456 x 2304 ~ 1.2MB

Taipei.jpg, 3456 x 2304 ~ 1.2MB

圖 | winkpax.png, 1372 x 1178 ~ 1.5MB

winkpax.png, 1372 x 1178 ~ 1.5MB

gulp-imagemin

這個插件可以用來壓縮PNG, JPEG, GIF和SVG圖片

優勢：

• 有很多定制選項
• 可以引入更多第三方優化插件，例如pngquant (見下面例子)
• 可以處理多種圖片格式

劣勢：

• 沒有verbose輸出選項

Demo

gulpfile.js （包含pngquant）

var gulp = require('gulp');
var imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');

gulp.task('imagemin', function () {
    return gulp.src('src/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()]
        }))
        .pipe(gulp.dest('imagemin-dist'));
});

輸出結果如下，可以看到圖片體積減小了57.6KB (2.2%)

[10:37:25] Using gulpfile ~/Desktop/Work/Practice/gulp-compressor/gulpfile.js
[10:37:25] Starting 'imagemin'...
[10:37:39] gulp-imagemin: Minified 2 images (saved 57.6 kB - 2.2%)
[10:37:39] Finished 'imagemin' after 14 s

gulp-imagemin

Smushit是Yahoo開發的一款用來優化PNG和JPG的插件，它的原理是移除圖片文件中不必要的數據。這是一個無損壓縮工具，這意味著優化不會改變圖片的顯示效果和質量。

優勢：易配置

劣勢：只能處理JPG和PNG

Demo

gulpfile.js

var gulp = require('gulp');
var smushit = require('gulp-smushit');

gulp.task('smushit', function () {
    return gulp.src('src/*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('smushit-dist'));
});

輸出結果：

[10:48:26] Using gulpfile ~/Desktop/Work/Practice/gulp-compressor/gulpfile.js
[10:48:26] Starting 'smushit'...
[10:50:31] /Users/fengyu/Desktop/Work/Practice/gulp-compressor/src/IMG_3881.jpg
[10:50:31] gulp-smushit: Compress rate % 0
[10:50:31] gulp-smushit: 1188874 bytes  to   1188223 bytes
[10:51:09] /Users/fengyu/Desktop/Work/Practice/gulp-compressor/src/winkpax@2x.png
[10:51:09] gulp-smushit: Compress rate % 69
[10:51:09] gulp-smushit: 1458533 bytes  to   446429 bytes
[10:51:09] Finished 'smushit' after 2.7 min

這個例子可以看出smushit對PNG圖片具有更好的壓縮效果，壓縮率高達69%，而且壓縮前后圖片質量沒有明顯的改變（如下圖），這足以說明圖片壓縮的必要性。

圖 | 壓縮前 ~1.5MB

壓縮前 ~1.5MB

圖 | 壓縮后 ~446KB

壓縮后 ~ 446KB

總結

可以看到不同插件對于不同的圖片格式的壓縮效果不盡相同，實際工程中應當嘗試多種插件，找到最優的圖片壓縮方案。

參考資料：

diezjietal's blog