search
LoginSignup
19
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
19
Help us understand the problem. What are the problem?