WordPress + Lightning のサイト制作・カスタマイズ・サポートを承ります

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

WordPress サイト開設スターターパック

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

私がホームページで使っている画像形式は主に以下の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 の使用が完全にはなくならないので、上記のような最悪の使い方をしないように気をつけたいとは思いますが・・・。

WordPress サイト制作・カスタマイズ・サポートを承ります

このブログを運営している、魚沼情報サービスの対馬です。ブログをご覧いただき、ありがとうございます。

弊社は、WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。

ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。

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

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

パソコンのことホームページのこと
シェアする
魚沼情報サービスをフォローする