【ビットマップ】と【ベクター】って、ナニが違う?

こんにちは！デザインメディア「ねるねる」です。

日々デザイナーは様々な写真や画像、イラストを扱うかと思います。
そんな画像たち、実は「ビットマップ」「ベクター」の２形式に分けられています！

今回はそんな画像形式の解説と、使い分けについてご説明します！

2つのカンタンな違い

ビットマップ

ピクセルと呼ばれる小さな四角を並べ、その１つひとつに色・輝度を持たせて表現した画像形式です。
繊細で鮮やかな表現が可能で、ピクセルの数で画質が変わってきます。

ベクター

画像の点や線の位置を、計算式を用いて表現した画像形式です。
そのため拡大縮小しても、その大きさに合わせて再計算されるので、画質が良いまま使用することができます。

それぞれの特徴やメリットデメリット、対応拡張子について見ていきましょう！

（「拡張子」ってナニ？… という方は、是非下記記事もご覧ください↓↓↓）

デザイン初心者必見！画像の拡張子について詳しく知ろう！【画像制作の基本】

https://service.gigno.co.jp/blog/17

ビットマップ形式（ラスターデータ）

ビットマップは、簡単に言うとドットで表現されたデータということになります。

そして、スマホやデジタルカメラで撮影するデジタル写真はビットマップ。
つまりはドット画像なんです。

『え？普段見ている画像がドットなワケないでしょ？』

そう思うかもしれません。でも実はきれいな写真でも拡大するとドット絵になっているのです。

とてもきれいな風景の写真があります。

拡大して見ると…

実はこのように細かいドットになっています！

このドットの密度を解像度と言います。
ビットマップは、このドットがどれだけ細かいかで、画像の繊細さが変わります。

メリット

ビットマップはドット一つひとつに色情報を持たせられるので、色鮮やかで細かい表現にとても強いです。
なので写真にはビットマップ形式が多く採用されています。

デメリット

非可逆性

ビットマップデータは解像度を落とすと元の画質には戻せません。
元に戻せなくなることを非可逆性といいます。
画質を落とすと容量も軽くなり扱いやすくなりますが、注意が必要です。

主な拡張子

JPG／PNG／GIF

ベクター

画像の点や線の位置を、計算式を用いて表現した画像形式です。
そのため拡大縮小しても、劣化することなく滑らかな画像を使用することができます。
大きさに合わせて再計算してくれるためです。

メリット

ビットマップだとサイズが適さない場合ドットになってしまう時もありますが、ベクターデータであれば劣化せずなめらかに表現することが可能です。

デメリット

細かい表現が苦手

画像劣化しないならベクターの方が良いじゃん！と思いますよね。

しかし、ベクターは細かい表現が苦手で、画像によってはベクターデータにすると下図のように元画像と見た目が大きく変わってしまうこがあります。

加えて上図のイラストや写真など、色数が多かったりグラデーションがあると、ベクターだと容量が重くなり扱いづらくなります。

なので、ベクターは色数の少ないロゴやアイコン、シンプルなイラストなどに適しています。

主な拡張子

SVG／Ai

ビットマップに比べてベクターは拡張子の選択肢が少ないのもデメリットです。

ビットマップとベクターの使い分け例

様々なサイズで使用する可能性のあるロゴは、ベクターデータにしておくと場面を問わずきれいな画質で使えて便利です。

写真の場合は、ベクターだと影や光の境目が不自然でべったりした印象なので、ビットマップの方が適しています。

シンプルなイラストは、ベクターでもビットマップでも見た目は変わらないので、データを編集することがある場合はベクター、編集をせず扱いやすさを取るならビットマップ。
使用状況に合わせて使い分けましょう。

ぱっと見平気かもですが…ベクターはよく見るとベタっとしていますね。
目の繊細な色遣いや、髪のグラデーション、着物の模様などビットマップに比べ雑な表現になっています。
このように、同じイラストでも、ビットマップが適している場合もあります。

まとめ

画像や用途によって、ベクターとビットマップを使いわけることで、より快適なデザインをしましょう！