<< サポートが終了した Windo... ツイッターのプロフィール画面の... >>

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

ホームページで使用される主な画像形式


私がホームページで使っている画像形式は主に以下の2つです。
  1. JPEG形式
    フルカラー表示が可能で写真などの色数が多い画像に適した形式で、透過ができない。
  2. GIF形式
    最大256色までの表示が可能でイラスト等の色数が少ない画像に適した形式で、透過ができる。

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

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

PNG形式の透過のメリット


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

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

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

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

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

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

背景が白の場合


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

PNG形式のバナー画像
GIF形式のバナー画像



背景が白以外の場合


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

PNG形式のバナー画像
GIF形式のバナー画像



背景に画像を使用した場合


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

PNG形式のバナー画像
GIF形式のバナー画像



YouTube 動画にボタンを重ねて表示した場合


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

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


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

PNG形式を使用する際の注意点


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

私は今までPNG形式の画像の使用に消極的だったのですが、その理由は
Internet Explorer 6 以前のバージョンではPNG形式の画像が正しく表示されない場合がある
ということなんです。

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

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

PNG形式のロゴ画像
GIF形式のロゴ画像



WindowsXP のサポート終了で状況は変わるでしょう


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

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

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

by pc_klik | 2014-04-26 15:00 | パソコンのこと・あれこれ

<< サポートが終了した Windo... ツイッターのプロフィール画面の... >>

魚沼情報サービスのホームページへ | パソコン教室くりっくのホームページへ | ブログトップ   昨日:   今日:   合計:
AX