画像のトリミングと色数

画像の自由度

画像の用途は、サイトによって異なりますが、背景画像、説明のための画像、写真など画像をページに掲載する機会は意外に多いものです。

静的コンテンツながら、画像は文字と違って自由度の大きいコンテンツですから、より多く、より大きく使用したくなるのは当然といえます。

画像の扱い方

しかし、画像ばかりが埋め尽くされるページ、画像が大きくて見にくいページは訪問者にとっては不快になることが多いのです。

画像を使う際には、画像の登場頻度、データサイズに注意しましょう。

画像のトリミング

画像を説明に使ったり、文章を視覚的に分かりやすく捉えさせるために、画像として挿絵を入れることは良いことです。

しかし、画像が大きくてページの読み込みに時間がかかるようでは困りものです。

画像のデータサイズを小さくするには、画像そのものを小さくする、余白を出来る限りカットするトリミングが有効です。

必要な部分を必要な大きさに切り取る操作を行います。

以下を見てください。見た目は同じでも余白を出来る限りなくすため、トリミングを行うと画像のデータサイズに違いがでます。

左の画像が余白あり、右の画像が余白なしです。

余白のトリミング

余白あり	余白なし
0.76KB	0.65KB

画像圧縮技術の違いを理解する

WEBで使用できる画像はJPEGやGIFがありますが、それぞれには圧縮方法や最大色数に違いがあります。

※詳しくは「WEB画像について – HTMLクイックリファレンス」

例えば、以下の例で見ると同じ画像でもフォーマットが異なるとデータサイズに大きな違いが出ます。

以下の画像のようなイラスト系の画像はそれほど色数を必要としないので、GIFが最も適しています。

目的に合わせたフォーマットを選ぶようにしましょう。

画像フォーマットの違い

GIF画像	JPEG画像
0.65KB	11.4KB

GIF画像は色数にも注意

GIF画像は最大256色の色表現が可能ですが、WEBで使用する場合は、それほど色数を必要としない画像も多くあります。

例えば、50色の色が使われている画像を256色で保存するのは視覚上無意味です。

データサイズが大きくなるだけですので、GIFは画像にもよりますが、おおむね64色で十分です。

画像編集ソフトで保存をする際に色数を選んで、データサイズを抑えましょう。

GIF画像の表示色数の違い（誤差拡散法）

2色	4色	8色	16色	32色	64色	128色	256色
0.15KB	0.22KB	0.28KB	0.37KB	0.49KB	0.65KB	0.95KB	1.39KB

32色以上は見た目にほとんど違いがない。

• 画像を挿入する（制作ソフト編） – ゼロから始めるホームページ作成講座
• 画像を挿入する（HTMLタグ編） – ゼロから始めるホームページ作成講座
• 画像（イメージ）タグ：HTMLタグ辞典
• 背景の設定：スタイルシート（CSS）辞典