軽いホームページを作るための画像の考え方
ホームページを開いたとき、画像が出てくるまで待たされて、途中で閉じてしまった経験はありませんか。ページの重さを決める大きな要素は、画像ファイルです。ステンシル絵本の素材を作ってきた経験から、画像を軽くするための基本を整理します。
文字だけのページは軽い、画像が入ると重くなる
テキストだけのページは、表示が速く、待たされてストレスを感じることも少なくなります。ところが、画像を何枚も並べると、その分だけ転送するデータが増え、ダイヤルアップ接続のような細い回線では、いつまでも読み込みが終わりません。画像を減らせばいい、というのではなく、必要な画像を、必要なだけ軽くして使うことが大切です。
三つの形式を使い分ける
GIF画像
GIFは、256色まで表示できる形式です。アイコンやボタンのように、色数の少ないイラストに向いています。背景を透明にしたり、パラパラ漫画のようなアニメーションを作ったりもできます。ただし、アニメーションGIFは静止画より情報量が多く、ファイルサイズも大きくなりがちです。また、作成に使うソフトのライセンスには気をつけましょう。
JPEG画像
JPEGは、フルカラーで表示できます。圧縮することでファイルサイズを小さくする仕組みで、写真や色数の多いイラストに向いています。画像処理ソフトの中には、圧縮のレベルを変えられるものがあるので、いくつか試して、見た目とサイズのバランスがよいところを探してください。圧縮を強くしすぎると、画質の劣化が目立ちます。
PNG画像
PNGも、フルカラーで表示できる形式です。GIFと同じ256色に減らした場合は、PNGのほうがわずかに小さくなることがあります。ただし、古いブラウザでは表示できないことや、透明の扱いが違うことがあるので、閲覧する人の環境を考えて選びましょう。
たとえば、写真をGIFにすると、表現できる色が減るだけでなく、同じ大きさでもGIFのほうがファイルサイズが大きくなる場合があります。用途によって使い分けることが、軽さと美しさの両方につながります。
見た目を小さくするなら、画像そのものを小さくする
画像を小さく表示したいとき、タグの中で幅と高さを小さく指定するだけの人がいます。しかし、それでは見た目が小さくなるだけで、転送されるファイルサイズは変わりません。小さく見えるのに、なかなか表示されない、という残念な結果になります。仕上がりもあまりきれいではありません。
表示したい大きさに、画像そのものを縮小してから使いましょう。デジタルカメラの大きな写真をそのまま使うと、最後まで見てもらえない可能性があります。画像処理ソフトがなくても、ウィンドウズのペイントで縮小できます。ただし、減色の方法や圧縮率を細かく決められないので、思ったとおりにならないこともあります。
キャッシュを味方にする
ブラウザには、キャッシュという仕組みがあります。以前に見たページの画像などが、パソコンの中にとっておかれ、同じ画像が必要になったときは、そこから読み込まれるので、表示が速くなります。
- ボタンや壁紙は、ページごとに違うものを作らず、同じ画像を使いまわす。
- 同じ画像は、同じ場所、同じ名前で保存する。
- ロゴや背景など、共通のパーツは、できるだけ少ない種類にまとめる。
こうしておけば、初めてサイトに来た人でも、二枚目のページからは画像が早く表示されるように感じるはずです。ただし、途中でキャッシュが消されてしまうと、また最初から読み込み直しになる点は、覚えておいてください。
まとめ
軽いページは、来てくれた人への思いやりです。画像の形式を選び、大きさを整え、同じものを使いまわす。これだけで、ページの表示はずっと快適になります。当サイトの「こだわりメモ」では、実際に見て比べられる実験のページも用意していました。作り手の方は、ぜひ参考にしてください。
作る前に確認したい三つの質問
- この画像は、本当にページに必要ですか。飾りだけの画像は、思い切って減らしましょう。
- いちばん小さくできる形式はどれですか。色数が少なければGIF、写真ならJPEGが目安です。
- 表示したい大きさの画像になっていますか。縮小はタグではなく、画像そのもので行いましょう。
この三つを確認するだけで、ほとんどのページは、ずっと軽くなります。
ページの読み込みを確かめる方法
作ったページは、必ず自分のパソコンとは違う環境で確かめましょう。友人や家族に見てもらうのもよい方法です。表示までにかかる時間、画像が出るまでの様子、レイアウトが崩れないかを、実際に体験してもらってください。