コフス技術ブログ

ホームに戻る
Powered by
ホーム
備忘録

imagemin-mozjpegタスクでベースライン形式のJPEGが欲しい時はオプションで明示。ベースライン/プログレッシブの判定方法も

,,,

JPEG画像にはベースラインとプログレッシブ形式の2つの種類が存在しますが、昨今のWeb制作業界では圧縮率が高いプログレッシブ形式が使われることが多い気がします。

  • ベースライン：ファイルの読み込み時に上から徐々に読み込むタイプ
  • プログレッシブ：ファイルの読み込み時に低解像度→高解像度へ読み込むタイプ

圧縮ツールでもプログレッシブ変換がデフォルトでtureの場合も多いですよね。

私もこれまで特に意識せずプログレッシブタイプのJPEG画像を用いてきたと思いますが、案件によってはプログレッシブがあまりよろしく無い場合もあります。

というのもプログレッシブの場合読み込み時に最初低解像度の画像が表示されますが、その表示された低解像度画像が減色により見た目がよろしく無い印象を与える事がある為です。
勿論低解像度画像なんて一瞬しか表示されませんが、これがクライアントさん的には「なにこれ..色おかしいよね。ヤメて」となる場合もあるわけです。

ガラケーだから表示が出来ない云々では無く、見た目がアレだからベースラインにして欲しい、、Web制作をしているとそういう事もあるんですよね。

というわけで表題です。
JPEG画像をimagemin-mozjpeg圧縮タスクにてベースライン形式のまま圧縮する例のご紹介です。
**Gulp連携で自動圧縮時にベースラインのまま圧縮って出来たっけな？**となった時用の備忘録でもあります。

imagemin-mozjpegで明示的にプログレッシブ圧縮をOFFにする

既にGulp環境は整っている前提で画像圧縮タスクのみ切り取ってきました。様々な書き方があるでしょうが、大方こういった感じでimagemin-mozjpegにてJPEG圧縮する流れがスタンダードだと思います。（投稿日現在）

// Img compressed
gulp.task('img', () => {
  return gulp
    .src(input.img + '**/*.{png,jpg,gif,svg}')
    .pipe(
      plumber({
        errorHandler : err => {
          console.log(err.messageFormatted);
          this.emit('end');
        }
      })
    )
    .pipe(changed(output.img + '**/*.{png,jpg,gif,svg}')) //srcとdistを比較して異なるものだけ処理
    .pipe(
      imagemin([
        pngquant({
          quality : [0.5, 0.9],
          speed   : 1,
          floyd   : 0
        }),
        mozjpeg({
          quality     : 85,
          progressive : false // ここがfalseならベースライン。デフォルト値はture
        }),
        imagemin.svgo(),
        imagemin.optipng(),
        imagemin.gifsicle()
      ])
    )
    .pipe(gulp.dest(output.img));
});

ポイントはmozjpegのprogressiveをfalseにしている点。このオプションは省略する事も出来ますが、デフォルトでtrueなのでベースライン形式のJPEGを用意しても基本圧縮後にはプログレッシブ形式に変わってしまいます。
ですので明示的にfalseとし、元のベースライン形式のままを保つようにしてあげると解決です。

ちなみにベースラインとプログレッシブの判定は直でバイナリ確認で可能で、バイナリ以外だとrdjpgcomツールを用いてターミナルにて判定が出来ます。

macOSでrdjpgcomを用いてベースライン/プログレッシブ判定をする

rdjpgcomツールの入手は今回はmozjpegからしてみます。まずはbrewにてmozjpegをインストールします。

Terminal window
brew install mozjpeg

macOSの場合だと/usr/local/Cellar/mozjpegにインストールされるので、配下にある/usr/local/Cellar/mozjpeg/3.3.1_1/bin/rdjpgcomをターミナルにて開きます。

あとは判定したいJPEG画像を-verboseオプション付きで指定してあげればベースラインかプログレッシブか判定が可能です。

Terminal window
$ /usr/local/Cellar/mozjpeg/3.3.1_1/bin/rdjpgcom -verbose test.jpg
JPEG image is 5785w * 3857h, 3 color components, 8 bits per sample
JPEG process: Baseline

Baselineと表示されましたね。

前項にて紹介したimagemin-mozjpeg圧縮タスクのprogressiveをtrueにして圧縮したプログレッシブ形式のJPEG画像でも試してみます。

Terminal window
$ /usr/local/Cellar/mozjpeg/3.3.1_1/bin/rdjpgcom -verbose test2.jpg
JPEG image is 2732w * 1200h, 3 color components, 8 bits per sample
JPEG process: Progressive

Progressiveときちんと表示されました。

これで上記の方法でターミナルからも判定が可能になりましたね。大量の画像を判定する必要が出てきた場合はバッチ処理などを組んであげる等しても良さそうです。

ホームへ戻る