ホーム»こだわりメモ 重いページのダイエット作戦

こだわりメモ 重いページのダイエット作戦

GIF・JPEG・PNGの使い分け、画像の縮小、キャッシュの活用など、ページを軽くするための画像の考え方を実験つきで解説します。

重いページのダイエット作戦 １－一般編－

ホームページ自身の重さを決定する要素に画像ファイルがあります。

テキストファイルのみのページでしたら表示も速くストレスを感じる事も少ないでしょう。

（ま、まれにデータベース的にびっくりするほどの情報があるページもありますが・・・）

現在ホームページでよく使用される画像は以下のものがあります。

GIF画像 －256色まで表示することができます。

アイコンなど色数の少ないイラストなどにむいています。

透過された画像やアニメーションもつくることができます。

ただしアニメーションGIFはぱらぱら漫画みたいなものなので静止画像より情報量が多くなり、ファイルサイズも大きくなります。

※Unisys社のLZWライセンス問題があります。

GIF画像作成の際には正規ライセンスを取得しているソフトを使いましょう。

古いフリーソフトなど使うのは危ないかも・・・LZWライセンス問題について知りたい人は杜甫々さんのＨＰに書かれています。

「とほほのＷＷＷ入門」

JPEG画像 －フルカラー表示できます。

圧縮する事によってファイルサイズを小さくします。

画像処理ソフトによっては圧縮レベルが変えられるのでいろいろ試してみるのがいいでしょう。

当然のことながら圧縮レベルを大きくするとファイルサイズは小さくなりますが画質の劣化が目立ちます。

写真や色数の多いイラストなどにむいています。

PNG画像 －フルカラー表示できます。

GIFと同じ256色に減色した場合PNGのほうがGIFより若干コンパクトになります。

フルカラーだとサイズは大きいと思いますが・・・また透過処理されたPNGはIE5では透過された状態で表示されますが、NN4では透過表示されません。

例えば写真をJPEGでなくGIFにすると表現色が減るだけでなくその用途によって使い分けましょう。

実際に見て確かめよう～

ファイルサイズは全部で約120KBありますタグで変更しても、転送されるファイルサイズは変わらないので見た目は小さいのになかなか表示されないというストレスを感じます。

はっきりいって見た目もあまりきれいでありません。

（作成ソフトによってもタグで小さくするだけとか画像そのものを変更する場合とかあるようです）

画像を小さく表示するには画像そのものを小さくするようにしましょう。

デジカメの大きい写真をそのまま使ってしまったのでは最後まで見てもらえないかと思います。

ファイルサイズは全部で110KB弱ありますWIN９８になってから標準のペイントでもビットマップ以外にGIF画像やJPEG画像の対応ができるようになりました。

画像処理ソフトを持ってなくてもペイントを使えば縮小する事が可能です。

ただし減色方法や圧縮率が設定できないので思ったような画像が出来ないこともあるかもしれません。

そこには前に見たホームページの内容が格納されています。

同じページを開いたとき、画像ファイルなどキャッシュから読み込まれるので表示が速くなります。

ボタンや壁紙をページごとに違うものを使うより同じ物（同じ格納場所で同じ名前）を利用すると初めて見た人でもその分だけ画像表示が速いように感じるでしょう。

（ただし途中でキャッシュがクリアされるとまた一から読み直すことになってしまいますが・・・）

重いページのダイエット作戦 ２－写真編－

私がホームページを開いたときに悩んだのが写真でした。

自宅で咲いた花の写真を載せたいと思っていたのですが、スキャナで取り込んでもその写真がなかなかきれいではないし、とにかくファイルサイズが大きい・・・ある時、写真を見せるサイトさんを見た時、ファイルサイズに驚きました。それにとてもきれい～(*^_^*)

思わず質問したところ、いただいた答えが全体がはっきりくっきり写っている写真より、背景がボケているほうがファイルサイズが小さくなる」ということでした。

またそのボケがいい雰囲気を作り出して素敵なんですよね～

それから「ボケ」の世界にはまっています（笑）

背景をボケさせた写真を撮るには絞りを開けること（ｆ値を小さくする事）

によって実現できます。前ボケもなかなか効果的です(^^)

いい雰囲気の写真になるかもしれません。

「ボケ」ってなーに？という方へ・・・実際に見て確かめよう～

ファイルサイズは全部で約54KBありますまた1ページあたりに表示される写真の数が多いと全部の写真が表示されるまでとても時間がかかってしまうと前にも書きましたが、写真を見せるサイトさんでよく使われる方法を一つ紹介しておきます。

例えば見せたい写真が５枚あったとします。

１枚５０ＫＢあったとしてそれをそのままホームページに貼り付けると全部で２５０ＫＢになります。

当然全部表示されるまでの待ち時間が長くなります。

そこで使われるのがサムネイル方式です。

これはＨＰ作成ソフトでドラッグしながら縮めるのではなく用意しておきましょう。（しつこいようですがＨＰ作成ソフトで縮めても見た目だけで元の画像の大きさが変わらないケースが多いからです）

本来の見せたい大きい写真が違うページで表示されるようにします。

サムネイルの写真でしたら一枚数ＫＢですみます。

そこに後日更新で追加1枚を入れたとしても見る側はそこだけを選択して見ればいいわけですから待ち時間のストレスはあまり感じないかと思います。

ただしサムネイルといっても何十枚も同じページに貼り付けるとやはり重くなってしまうので気をつけましょうね(^^)

サムネイルの参考例 ＞＞＞ 花畑の写真*** END ***

実験室１

PNG画像JPGよりきれいですがファイルサイズが問題。

ファイルサイズは75.5KB。

JPG画像一般的な写真、ウェブで見るにはまあまあ。

もう少し圧縮率を下げればよりきれいに。

ファイルサイズは10.6KB。

GIF画像

256色しか使えないため、よく見ると花のボケがしましまに。

ファイルサイズはJPGより大きく33.0KB。

実験室２

タグで縮めています。

ファイルサイズはなんと92.4KBあります～(^^;)

ロードに時間がかかってしまいます・・・おまけに花びらがトゲトゲしていてちょっと不自然。

こちらは表示サイズと同じ大きさです。

ファイルサイズは14.8KB。

実験室３

真中の花以外はボケています。

これだと多少のあらも隠せます（笑）

ファイルサイズは22.3KBです～

こちらは全体くっきりタイプ。

ファイルサイズは31.0KB。