Mozilla製で高画質のJPEGエンコーダー「mozjpeg」をgulpに組み込んで、画像圧縮作業の効率化を行います。

画像圧縮ソフトは、JPEGminiとかImageOptim、PNGGauntlet、SVGならSpritebotなど画像の画質を落とさずにサイズを落とすことができるGUIツールがあります。ただ、Photoshopなどで書き出した後、アプリケーションを立ち上げて、それをドラック&ドロップ…の繰り返しは面倒です。

圧縮は納品前に行う事が多いので、それであれば、gulpでpublic生成する際に同時に画像圧縮をすればいいのではないかと。そして、どうせやるなら、劣化せずにサイズが落とせる高品質なエンコーダーがいい！ということで今回はmozjpegをいれてみました。

ちなみにGoogle製のJPEGエンコーダー「guetzli」もありますが、これはまた別の機会に試してみます。

mozjpegとは

Mozillaが始めたプロジェクトで、JPEG画像に使われていたエンコーダーとの互換性を維持しながら、高圧縮かつ高品質なJPEGエンコーダーを提供することによって、Web全体のトラフィック負荷を軽減させることを目的に開発されています。

2017年12月現在、v3.2がリリースされています。

gulpでmozjpegを使う

mozjpegはエンコーダーなので、画像の圧縮自体の処理は「gulp-imagemin」を使います。このモジュールは、JPEG、PNG、GIF、SVGをロスレス軽量することができる優れものです。 標準のエンコーダーでは、JPEGはjpegtranが適応されていますが、gulpでオプション指定することによって別のエンコーダーも適応できます。

gulp-imageminのインストール

gulpのプロジェクト以下で下記を実行します。

# yarn
$ yarn add gulp-imagemin -D
or
# npm
$ npm install gulp-imagemin --save-dev

jpgだけ対象にタスク走らせるなら下記のような感じ。

const imagemin = require('gulp-imagemin');

gulp.task('imagemin', () => {
  return gulp.src(`./img/**/*.jpg`, { base: './img/' })
    .pipe(imagemin())
    .pipe(gulp.dest('./img/'));
});

mozjpegをインストールする

imageminのプラグインとして、imagemin-mozjpegをインストールします。

$ yarn add imagemin-mozjpeg -D
or
$ npm install imagemin-mozjpeg --save-dev

これをgulpのタスクに組み込むと以下のような形

const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');

gulp.task('imagemin', () => {
  return gulp.src(`./img/**/*.jpg`, { base: './img/' })
    .pipe(imagemin([
      mozjpeg({
        quality: 80,
      }),
    ]))
    .pipe(gulp.dest('./img/'));
});

品質を80%に設定しています。

実際にどのくらい画像に変化あるかに関しては、ぱくたそ公式ブログで実際に写真素材を利用して検証しますので結果はまた追記します。