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

カテゴリー: パソコンのこと、ホームページのこと

タグ: GIF PNG アルファチャンネル透過度

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

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

JPEG形式
フルカラー表示が可能で写真などの色数が多い画像に適した形式で、透過ができない。
GIF形式
最大256色までの表示が可能でイラスト等の色数が少ない画像に適した形式で、透過ができる。

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

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

PNG形式の透過のメリット

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

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

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

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

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

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

背景が白の場合

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

背景が白以外の場合

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

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

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

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

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

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

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

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

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

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

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

ということなんです。

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

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

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

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

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

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

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら