DD_belatedPNG: better PNG background-image support in IE6

YSlow開発者であり高速Webサイト構築テクニック紹介者であるStoyan Stefanov氏はこれまで5回に渡って画像最適化方法を紹介してきた。簡単に要約すると写真にはJPEGを使いそれ以外にはPNG8を使う、適切な画像処理ツールを使って画像データの最適化を行う方法がお薦めということになる。

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

問題視されるのはIE6だ。シェアを落とし続けているとはいえ、Firefoxの合計シェアに匹敵する20%ほどのシェアを誇っている。IE6は透過データを含んだPNGを正しく描画できない。Stoyan Stefanov氏はこの問題を回避する方法としてAlphaImageLoaderを使う方法もあるが、描画性能が悪いためPNG8を工夫することで対処した方がいいと説明している。

そこで最近登場したDrew Diller氏のDD_belatedPNGに注目したい。10日に最初のバージョンが公開されてから数日おきにアップデートが繰り返し実施されている。DD_belatedPNGはIE6で透過データを含んだPNGを表示できるようにしたり、透過データを含んだPNG24をbackground-imageに指定できるようにするためのフレームワーク。Stoyan Stefanov氏は画像最適化シリーズ第5弾で、推奨できないがIE6ではVMLを使うとパフォーマンスもまずまずだし消費メモリも少ないまま透過データを含んだPNGが使えるようになると説明している。DD_belatedPNGはVMLを活用している。

PNG8画像を工夫することでIE6でもそれなりに見える画像を作ることは可能だが、その編集作業をサポートしたアプリケーションが少ないことや、完璧なサポートにはならないという問題がある。作業の手間を考えると、PNG8は通常どおり作成し、IE6に対してはDD_belatedPNGを使って処理するというのは現実的な選択肢だ。