IE6 でも見栄えを損ねない PNG を作

24bit アルファチャンネル PNG だけ使えれば幸せなんだけど、IE6 さんがいらっしゃるためにあれこれしなくてはならない。主な IE 6 対応方法がいくつあって

1. CSS の filter で DXImageTransform してアルファチャンネル PNG をDirectX で描画させる。子要素の position が relative でないとがクリックできなったりと副作用あり
2. ↑のことをよしなにやってくれる JS ライブラリを使う
3. IE6 でも見栄えを損ねない PNG を作れたらいいな

がある。ここでは最後のを解説する。

PNG に bKGD で背景色を指定する

IE6 のアルファチャンネルPNG は透過している箇所の色を灰色で表示してしまう。ここに PNG の bKGD チャンクを指定することで、灰色で無い色を指定できる。windows で簡単に bKGD チャンクを作るには、TweekPNG を使うと便利(Insert -> bKGD)。

これで背景灰色じゃなくて他の色ならまぁおｋ、という場合は問題が解決する。bKGD(背景色)チャンクを使ってアルファチャネルPNGの見栄えを改善するに詳しい解説が。

8bit アルファチャンネル PNG の作成

Photoshop などで 8bit PNG を書きしでは背景のみ透過な PNG が作られる。しかし色ごとに Alpha 値を持った 8bit PNG を作ることもできる。Fireworks の書き出しオプションでなどでやる方法もあるが、PNGNQを使うことで、24bit アルファチャンネルPNG を、アルファチャンネルを保持しつつ 8bit PNG への減色が可能である。PNGNQ は Windows/OSX のバイナリもあるらしいので、大抵のプラットフォームで動く。

debian ( sid ) なら apt にあったので

apt-get install pngnq
pngnq 24bitpng.png

みたいにすぐ作ることができる。

終わりに

さて、IE6 でも見栄えを損ねない PNG の作り方を紹介したが本当に見栄えが損ねないのか？という疑問がある。というわけで Firefox で 24bit アルファチャンネルpng / 24bit アルファチャンネルpng + bKGD (#FFFFFF) / 8bit アルファチャンネルpng をレンダリングさせてみた。

どれも綺麗に描画されている。さて IE6 は、というと…

というわけで、24bit なアルファチャンネルだと思った通りの灰色に、bKGD は場合によっては使えるかも、8bit アルファチャンネルはジャギりまくってこれは…、という結果に…。

x61 + vista + coLinux

無線LAN 有効にしてるとハングアップする。とインターネッツに5件ぐらい書いてあったのできっとみんな起こるはず。

一応 0.7.2/0.7.3 最新の開発スナップショット試したけどどれもハングアップするわ…。ううう。