初心者向けホームページ作成講座
フリーソフトでホームページを作ろう!
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
t-1.png(323 byte)

画像の使い回しとPNG形式

(更新日 08/11/24)

 画像の挿入とテクニックでは書ききれなかった事を書いてみようと思います。まず画像を使い回す事について。各ページにはできるだけ同じ画像を使ったデザインにする事で素早く表示する事ができます。その理由はウェブブラウザにはキャッシュという機能がありまして、一度表示した画像をローカル(つまり自分のパソコン内)に保存しておき、再びページを開く時に同じ画像であれば、ローカルに保存してある画像を表示する事ができるからです。

転送量の問題

 最近ではインターネットの高速化が進み少々大きなファイルサイズの画像であっても、表示速度に大した影響は無いのですが、サイト運営者は転送量にも気を配らなければなりません。何年か昔の事ですが、私は転送量の事をサーバーにアップロードしたファイルの合計容量だと勘違いしていまして、忍者さんの方から当時運営していたサイトの事で何度か警告を受けた事があります(^^; 

 さて転送量とは何なのかと言うと、サーバーの場合ファイルが呼び出された合計容量の事を指します。と言っても分かりにくいですよね。私も当時は理解できなかったんですが、要は100KBの画像をサイトに掲載してた場合、それを10人が見れば転送量は1MB(1000KB)になるという事です。言うまでも無く多くの人が見ているサイトはファイルサイズが小さくても転送量が多くなってしまいます。

 忍者さんに限らずどこのサーバーでも日ごと、または月別に許可する一定の転送量が決まってまして、人気サイトの運営者さんにとっては頭の痛い悩みでもあります。一般的なサイトであれば100KB程度の画像で心配する必要はないのですが、できるだけページのデザインなどに使う画像やアイコンは各ページごとに統一して使い回す事で、転送量を抑える事ができます。

 因みに私が警告を受けたのは、当時運営していたサイトが人気サイトだったからではなく、Flashや動画をページに掲載していたのが原因です。

これからの主流はPNG?

 現在ウェブサイトで主流となっている画像はJEPG(jpg)形式とGIF形式ですが、実写などの写真画像が圧倒的に圧縮率(つまりファイルサイズの大きさ)の高いJPEGの地位は揺るがないとして、GIFに取って代わりPNGが主流になっていく可能性が高くなっています。というのもPNGは色数の少ない画像であれば圧縮率はGIFと同等で、高度な透明度の情報を持つアルファチャンネルが使えます。

 GIFが1色しか透過できないのに対し、PNGは特定の部分を完全に透過したり他の部分を半透明にするなどが可能になっています。かなり前からPNGは存在していたのですが、なぜまだ主流になっていないかと言うとIE 6がPNGのアルファチャンネルに対応していないのが最大の理由だと思われます。では実例を下に掲載します。

star48.png(4025 byte)
star48.png(4025 byte)

 上は背景に黒と赤を指定したボックスを作って星マークの画像を入れたものです。画像はどちらも同じもので背景部分を透過しています。IE 7他、最新のウェブブラウザ(IE以外ならちょっと古くても)ならボックスの背景色に指定したどちらの色にもとけ込んで見える筈です。

gazou-1.png(12133 byte)

 さて、同じようにボックスに黒背景と赤背景を指定し、同じ画像を設置してIE 6で見た場合、どのように表示されるかは左のスクリーンショットになります。見ての通り背景の透過が全く反映されません。そしてこのIE 6系のユーザーは現在の所35%ほどいて(私調べ)、透過PNGに対応するウェブブラウザのユーザーがシェアを圧倒するにはまだまだ時間がかかりそうです。

 じゃあPNG画像は使えないかというと決してそんな事はなく、今の所は透過PNGの使用は避けた方がいいという事です。そして当サイトでも殆どの画像はPNGを使用しています。但し最適化していないとファイルサイズが大きくなるので、PNGを使用される場合は透過の面も含めてご注意下さい。

広告
t-2.png(196 byte)