imagemin-mozjpegタスクでベースライン形式のJPEGが欲しい時はオプションで明示。ベースライン/プログレッシブの判定方法も
JPEG画像にはベースラインとプログレッシブ形式の2つの種類が存在しますが、昨今のWeb制作業界では圧縮率が高いプログレッシブ形式が使われることが多い気がします。
- ベースライン:ファイルの読み込み時に上から徐々に読み込むタイプ
- プログレッシブ:ファイルの読み込み時に低解像度→高解像度へ読み込むタイプ
圧縮ツールでもプログレッシブ変換がデフォルトでture
の場合も多いですよね。
私もこれまで特に意識せずプログレッシブタイプのJPEG画像を用いてきたと思いますが、案件によってはプログレッシブがあまりよろしく無い場合もあります。
というのもプログレッシブの場合読み込み時に最初低解像度の画像が表示されますが、その表示された低解像度画像が減色により見た目がよろしく無い印象を与える事がある為です。
勿論低解像度画像なんて一瞬しか表示されませんが、これがクライアントさん的には「なにこれ..色おかしいよね。ヤメて」となる場合もあるわけです。
ガラケーだから表示が出来ない云々では無く、見た目がアレだからベースラインにして欲しい、、Web制作をしているとそういう事もあるんですよね。
というわけで表題です。
JPEG画像をimagemin-mozjpeg圧縮タスクにてベースライン形式のまま圧縮する例のご紹介です。
**Gulp連携で自動圧縮時にベースラインのまま圧縮って出来たっけな?**となった時用の備忘録でもあります。
imagemin-mozjpeg
で明示的にプログレッシブ圧縮をOFFにする
既にGulp環境は整っている前提で画像圧縮タスクのみ切り取ってきました。様々な書き方があるでしょうが、大方こういった感じでimagemin-mozjpeg
にてJPEG圧縮する流れがスタンダードだと思います。(投稿日現在)
ポイントはmozjpeg
のprogressive
をfalse
にしている点。このオプションは省略する事も出来ますが、デフォルトでtrue
なのでベースライン形式のJPEGを用意しても基本圧縮後にはプログレッシブ形式に変わってしまいます。
ですので明示的にfalse
とし、元のベースライン形式のままを保つようにしてあげると解決です。
ちなみにベースラインとプログレッシブの判定は直でバイナリ確認で可能で、バイナリ以外だとrdjpgcom
ツールを用いてターミナルにて判定が出来ます。
macOSでrdjpgcomを用いてベースライン/プログレッシブ判定をする
rdjpgcomツールの入手は今回はmozjpegからしてみます。まずはbrewにてmozjpeg
をインストールします。
macOSの場合だと/usr/local/Cellar/mozjpeg
にインストールされるので、配下にある/usr/local/Cellar/mozjpeg/3.3.1_1/bin/rdjpgcom
をターミナルにて開きます。
あとは判定したいJPEG画像を-verbose
オプション付きで指定してあげればベースラインかプログレッシブか判定が可能です。
Baselineと表示されましたね。
前項にて紹介したimagemin-mozjpeg
圧縮タスクのprogressive
をtrueにして圧縮したプログレッシブ形式のJPEG画像でも試してみます。
Progressiveときちんと表示されました。
これで上記の方法でターミナルからも判定が可能になりましたね。大量の画像を判定する必要が出てきた場合はバッチ処理などを組んであげる等しても良さそうです。