Yahoo! User Interface Blog

YSlowの開発者であり高速にロードされるWebサイトを構築するためのテクニックを紹介しているStoyan Stefanov氏による画像最適化解説シリーズの第2段がImage Optimization Part 2: Selecting the Right File Formatとして公開された。第2回目となる今回はGIF、JPEG、PNG8、PNG24/PNG32について説明し、どの場合にどのフォーマットを選択すればいいかがまとめられている。

Stoyan Stefanov氏はそれぞれのフォーマットの特徴を次のように説明。

  • GIF: 256色、可逆圧縮、透過機能あり(ただし透過かそうでないかの2種類だけ)、アニメーション機能あり
  • JPEG: 何百万の色表現可能、非可逆圧縮、高い圧縮率、透過機能なし、アニメーション機能なし
  • PNG8: 256色、可逆圧縮、高い圧縮率、透過機能あり、アニメーション機能なし
  • PNG24/PNG32: 何百万の色表現可能、可逆圧縮、JPEGよりもサイズが増える、透過機能あり、アニメーション機能なし

IE6およびそれよりも前のIEにはPNG8、PNG24/32の透過機能に関して次の問題があることも説明されている。

  • PNG8の透過はGIFのブール透過のように透明かそうでないかに分けられてしまう。透過部分はすべて完全透過として表示される
  • PNG24/32の透過部分はすべてグレーとして表示される

こうした状況を加味し、次のように利用するケースをまとめている。

  • 写真データ: JPEG
  • アニメーション: GIF
  • それ以外すべて: PNG8

PNG8であれはIE6であっても最悪でGIFと同じ表現まで落ちるだけで済み、さらにファイルサイズをGIFよりも少なくできるうえ可逆圧縮で透過表示もできる。ほとんどの場合で推奨されるというわけだ。

PNG24/32はファイルサイズがJPEGよりも膨れ上がるため推奨されていない。もしPNG24/32が必要とされるケースでもPNG8に変換してクオリティが低下しないで済むか確認し、可能であればPNG8を使った方がいいとしている。もちろん画像の内容によるが、場合によって人は1,000色あっても200色であっても違いを認識できないものがあり、そういったケースではPNG8を使った方がいいというわけだ。

色数が256よりも多くしかも透過機能を使っている場合にはPNG24/32が唯一の選択肢となるわけだが、この場合はCSSとAlphaImageLoaderを使ってIE6やそれ以前のブラウザでも表示できるように処理を加える必要がある。こうした処理を実現するためのライブラリにはIE7.jsやIE PNG Fixなどがある。

Stoyan Stefanov氏はPNG24/32をWebサイトで使うことを避けるべきとしているが、中間形式として使うにはいいと説明している。JPEGは非可逆圧縮であるため画像編集のフォーマットにJPEGを使うと品質の低下を招きやすい。編集中はPNG24/32をフォーマットとして使い、アップする段階でJPEGにするという方法があるとしている。