Yahoo! User Interface Blog

YSlow開発者であり高速Webサイト構築テクニック紹介者であるStoyan Stefanov氏による画像最適化解説シリーズの第4弾がImage Optimization, Part 4: Progressive JPEG…Hot or Not?として公開された。4回目となる今回は、JPEGにはベースラインを使うべきかプログレッシブを使うべきかをファイルサイズの観点から調査し提案する内容だ。

どのように画像を収集し、どういった処理をおこなって統計を取ったかはImage Optimization, Part 4: Progressive JPEG…Hot or Not?に詳しく説明されているため読んでみてほしい。Stoyan Stefanov氏の結論をまとめると次のようになる。

• JPEG画像のサイズが10KB未満である場合、ベースライン(通常のJPEG画像)として保存して使った方がいい。約75%の確率でより小さいファイルサイズになると期待できる
• 10KB以上である場合にはプログレッシブの方がいい。約94%の確率でより小さいファイルサイズになると期待できる
• 数バイトでもファイルサイズを小さくしたい場合はすべてのJPEGについてベースラインとプログレッシブを生成してファイルサイズを比較した方がいい

IEはプログレッシブ画像をプログレッシブには表示しない。画像データが揃ってから上から順に描画を実施する。このためベースラインもプログレッシブも同じように表示され、さきにデータが揃う分、ベースラインの方がプログレッシブよりも進捗的に描画されるという状況になる。プログレッシブに描画されることを期待してプログレッシブに変換してもIEではそうした効果は見込めないため、プログレッシブを採用する場合はその点には留意しておく必要がある。

画像変換ツールの使い方は第3段にまとまっているが、ベースラインとして最適化する方法とプログレッシブに変換する方法はImage Optimization, Part 4: Progressive JPEG…Hot or Not?にもまとまっている。抜粋すると次のとおり。

jpegtran -copy none -optimize source.jpg result.jpg
jpegtran(1)を使ってJPEGのハフマンテーブルを最適化する例 - Image Optimization, Part 4より抜粋

jpegtran -copy none -progressive source.jpg result.jpg
jpegtran(1)を使ってプログレッシブJPEGへ変換する例 - Image Optimization, Part 4より抜粋

jpegtran -copy none -optimize source.jpg result.jpg
ImageMagick convert(1)を使ってJPEGを最適化する例 - Image Optimization, Part 4より抜粋

jpegtran -copy none -progressive source.jpg result.jpg
ImageMagick convert(1)を使ってプログレッシブJPEGへ変換する例 - Image Optimization, Part 4より抜粋

ImageMagickは汎用的に使えるツールで便利だが、今回の変換についてはjpegtranの方が実行速度も高速で品質の低下もない。ImageMagickはデフォルトのままでは不可逆圧縮を実施するためファイルサイズはjpegtranよりも小さくなる傾向にあるが、逆に品質は劣化する傾向にある。状況に応じてツールを使い分けるとよさそうだ。

なお、JPEGをプログレッシブにするべきかどうかはユーザに対する印象という点でも検討する必要がある。FirefoxなどでプログレッシブJPEGを表示させると、すべてのデータが揃う前に内容を確認できるため特に通信帯域が細い場合にはすべてのデータをダウンロードする前に内容を確認して、不要なサイトであれば読み込みを中断できるという利点がある。しかしユーザに与える印象としてプログレッシブは古くさい技術だとみられる向きもあり、そうした点を含めて検討すべき余地がある。Stoyan Stefanov氏の連載の目的は画像品質を劣化させることなく画像サイズを小さくするところにあるためプログレッシブ画像の活用が推奨されているが、ユーザに対する印象を考えるなら、採用すべきかどうかはよく検討して方がよさそうだ。