PNG8でアルファチャンネルが使えることを最近知った件

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスを読んで、今ではPNG8がデフォルトですよ、みたいな内容が書いてあったのでPNG形式を敬遠してきた自分はたいそう驚きました。

写真にはJPEG、アニメーションにはGIF、その他すべてのものにはPNG（可能な限りPNG8）を使う

ということだそうです。

同書でも紹介されていたsitepointの記事、PNG8 – The Clear Winnerを読むと、「PNG8最高だよ！」みたいなことが書いてあります。要約（というか超訳）すると

• PNG8はGIFのような256色パレットベースのカラーモデルを持っている
• GIFのようにアニメーションはできない
• GIFのように一部の色を完全に透明にすることができる

しかしなんと、Fireworksを使えばアルファチャンネル付きのPNG8を書き出すことができる。少なくともバージョン3から実装されている。
アルファチャンネル付きで書き出した部分はIE6などの未対応ブラウザでは完全に透明なピクセルとして表示される。境目はジャギってしまうけど、そこまで見た目を損なうものではない。

なんと、Fireworksしかこのアルファチャンネル付き書き出しには対応していないそうです。しかもバージョン3からって・・・本当に目から鱗です・・・。
とりあえず実践してみようということでデモを作成しました。

デモ – PNG8 with Alpha Channel Test

はい、ドラゴンボールです。ドラゴンボールの影の部分がアルファチャンネル付きになっています。PNG8、PNG32、GIF、JPEGを比較のため、並べてみました。ちょっとサンプル画像の色数が多いため、ファイルサイズではJPEG（画質80）が最も軽くなっています。
特筆すべきはGIFと比べてファイルサイズが小さいこと。約20KBと約14KBなので、その差は歴然。
もっと色数が少なくていい画像ならそんなに違和感（グラデーション部分のガタガタ感とか）も出ないだろうし、PNG8の良さがもっと引き出せたのではないでしょうか。

ちなみにデモをIE6で見ると、以下のスクリーンショットのようになります。

ドロップシャドウ部分がまるまるなくなっています。PNG32（filterハックなし）の場合、透明部分がグレーになって表示されてしまうのはご存知の通りです。

透明度が必要なデザインの対応として、PNG32とfilterベースのハックを使って完全な表現を目指すのか、PNG8を使ってProgressive Enhancement的な制作を行うのか、というように選択肢が増える感じでしょうね。
filterプロパティを使った対応はその代償としてパフォーマンスを大幅に下げてしまいます。"ハイパフォーマンスWebサイト"を目指すのであれば、アルファチャンネル付きPNG8を使うという選択肢を検討してもいいかもしれません。