重い画像

スポンサード リンク
ここでいう「重い画像」とは、高解像度or低圧縮でファイルサイズが大きく、表示に時間がかかる画像の事です。

特に、トップページに重い画像を表示させている場合、ページを表示しきるのに時間がかかってかなりストレスを感じます。
入り口であるトップページくらいは瞬時に表示させたいものです。

どうしても重い画像を使いたい場合の対策として、以下のものが有効です。

・代替テキストを使う
・画像の横幅と縦幅を指定しておく
・サムネイルを使う

代替テキストとは、<img src="画像URL" alt="代替テキスト">これのことです。
これを指定しておく事で、一部のブラウザでは画像を読み込み終わるまではそのテキストを表示させる事が可能です。

さらに、画像の横幅と縦幅を指定しておくと、画像のサイズ分のスペースを先に取っておくので画像が読み込み終わっていなくてもレイアウトが崩れる心配がありません。
画像を多用するページではこれを指定しておくと良いでしょう。
指定方法は<img src="画像URL" width="横幅" height="縦幅">このようになります。

また、かなり大きな画像を見せたい場合にはサムネイルを使うのが有効です。
サムネイルとは、元の画像を縮小圧縮して表示させるものです。
サムネイルに元画像へのリンクを貼っておけば、その画像に興味がある人だけクリック出来ますし、興味が無い人はわざわざその画像をDLしなくて済みます。

このように重い画像を使う場合の対策を書きましたが、最も重要なのは、重い画像を使わない事です。
画像を小さくしたり、圧縮率を高めれば表示時間も短縮されます。

また、全ての訪問者がブロードバンド環境にあるとは限らないという事も頭に置いておく必要があるでしょう。