これからはホームページでPNG形式の画像を積極的に使います

私がホームページで使っている画像形式は主に以下の2つです。

上記に加えて、比較的新しい PNG形式 というのがあります。

PNG形式はフルカラー表示が可能で透過もできるという、JPEG形式とGIF形式の長所を持った画像形式です。

GIF形式が特定の背景色を使用する前提で透過画像を作成するのに対して、PNG形式ではアルファチャンネルと呼ばれる透過度を持たせる方法で透過画像を作成することができます。

この結果、背景色が変わったり背景画像が変わったりすると、GIF形式の画像は周辺部が見苦しくなってしまうことがよく起こります。

それに対して、PNG形式の画像を使うと、どのような背景色や背景画像でも周辺部をきれいに表示させることができます。

2つの画像形式でどのような違いが生じるのかを実際に見比べてみましょう。

以下の画像比較では、上がPNG形式、下がGIF形式の画像になっています。

GIF形式の画像は背景色を白にして透過画像を作成してあります。これに対して、PNG形式の画像はアルファチャンネルにより作成された透過画像です。

この場合はどちらの画像も同じようにきれいに見えます。

下のGIF形式の画像が見苦しくなってしまいましたが、上のPNG形式の画像は背景色になじんできれいに表示されています。

この場合も同様に、下のGIF形式の画像が見苦しくなってしまいましたが、上のPNG形式の画像は背景画像になじんできれいに表示されています。

スタイルシートを設定することにより、YouTube の動画にリンクバナーを重ねて表示するような使い方ができます。

この場合も同様に下のGIF形式の画像が見苦しくなってしまいます。

※Internet Explorer のバージョンが古いと、ボタンが表示されません。

ここまで見比べてくると、GIF形式よりもPNG形式の方が優れているように思えます。(実際にそうなんですが・・・)

私は今までPNG形式の画像の使用に消極的だったのですが、その理由は

Internet Explorer 6 以前のバージョンではPNG形式の画像が正しく表示されない場合がある

ということなんです。

例えば、影の部分をアルファチャンネルで透過にすると、Internet Explorer 6 では影の部分を表示しません。

その結果、以下のようなロゴを作ると、Internet Explorer 6 で表示したときに上のPNG形式の画像は真っ白になってしまい、ただの余白として見えてしまいます。

WindowsXP のサポートが終了したことにより、今後は Internet Explorer 6 でホームページを見る人がどんどん少なくなると予想されます。(今までもかなり少ないですけど・・・)

そんなこともあって、私はこれからPNG形式の画像を積極的に使うことにします。

ただし、Internet Explorer 6 の使用が完全にはなくならないので、上記のような最悪の使い方をしないように気をつけたいとは思いますが・・・。