SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。

• GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある
• JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている
• PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現でき、24ビットイメージも表現できる

ロゴデータと写真データをそれぞれのフォーマットで表現した場合の例を紹介してから、次のように簡単な指針を紹介している。

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

GIF、JPEG、PNGのどの画像フォーマットを使うべきかという話は、Yahoo!のエンジニアでありYSlowの開発者であるStoyan Stefanov氏が5回に渡ってまとめた文書も参考になる。フォーマット以外のテクニックやブラウザの対応状況を加味して内容がまとまっている。

1. 画像を最適化してページ表示速度を高速化す る方法を知りたいなら
2. 最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に
3. Stefanov氏、画像サイズを縮小化する4つの手順を紹介 - 画質劣化一切なし
4. JPEGをプログレッシブにするかどうかの分か れ目は10KB
5. AlphaImageLoaderで透過PNGは重い、PNG8工夫で対処が適切

Yahoo!ニュースはPNG8への移行を実施しており、Stoyan Stefanov氏の連載が公開された当初よりも、PNG8の活用の幅は広がっているようにみえる。また、画像データそのものをより圧縮が効きやすいものへ最適化するテクニックがSmashing Magazineにおいて紹介されている。

• さらに進んだJPEG圧縮を実現する方法
• PNG最適化テクニック

IEはシェアを落とし続けているとはいえ、Net Applicationsの調査によれば2009年7月はIE6のシェアが27.21%とカウントされ、バージョン別にみた場合で最大シェアのブラウザに返り咲いている。PNGを使う場合には、IE6でも表示されるようになんらかの対処が必要になる。

• JavaScriptを使わないでIE6で透過PNGを使う方法
• IE6 透過PNG表示、IE PNG Fix 2登場
• IE6フレンドリーなPNGを作る方法
• IE7.js登場 - IEのCSS/HTML非準拠はこれで対応

また画像を選択するのとは異なるが、一枚の画像にまとめることでHTTPリクエストの回数を削減し、ページの読み込む速度を高速化させるCSS Spriteというテクニックも有効。

• 1枚の画像を切り出すテクニックCSS Sprite、便利ツール登場
• 画像結合/CSS切出で転送量&HTTPリクエスト削減 - CSS Sprite Generator 2
• ソースコード登場、CSSで画像分割 "CSS Sprite Generator"
• 画像のHTTPリクエストをCSSを使って軽減�する"CSS Sprite Generator"