Gulpでpngquantを使ってPNGの減色＆軽量化

gulp + gulp-imagemin + imagemin-pngquant の組み合わせ

gulp-imagemin だけでは PNG がいまいち小さくならない。メタ情報を削除するだけで減色はしていないようです。

というわけで ImageAlphaなどでも使われている pngquant をgulpでも使っちゃう便利モジュールが imagemin-pngquant です。名前からわかるように gulp-imagemin と組み合わせて使います。

※この記事はすでに gulp を使っている人を対象としています。

インストール

npm install -g gulp-imagemin
npm install -g imagemin-pngquant

いろんなプロジェクトで使うのでグローバルインストールしちゃってます。

gulpfile.js の書き方

var path = {
  module : '/usr/local/lib/node_modules/',
  src : "",
  dist : "../"
}
var image_src = path.src + 'img/*.{png,jpg,gif,svg}';
var image_dist = path.src + 'img/optimize/';

var imagemin = require(path.module + 'gulp-imagemin');
var pngquant = require(path.module + 'imagemin-pngquant');

gulp.task("imagemin", function(){
    gulp.src( image_src )
    .pipe(imagemin(
        [pngquant({quality: '40-70', speed: 1})]
    ))
    .pipe(gulp.dest( image_dist ));
});

動かない書き方

実は imagemin-pngquant を使うまですごい悩みました。というのも gulp-imagemin の構文が古い（？）情報ばかりだったのです。

検索して出てくる情報では下記のように「use」を使っていますが、 2016.10現在のバージョンでは動きませんでした。

gulp.task("imagemin", function(){
    gulp.src( image_src )
    .pipe(imagemin({
        use:[pngquant({quality: '40-70', speed: 1})]
    }))
    .pipe(gulp.dest( image_dist ));
});

pngquant は余計なガンマ情報を付加する

pngquant で減色するとなぜか画像が暗くなることがあります。原因は pngquant が余計なガンマ情報を付加するからだそうです。

最後にもう一度 gulp-imagemin を実行することでその情報を削除できます。それを反映させたものが下記のコードになります。

var path = {
  module : '/usr/local/lib/node_modules/',
  src : "",
  dist : "../"
}
var image_src = path.src + 'img/*.{png,jpg,gif,svg}';
var image_dist = path.src + 'img/optimize/';

var imagemin = require(path.module + 'gulp-imagemin');
var pngquant = require(path.module + 'imagemin-pngquant');

gulp.task("imagemin", function(){
    gulp.src( image_src )
    .pipe(imagemin(
        [pngquant({quality: '65-80', speed: 1})]
    ))
    .pipe(imagemin()) // ←追加
    .pipe(gulp.dest( image_dist ));
});

参考：【Gulp】pngquantで圧縮した画像がMacで暗くなる場合の対処法