gulpでMozillaが開発したjpegエンコーダーの「mozjpeg」を使用する

gulpでMozillaが開発したjpegエンコーダーの「mozjpeg」を使用する

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

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

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

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

mozjpegとは

github mozjpeg

mozjpegのリポジトリ

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

新しい JPEG エンコーダ「mozjpeg」プロジェクトを開始します

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%に設定しています。

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

Categories
Tags
Yuji Tsukaguchi

塚口 祐司 / Yuji Tsukaguchi

1987年生まれ。Webデザイナー/エンジニア。DTP、動画配信・リッチコンテンツ制作、Web制作会社共同創業を経て、フリーランスとして独立。デザインからフロントエンドの実装、WordPressやMovableTypeなどのCMS構築まで一貫した制作を行う。著書にMdN社から発売の「Webサイトこれからどうなるの? キーワードから探る未来像」や「現場のプロが教えるWeb制作の最新常識」など。