Thomas Fuchs, author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus.

Webサイトを構築する際に悩むことのひとつに、画像フォーマットに何を採用するか、というものがある。だいたい候補はJPEG、GIF、PNG8、PNG24といったところになる。以前、Jennifer Farley氏がこれまでのスキルをまとめたところでは、次の指針で選択すればいいことになる。

• 写真データに使うならJPEG
• ロゴやフラットカラーなイメージに使うならGIFかPNG8
• 影効果や炎のような効果を使う画像ではPNG24

JPEGに関してはさらに、ベースラインを使うべきかプログレッシブにするべきかという判断も求められる。この判断についてはStoyan Stefanov氏がまとめた次の指針がわかりやすい。

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

ただし、JPEGでプログレッシブを採用するかどうかは次の点も考慮する必要がある。

• プログレッシブJPEGはユーザから古臭い技術だと判断される可能性がある。
• プログレッシブ画像でもプログレッシブにレンダリングしないブラウザもある。

これに、さらに新しいルールが追加されることになりそうだ。Optimizing images for hardware-acceleration on the iPhone and iPadでThomas Fuchs氏が伝えているところによれば、iPadやiPhoneでは、H/Wアクセラレーションを有効にしたCSSトランスフォームで大きなサイズのプログレッシブJPEGイメージを使っていると、パフォーマンス上の問題を引き起こすことがあるという。そういった場合はベースラインへ変換した方がいいとし、プログレッシブからベースラインへ変換するための次のコマンドを紹介している。変換に使われているツールはImageMagick。

convert target.jpg -interlace none target-baseline.jpg

Thomas Fuchs氏は、H/Wアクセラレーションを使わないのであればJPEGはプログレッシブにしておいた方がいいだろうとも指摘している。この手のテクニックは、新しく登場するブラウザやブラウザのアップデート、新しいデバイスの登場などの影響を受けて随時変っていく傾向がある。