画像のトリミングと色数

画像の自由度

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

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

画像の扱い方

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

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

画像のトリミング

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

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

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

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

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

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

余白のトリミング

余白あり 余白なし
余白ありの画像 余白をカットした画像
0.76KB 0.65KB

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

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

種類 最大色数 圧縮方法 特徴
GIF 256色 可逆圧縮 画像を透明化できる。最大色数が少ないが、その分容量を抑えられる。

多くの色数を必要としないイラストなどに向いており、WEBサイト用として最適で、一番使用されている。

JPEG 1677万色 不可逆圧縮 最大色数が多いながら、画像の圧縮率が高い。

多くの色数を必要とする写真などに向いている。

圧縮率が高いと画像が荒くなるところが欠点。

PNG 280兆色 可逆圧縮 鮮明な画像を表示できる反面、容量が大きい。

ブラウザによっては対応していないので、WEBサイトには不向き。

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

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

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

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

画像フォーマットの違い

GIF画像 JPEG画像
GIF画像 JPEG画像
0.65KB 11.4KB

GIF画像は色数にも注意

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

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

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

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

GIF画像の表示色数の違い(誤差拡散法)

2色 4色 8色 16色 32色 64色 128色 256色
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色以上は見た目にほとんど違いがない。

ストレスのない軽いページ作りのために、画像はデータサイズを出来るだけ抑える努力が必要です。

トリミングを上手く使い余白をなくし、さらに色数を抑えるなどの操作が有効です。

画像を挿入する方法を教えて

画像の挿入

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

CSSを駆使したモダンなWebデザインを学ぶなら

SEOについて学ぶなら

最新情報をチェックしよう!