今回は、ビットマップ画像とベクトル画像の違いについて、理解できるように具体例を出しながら、解説してまいります。

コンピューターで扱う画像データは大きく分けると、「ビットマップ画像」と「ベクトル画像」の2つに分かれます。
この2つの違いを知っておくと、PhotoshopとIllustratorなどを利用して、デザインを作る際に役に立つはずです。

ビットマップ画像とは

ビットマップ画像とは、「ピクセル」と呼ばれる小さな点が集まって構成される画像のことを指します。
「ピクセル」の一つ一つに色をつけて(色情報を追加して)、隙間なく羅列することで、下記のような1枚の写真になっているということです。

ビットマップ画像(ラスター画像)の特徴
ビットマップ画像(ラスター画像)の特徴

ビットマップ画像は、きめ細やかな色表現ができるので、写真や自然画などを扱うのに適しています。
画像に羅列されている小さな点(四角形)である「ピクセル」に色情報を持たせて画像を表示させているため、
画像内の特定の色や近い色だけを選択して加工することができます。

ただ、小さな点の集合で構成されているので、画像の拡大や縮小、変形を繰り返すと、画像が劣化してしまうというデメリットもあります。

また、カメラの性能を表現する際に、画素数が高いということを耳にしますよね。
画素数が高いというのはピクセルがたくさん集まっているという意味で、
細かい点がたくさん集まっていることで拡大に耐えることができ、キレイな写真になるということです。

ベクトル画像とは

ベクトル画像は、「アンカーポイント」と呼ばれる点と「パス」と呼ばれる線の情報が、数値として計算された画像のことです。
点と点の距離、線の角度、曲線のカーブの具合などを計算して、画像に変換表示させています。

ビットマップ画像のように小さな点の一つ一つを描画せず、
表示するたびに点と線の距離や角度の計算を行って画像に変換させているので、
画像を拡大・縮小したり変形したりしても劣化することなく、
画質が維持されます。

ビットマップ画像はきめ細やかな色表現ができ、写真や自然画などを扱うのに適していると説明しましたが、
ベクトル画像は複雑な色表現は苦手なので、イラストや図面、ロゴなどを作成することに適しています。

ビットマップ画像とベクトル画像の表現の違い

ビットマップ画像とベクトル画像をそれぞれ拡大表示してみましょう。

左のビットマップ画像はピクセルの四角形(点)が、羅列して、構成されたデータとなっているのがわかります。
右のベクトル画像は、ピクセルではなく、点と点を繋いだ線、色、カーブなどを数値として計算して再現されています。

ビットマップ画像とベクトル画像の表現の違い(拡大表示の際)

ビットマップ画像とベクトル画像を拡大して、比較

当サイトのロゴを例にします。

ビットマップ画像とベクトル画像を拡大した際の違い

ビットマップ画像のロゴの場合は、拡大するとぼやけてしまいました。

ベクトル画像のロゴの場合は、拡大をどれだけしてもぼやけることはありません。
ベクトル画像の場合は、数値で扱っているので、大きくしたり、小さくしたり、劣化することなく自由自在に拡大縮小ができます。
解像度を気にする必要がないということです。

まとめ

この記事のまとめ

  • 画像はビットマップ画像とベクトル画像に分けられる。
  • ビットマップ画像とは、「ピクセル」と呼ばれる点の集合体で構成された画像で、写真や風景画に向いている。
  • ビットマップ画像は、拡大・縮小を繰り返すと、劣化する。
  • ベクトル画像とは、「アンカーポイント」と「パス」と呼ばれる、点と線を数値化して再現した画像で、イラストやロゴ、図形に向いている。
  • ベクトル画像は、拡大・縮小をしても、劣化しない。