透過画像とPNGの特徴

３．透過画像をつくろう

PNG(ピング)の特徴と他の画像形式

★基本編

★番外編

写真への適用例

このページの概要

Web用の透過画像は有償のGIF形式で作るのが現在一般的ですね。ところが、PNGという画像形式でも作れちゃうのです。それもフリーソフトを使って！
このコンテンツで説明するのは「アルファチャネル」という機能を使った方法です。
実際にサンプルを作成しながら体感して頂く前に、まずはPNG(ピング)形式についてもう少し説明しようと思います。

これはPNG規格Ver.1.0を元に作成しました。既に改版されていますが基本は一緒です。

【 Index 】

PNGの特徴とGIFとJPEG
アルファ・チャンネルについて
対応ブラウザの問題
透過PNG自己診断サンプル
アルファチャネル自己診断サンプル

PNGの特徴とGIFとJPEG

現在、ホームページで使われている画像形式は、JPEG(ジェーペグ)・GIF(ジフ)・PNG(ピング)が有ります。インターネット関連技術の標準化団体(W3C)は、ライセンスが必要なGIF（現在は不要）に変わるものとして、ライセンスフリーでGIFより優れた特徴をもつPNGを使うことを推奨しています。

【 PNGの特徴】

●フルカラー対応

GIFでは256色までしか対応していませんが、PNGはフルカラー対応です。
パレット色 ( Indexed-color )、グレースケール ( grayscale )、フルカラー ( truecolor ) をサポートしています。オプションとしてアルファチャネル(透過度）もサポートしています。

●GIFよりファイルサイズが小さくなる

下表はサンプル画像で比較した結果です(この差は画像によって異なります)。

画像ファイル	JPEG形式	PNG形式	GIF形式	BMP形式
8bit 256色 Vector バナー	16,864 Byte *1	6,455 Byte	11,768 Byte	29,158 Byte
24bit Ture Color 風景写真	30,951Byte	720,738Byte *2	109,470Byte *3	921,654 Byte

*1 : 色の境界がハッキリしている256色ではPNGが最も良好(GIFの約1/2)。一般的に圧縮率が高いと思われている、JPEGは不向きなのがわかる。加えて画質も劣化します
*2 ：色の境界がハッキリしていない写真などはJPEGが向いている。PNGはほとんど圧縮されておらず、不向きなのがわかる。
*3 ：ファイルサイズがPNGより小さいが、これはフルカラー非対応のため256色へ落ちているためで、画質は劣悪！

●PNGは画質の劣化が無い

JPEGは非可逆圧縮 (圧縮してファイルに保存する時画像が劣化し、元の画像に戻れない) のため、何度も上書き保存すると画質が劣化していきますが、PNGは可逆圧縮 (圧縮しても元の画像情報が保持される) のため画質は劣化しません。画質を劣化させたくないときは、写真でもJPEGでなく、あえてPNGを使うことも有ります。

●プログレッシブに対応

インターネットで有効な形式で、画像を徐々に鮮明に表示していく方法です。ページ全体を読み込むのにかかる時間がある意味早くなります。JPEGにも同様の機能があります。
フリーソフトの「 PictBear 」であれば、[表示]－[環境設定]－[画像フォーマット] の "インタレース形式で保存する"にチェックマークをつけることで可能です。

●ガンマ補正機能

ガンマ補正とは、モニターに表示された画像の全体的な明るさ（と色の彩度）を変えるものです。
ピクセル値（1つ1つの色ごとに割り当てられた数値）と表示される色の明暗度（実際の見え方）の間には非直線的な関係があるが、ガンマ補正を受けたディスプレイではそれが調整されているのです。
特に有名なのは、Windows とMAC の話で、一方で適正な色に合わせたつもりでも、もう一方でみると、全体が暗く見えたり、白っぽく見えたりしてしまいます。実際かなり違うので解ると思います。
この機能は、gAMAブロックにて、オリジナルのイメージを作った人が見たものと出来る限り同じ画像を再現するようにするための機能だそうです。実際のところは確認していないので解りません。

●アニメーションGIFに変わる機能が無い

GIF はひとつのファイルに複数のイメージを納めることを許可しています。GIF では複数イメージを応用して ( ループを回す ) モーション GIF(アニメーションGIF) を実現しています。
残念なことに、そうなのです。将来的にはオプション機能として拡張する可能性は有るようです。
ということで、別に MNG(ミング：PNGベースのアニメーション形式)が開発されている様ですが、ブラウザの対応が今ひとつで、世間一般に浸透するのはもう少しといったところみたいです。

アルファ・チャンネルについて

アルファチャンネルとはピクセルの透明度の量を現すものです（決して透明では有りません）。
さて、パソコンで画像を表示する場合、その画像は沢山の点(ピクセル）が集まったものです。そのピクセル毎に赤緑青(RGB)の情報(チャンネル)を持っています。PNGでは、そのRGBチャンネルに加えアルファチャンネルを持つことが出来ます。すなわち、ピクセルはRGBAの４つの情報をもつことが出来るのです。
これにより、透過画像や半透過画像の重ね合わせなどが出来るようになるのです。
アルファチャネルはRGBと同じように "0～255" の値を持つことが出来ます。
255では不透明となり、gとなります。その中間の値では半透明となります。

対応ブラウザの問題

さてさて、GIFよりも優れた特徴の有るPNGですが、困ったことにブラウザによっては正しく表示されません。特に古いブラウザでは、PNG自体表示できないものもあります。
Internet Exploler6でも完全に対応しておらず、場合によっては見苦しい状態になってしまいます。透過PNGに関しては、256色までで作成するのが現状最善に思えます。
Internet Exploler 5.0までは画像からのリンクも対応していないそうです。別な言い方をすると、「ボタンを画像にし、それをクリックしてもリンク先へジャンプしない」ということです。

ただ、最近のブラウザでは対応しているため、IEさえ対応すれば可能性が一気に広がると思えます。

透過PNG自己診断サンプル

さて、実際に自分のブラウザで透過PNGがどのように表示されるか確認してみてください。
サンプル画像②と③の背景が白ならOKですが、①と同じようにグレーの色が表示されていたなら、あなたのブラウザではアルファチャネルは表示できないということになります。
注）本当の意味でのアルファチャネルは透過だけでは無く半透過も有りますが省略しました。

透過PNG診断	①フルカラー通常PNG アルファチャネル無し	②フルカラー透過PNG アルファチャネル有り	③２５６色透過PNG アルファチャネル有り
自己診断用サンプル
IE 4.0(Win)	○	×	○
IE 6.0(Win)	○	×	○
Lunascape 1.4.1(≒IE)	○	×	○
NN 4.03以下	×	×	×
NN 4.04以上	○	？	？
NN 6.2	○	○	○
Opera 6.05	○	○	○
mozilla 1.72	○	○	○
Firefox 1.0	○	○	○