imagemin-pngquantを利用して画像をロスレス圧縮する

前回の記事では、PNG画像圧縮にgulp-imagemin内で呼ばれているimagemin-optipngを利用しました。

今回は、更に圧縮率が高いimagemin-pngquantプラグインを利用して、圧縮率を比較してみました。

imagemin-pngquantプラグインの導入

・imagemin-pngquant導入

sudo npm install --save-dev imagemin-pngquant

・導入を確認

npm ls --depth=0

・プラグインはバージョンの違いなどで動作しないときがあります。 プラグインは以下のバージョンを利用しました。

├── gulp@3.9.1
├── gulp-imagemin@2.4.0
└── imagemin-pngquant@4.2.2

タスクを作成

以下のコードを記述しました。

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

gulp.task('imagemin', function(){
    gulp.src("images/*.png")
        .pipe(imagemin({
            use: [pngquant()]
        }))
        .pipe(gulp.dest("compressed_images"));
});

imageminに明示的にpngquant()を指定することで、imagemin-pngquantを利用することができます。 指定しない場合は、imagemin-optipngが利用されます。

また、imagemin-pngquantのオプションでは、 圧縮率より圧縮スピードを優先するものなどあり、調整ができます。 詳しくは公式サイトをご確認ください。

タスク実行と結果

imagemin-optipngとimagemin-pngquantを利用した場合の圧縮率を比較してみました。 画像によって圧縮率は変わりますが、この画像でのimagemin-pngquantの圧縮率高すぎですね。

・圧縮前(1.3MB)

・imagemin-optipng利用圧縮(1.2MB：saved 52.3 kB - 4.1%)

・imagemin-pngquant利用圧縮(448KB: saved 837.68 kB - 65.1%)

まとめ

imagemin-pngquantでの圧縮率の高さを確認することができました。
利用も簡単で画質もさほど落ちていないので、サイト利用時のパフォーマンスアップに有効だと思います。