Transparency of PNG in WinIE

あるサイト構築途中に気づいた事。

PNG はもはやほぼ全ての browser で表示可能です（今思ったけど、ブラウザーのマーケットシェアってどうやってだしてるんだろうね？ IDG とかっどかのITコンサルかしらん？タダで見られる所って無いかなぁ？？）。しかし事実上の dominant browser の IE では、PNG の一番の売りである（と思われる）透過度（Alpha チャネル）をうまく処理する事が出来ません。そこで IE5.5 以降で Alpha チャネル付きの PNG を表示するために小細工をしました。

先に言ってしまうと、僕は普通に AlphaImageLoader を使いました。Block 要素に対して Style として IE 独自拡張の filter プロパティを当てます。詳しくは msdn を。


SOME_BLOCK_ELEM {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(Src='HOGEHOGE.PNG', SizingMethod='scale');
}


僕が　XHTML でレイヤー構造とか作るときは、たいてい上に載せる画像を別 div とかにするので、背景として CSS に書けば楽勝と思っていたのだけれど、うまく行かなかった。なぜだぁ！？

ハマったのは PNG のフォーマットのせいでした。手始めに PNG の format spce を。英語を読むのがメンドウな向きにはミケネコ研究所をお勧めしておきます。以上を読むと、PNG には大まかに言って３種類ある事になります。

• Gray Scale
• Index Color(8bit color = 256色)
• True Color(24bit color = 約1677万色)

libpng.org に則れば正確には Gray と True には Alpha チャネル付きのモノが別項目としてあがってますから、５種類でもいいんですが… Anyway, 注目すべきは W3C の Recommendation Paper に於いて、alpha チャネル付き　PNG は Gray と True color (PNG-24) でしか規定されていない、と言う事です。

僕はまだ富豪的 Web デザイナではないので、いまだにファイルサイズは小さければいいと思っています。ので、PNG も出来れば PNG-8 で済まして 数バイト単位でも小さいものを作成しています。今回のサイト制作では、ドロップシャドウの効果を得るためどうしてもその影の部分に Alpha チャネルを使いたいと思っていました。

ところで Web graphics の制作は基本的に Macromedia Fireworks MX (not MX 2004) をレイアウトに使っています。詳しくは省略しますが、いい加減に作れるのが気に入っています。ただ、より綺麗な減色 Gradation を作りたいときは Adobe Photoshop CS を使ったりしていました。その時に気がついていたのですが、Fireworks だと PNG-8 を使っても alpha チャネル設定のある色を Index カラーとして制作できますが、Photoshop だと出来ません。正確には Photoshop で PNG-8 を生成する時、Index palette に存在する単/多色を透過度 100 % の色として“抜く”ことは出来ますが、透過度 50 % の黒、といった alpha チャネル情報を作成できなかったのです。

まぁファイルサイズが小さい方が“善”だろうと思って今回全ての透過色を含む image ファイルを Fireworks で PNG-8 として作ってきましたが、それでは AlphaImageLoader ではうまく表示されないんですね！！！Macromedia の独自拡張なんでしょうか…

と言うわけで、結論。PNG で Alpha チャネル付き画像を作るときは PNG-24 にしましょう。PNG-8 では Transparent Index Color としてしか設定できません。

参照:
Behavior を使ったやり方？