Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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で暗くなる場合の対処法

sygnas
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away