NEW IMAGE FORMAT 活用計画

bKGD(背景色)チャンクを使ってアルファチャネルPNGの見栄えを改善する

始めに...。

　Windows版 IE 4 以降及び、Netscape 4.04以降から、PNG画像を表示を出来るようになりましたが、 24BitアルファチャネルPNGは、背景がグレー(#e0e0e0)になってを自分のサイトの配色にマッチしないと嘆かれる人は結構いると思います。

　しかし、これらの半透明表示に対応しないブラウザも実は、内部的にアルファチャネルを把握しているのです。

　bKGD(背景色)チャンクを使用するとどのようなメリットが期待できるのか下の比較表をご覧ください。

bKGD(背景色)チャンク 使用比較表示 PNG画像 サンプル

24Bit + Alpha-Chanel PNG (7.57KB) 24Bit + Alpha-Chanel PNG +bKGD (7.59KB)

Windows版 IEでは、背景色がグレー(#e0e0e0)です。
alpha 24bit PNG image

Windows版 IEでは、背景色が白(#ffffff)です。
alpha 24bit PNG image (with bKGD)

8Bit Index-Palette Alpha-PNG (5.11KB) 8Bit Index-Palette Alpha-PNG +bKGD (5.11KB)

Windows版 IEでは、全部透明で見えません。
Index-Palette-deep 8bit png image

Windows版 IEでは、全部透明で見えません。
Index-Palette-deep 8bit png image (with bKGD)

PNGの構造(チャンク)を比較してみる

　IEでご覧になった方は、グレー色背景になるアルファチャネルPNGと、白色背景になるアルファチャネルPNGがご覧になれると思います。
　さて Jason Summers氏の TweakPNGで、PNG構造の比較を行います。

TweakPNGスクリーンショット bKGD(背景色)チャンク無し

screen shot by TweakPNG

TweakPNGスクリーンショット bKGD(背景色)チャンク有り

screen shot by TweakPNG with bKGD

　たった18バイトの増加量で背景色をマッチさせる事ができる様になりましたでしょう？

　これで、DIV要素による角丸テーブルもどきや、リンクメニュー背景などにアルファチャネルPNGを使っていて御困りだった方にとって、知っていたらお得な情報になるかもしれませんね？

　このページの情報に関するご意見、ご質問等がありましたら 掲示板までどうぞ。

履歴

初  版: 04.7.15

ブラウザテスト結果表

ブラウザ名バージョン結果/期待?実験済みか?
MS Internet Exploer(win)6.0 SP1パレットPNGは除いて bKGD(背景色)チャンクにオーバーレイする。o
5.5x
5.01
4.01o
Netscape (Win)7.1アルファ透過可能 。o
6.23
4.78bKGD(背景色)チャンクにオーバーレイする。
4.04
Mozilla (Win)1.7アルファ透過可能。
1.4.2
Opera (Win)6.05
7.02
7.23

サイトナビ

Valid XHTML 1.0!!