画像はテキストに比べてサイズが大きく、ダウンロード時間などを考えると最小限に抑えるべきです。使用する場合は、可能な限り圧縮することが望まれます。

とはいえ、ウェブデザインには画像は不可欠で、文字だけのサイトよりユーザーを引き付けます。画像は文字より目に入りやすく、また即座に理解することができますので、有効に活用するべきです。

「画像は最小限に抑えるべき」、「画像は有効に活用するべき」と述べましたが、この２点を組み合わせたのがサムネイルを用いるという手法です。
サムネイルとは、比較的サイズの大きな画像を縮小または切り取りをして小さな画像(160×120くらい)を作成し、それを見本用として表示させたものです。ユーザーが興味を持った小さな画像をクリックすると、大きな画像が表示される仕組みで、ユーザーは効率よくウェブを見ることができます。

サムネイルの作り方

サムネイルの作り方には、一般的に単純に画像ソフトで縮小するやり方と、画像の必要のない部分を切り取るトリミングというやり方があります。縮小すると細部がつぶれてしまい、トリミングをすると画像の印象が変わってしまう場合があります。

そこで、縮小とトリミングを上手く組み合わせる手法があります。例えば元画像の１０％のサムネイルを作りたければ、まず元画像の３２％をトリミングして、その後に３２％縮小すればいいのです。

例えば、以下の400×300の画像から80×60のサムネイルを作成します。