ビットマップ画像とベクトル画像とは?意味と違いを図解

フォトショップの図形や画像についての知識

今回はビットマップ画像ベクトル画像について図をたくさん使って解説します。この2つの単語の意味と違いを知っていると、PhotoshopやIllustratorなどの画像編集ソフトを使うときに何かと理解がしやすくなるはずです。

1. 全ての画像は2つに分けられる

すべての画像は①ビットマップ画像(ラスター画像)と②ベクトル画像(ベクター画像)のどちらかに分類されます。写真もイラストも図形もこの2つのどちらかに分けられるのです。

2.ビットマップ画像とは?

ビットマップ画像は点の集まりで構成される画像です。

写真はビットマップ画像

たとえば写真はビットマップ画像の代表例です。無数の点が集まって1枚の写真になっているのですね。

ビットマップ画像には以下のような特徴があります。

ビットマップの特徴

  • 点の集まりで作られている
  • 点の集まりなので、拡大していくと点の細かさに限界がきて画像が荒くなってしまう
  • きめ細やかな色表現ができる
  • 写真絵画は基本的にこのビットマップ画像
  • PhotoshopやIllustrator『ピクセル』という画像形式はこのビットマップに当てはまる

あまりしっくり来ないと思いますが、後ほど図解するのでご安心ください。

3.ベクトル画像とは?

ベクトル画像は点との情報が数値化された画像で、どれだけ拡大してもぼやけません。特徴をまとめると以下のようになります。

ベクトル画像の特徴

  • 点とを数値化し、それをコンピュータが再現して表示
  • コンピュータが再現するため、どれだけ拡大しても画像が荒くならない(ぼやけない)
  • 縮小・拡大を繰り返しても画像が劣化しない縮小・拡大を繰り返しても画質が落ちない
  • 無数の色が含まれる写真はベクトル画像では再現がむずかしい
  • PhotoshopやIllustratorでの『シェイプ』『パス』はこのベクトル画像に当てはまる

写真はベクトル画像では再現できない

写真はベクトル画像としては再現できない

写真は無数の点の集まりです。「点と点をでつなぎ合わせて表現するベクトル画像」にとっては写真を表現するのは至難の技なのです。

線と塗りで構成されるものはベクトル画像で再現できる

ロゴはベクトル画像で再現するぼけない

ロゴのような線と塗りで単純に構成されるようなものならコンピュータで簡単に数値化できます。つまりベクトル画像で再現できます。

ベクトル画像なら拡大してもぼけない

ロゴをベクトル画像にすれば、どれだけ拡大表示してもぼけません。

ビットマップにすると拡大するとぼやけてしまう

ビットマップ画像でもこのロゴ画像を再現できますが、拡大するとぼやけてしまいます。

4.ビットマップはぼやけるのに、ベクトルがぼやけない理由

ビットマップ画像がぼやけてベクトル画像がぼやけない理由

たとえば、ビットマップ、ベクトルそれぞれで線を表現してみます。まずビットマップ画像だと点の集まりで線が作られています。そのため、拡大すると点の細かさに限界がきて、ぼこぼこに見えてしまいます。 一方で、ベクトル画像だと線をコンピュータが再現しています。そのため、どれだけ拡大してもコンピューターが線を画面に合わせてきれいに引き直してくれます(表現し直してくれる)。だからベクトル画像はぼけないのです。

5.JPEGやPNG画像はどっち?

ワケワカメちゃんの顔(通常)
ワケワカメちゃん

よく見るJPEG画像なんかはビットマップ画像なの?それともベクトル画像なの?

サルワカくんの顔(通常)
サルワカくん

ビットマップ画像です。PNGもGIFもビットマップです。

ワケワカメちゃんの顔(疑)
ワケワカメちゃん

じゃあいつベクトルは登場するの?

サルワカくんの顔(通常)
サルワカくん

たとえばイラレ(Illustrator)やフォトショ(Photoshop)での作業中に登場します。拡大してもぼやけない図形や文字を挿入することができますよね。あれはベクトル画像です。JPGで保存したらビットマップ画像になってしまいますが…。

ワケワカメちゃんの顔(疑)
ワケワカメちゃん

じゃあフォトショやイラレでロゴをベクトル画像として作っても、JPEGやPNG画像として保存したらビットマップ画像になってしまうってこと?

サルワカくんの顔(怒)
サルワカくん

残念ながらその通りです。

(ベクトル画像のまま保存できるSVGという画像形式もありますが…。)
ワケワカメちゃんの顔()
ワケワカメちゃん

じゃあ何のために・・・?

6.ベクトル画像として作業する意味

サルワカくんの顔(通常)
サルワカくん

数え切れないほど理由があります。まず、ビットマップ画像だと作業中に縮小・拡大を繰り返すうちに、画像が荒くなってしまいます。そのため「いざ保存しようと思ったらボケボケの画像しか保存できなかった…」ということが起こってしまうかもしれません。 ベクトル画像なら縮小・拡大しても画像は荒くなりません。

ワケワカメちゃんの顔(通常)
ワケワカメちゃん

ベクトル画像なら荒くなる心配がないのね。

サルワカくんの顔(喜)
サルワカくん

また、ベクトル画像として図形を作れば、後からでも簡単に色を変えることもできます。なぜならベクトル画像はコンピュータが点・線・塗りの情報を数値化して再現しているものだからです。設定をちょろっと変える(=数値を変える)だけで簡単に色を変えたり、線を加えたりできるです。 例えるなら、コンピュータが切り抜いた紙をキャンバスにペタッと貼るようなものです。

ベクトル画像のイメージ

つまりコンピュータに指示すれば、後からでも簡単に色を変えたり、線をつけたりできるのです。例えるなら、一度キャンバスに貼った紙をべりっと剥がして色や形を変え、再度キャンバスに貼り付けるだけで済むのです。

ベクトル画像なら簡単に色を変えられる

ワケワカメちゃんの顔(疑)
ワケワカメちゃん

逆にビットマップ画像として図形を作るとどうなるの?

サルワカくんの顔(喜)
サルワカくん

ビットマップの場合、キャンバスに直接 図形を描くようなイメージです。

ビットマップはキャンバスに直接描くようなイメージ

そのため、色を変えようと思うと塗り直さなきゃいけなくなるのですね。

ワケワカメちゃんの顔(通常)
ワケワカメちゃん

何かとベクトル画像の方が良さそうな気が…

サルワカくんの顔(通常)
サルワカくん

はい、フォトショップなどで作業するときに「ベクトル画像」か「ビットマップ画像」かを選べるときは、何かとベクトル画像にしておくことをおすすめします。

次回はビットマップ画像とベクトル画像がPhotoshopでの作業に具体的にどのように関わってくるのかを紹介します。

5.この記事のまとめ

ポイント
  • 画像はビットマップベクトルに分けられる
  • ビットマップは点の集まりで構成され、縮小・拡大を繰り返すと画像がぼやける【写真に向いている】
  • ベクトルは点と線を数値化し、それをコンピュータが再現して表示。縮小・拡大しても画像が荒くならない【線や図形に向いている】
サルワカ