Yahoo! User Interface Blog

YSlow開発者であり高速Webサイト構築テクニック紹介者であるStoyan Stefanov氏による画像最適化解説シリーズの第5弾Image Optimization, Part 5: AlphaImageLoaderとして公開された。5回目の今回はIE6で透過PNGを使うためのテクニックと提案がまとめられている。

結論からいえばIE6で透過PNGを表示できるようにするテクニックは可能な限り使わない方がいいということになる。IE6で透過PNGを表示させるようにするテクニックはパフォーマンスの低下を招く上にメモリの消費量を増やす。パフォーマンスやメモリ量を増やさない方法は標準規約にはない記述がさらに増えることになるのでお薦めできないとされている。

紹介されているテクニックは次のとおり。

  • CSS _filterプロパティでAlphaImageLoaderを使う
  • opacity filterを使う
  • VMLを使う

AlphaImageLoaderを使うのはIE6で透過PNGを表示させるためのもっとも有名な方法のひとつだが、処理速度が遅くなる上に大量のメモリを消費する。画像ごとにではなく要素ごとに適用されるため適用対象が増えればそれだけパフォーマンスも悪化しメモリ量も増えることになる。opacity filterはAlphaImageLoaderを使う場合ほど性能は悪くないものの、同じくらいメモリを消費する。

VMLを使う方法はパフォーマンスもまずまずだし消費メモリも少なくてすむ。IE6で実用的な方法を選ぶならVMLを使う方法がベストだが、標準規約ではなく要素やCSSを使うことになるためあまり推奨されていない。

結局のところSitePointで紹介されたような方法でPNG8の画像自身を加工してIE6でもそれほどひどくならないような画像を用意する方法がStoyan Stefanov氏のお薦めの方法ということだ。