[Home][Index]

速い・遅い・軽い・重い その2

速い・遅い・軽い・重いの続編です。

今回は速く(軽く)する方法ですが、ここで紹介している事はぽわんパパが心掛けている事なので『こんな考え方も有るのか』程度に覚えておいて下さい。他にもっといい方法があれば教えてください。

目標表示完了時間を考える。

まず、1ページ表示が完了するまでに自分なら何秒ぐらい待てるかを考えます。ぽわんぽわんの里では最近のほとんどのパソコンに付いている56kモデムで10秒以内を目標としています。

56kモデムは1秒間に約7KB転送できるので、目標を10秒とすると、7KB×10秒=70KBとなります。が、これはあくまでも最高速度の場合なので少し余裕を見て1ページ当たり最高50KBまでと目標容量を設定しています。

画像の数を考える

容量を考える上で一番負担になるのが画像系です。

タイトル、バナー、ボタン、写真等、見た目を良くしようと沢山画像を貼り付けると容量がどんどん大きくなってしまいます。

例えば、10個ボタンを付けたい時、1個2KBなら20KB、1個5KBなら50KBとなり、30KB(時間的に言えば4〜5秒以上)の差が出てきます。また20KBの画像を6枚付けたとすると120KBとなり、ISDNでも画像の表示だけで15秒以上かかってしまいます。

そこで1ページの総容量を考えて、画像を使わないリンクにしてみたり、大きな画像を使ったら他を小さくしたり、数を減らしたりしてみるのも良いでしょう。

画像の容量を考える

ぽわんぽわんの里で一番頭を悩ませるのが一真君の絵日記です。ここは写真がメインで、月が進む毎にぽわんママのリクエストする写真の枚数が増えてきています。はっきり言って困ってます。

そこで、私がやっている容量を減らす方法は、縮小と圧縮率の調節です。

(サンプルで使われている画像は全てPaintShopPro6.02Jで編集加工しています。)

縮小

まず縮小は、見にくくなく、顔の表情や雰囲気等が分かる程度に出来るだけ小さくしています。→サンプル1

この時、被写体の周りの不必要な部分をカット(トリミング)すれば同じ大きさに縮小しても被写体が大きく表現されます。→サンプル2

それと、デジカメやスキャナーで取り込んだ画像を何の加工もせず、表示サイズを小さくしただけの物を時々見かけます。これは容量が多くなるだけなので、せめて縮小だけでもした方が良いかと思います。→サンプル3

圧縮

次に圧縮ですが、写真のような色数の多い画像を保存したり、webに公開する時に使う一般的なファイル形式にJPEGと言うものがあります。デジタルカメラ等はこの形式で保存されます。

このJPEGは保存する時に圧縮率を変える事が出来ます。ただ問題なのは圧縮率を高くすると容量は小さくなるが画像が汚くなる、逆に圧縮率を低くすると容量は大きくなるが画像は綺麗になる性質があるので調節がちょっと邪魔くさくなります。→サンプル4

このように縮小と圧縮の結果、一真君の絵日記で使っているJPEG画像は1枚当たり大体200X133ピクセルで4〜6KB前後(元の写真は1800X1200ピクセルで約800KB)に収め、10枚ぐらい写真を使っても1ページ50KB以内に収めることが出来ています。

減色・デザイン

タイトル、バナー、ボタンやちょっとしたアニメーションを表示する時に良く使われるファイル形式にGIFと言うものがあります。他に、最近ではPNG形式もありますが、一部のwebブラウザー(IE3、NN3等。但しPlug−inを使えば表示可)で表示できなかったり、アニメーションが出来ないので、今一歩普及していません。

GIFは元々256色までしか使えないので普通の状態でもそんなに容量は大きくないのですが、減色したりデザインを工夫することでさらに容量を減らすことが出来ます。→サンプル5

まとめ

以上、容量を減らし表示時間を早くするための方法として画像の編集に関する事をつらつらとぼやいてみましたが、自分のサイトを快適に見て貰うのもなかなか楽では有りません。

ここで取り上げたネタは、素人の私が手探りで実践して来た事ですし、他のサイトではもっと分かりやすく説明している所も有ります。ただ、少しでも参考になって貰えればと思いこのような形にまとめてみました。

ここだけを参考とせずに、いろいろなサイトや書物を参考にして、いい物を作ってください。

長々とありがとうございました。ここまで読んだあなたは偉い