ピクセルを並べるか、図形の情報を残すか

ラスタ形式では、画像を縦横の細かな格子に区切り、それぞれのマスに色を割り当てます。この一つ一つのマスがピクセル（画素）です。写真を大きく拡大すると色のついた四角が見えてくるのは、もとの画像が有限個のピクセルで構成されているためです。画像の幅と高さは「横のピクセル数×縦のピクセル数」で表せます。

ベクタ形式では、点の位置、直線や曲線の形、塗りの色、線の太さなどを図形の情報として記録します。たとえば円なら、中心の位置や半径、輪郭と内部の色を使って表現できます。表示する大きさが変わるたびに、その情報をもとに図形を描き直せることが特徴です。名称の「vector（ベクトル）」は、向きと大きさをもつ量を表す言葉ですが、画像分野では座標で定めた線や図形を扱う方式全体を指して使われています。

どちらの形式も、保存時には文字や数値を含む二進法のデータになります。違うのは、画像を復元するために「各ピクセルの色」を残すか、「図形を描くための情報」を残すかという設計です。

写真の色の変化とロゴの輪郭では得意分野が違う

写真には、光や影、髪の毛、雲など、細かな色の変化が大量に含まれます。このような画像は、場所ごとの色を記録するラスタ形式と相性がよく、デジタルカメラやスキャナで得た画像も基本的にはピクセルの集まりとして扱われます。JPEGやPNGは、広く使われているラスタ画像のファイル形式です。

一方、文字を組み合わせたロゴ、記号、模式図、単純なイラストなど、輪郭を図形として定義しやすい画像にはベクタ形式が向いています。同じ形を小さなアイコンにも大きな掲示物にも使いやすく、図形を選んで色や線を個別に直すこともできます。Webで利用できるSVGは代表的なベクタ画像形式です。ピクトグラムのように、形を単純化して意味を伝える図との相性も良好です。

ただし、「写真なら必ずラスタ、図なら必ずベクタ」という規則ではありません。ベクタ画像の中にラスタ画像を配置することも、ベクタで作った図をPNGなどへ書き出すこともできます。最終的な用途、編集方法、対応するソフトウェアを考えて選びます。

拡大すると四角が見える理由、輪郭が保たれる理由

ラスタ画像は、作成時に持っているピクセル数が決まっています。元のピクセル数より大きく表示すると、一つのピクセルを広げたり、周囲の色から新しい色を補ったりする必要があります。補間によって見た目を滑らかにすることはできますが、撮影されていない細部が本来の情報として増えるわけではありません。拡大によって輪郭がぼやけたり、階段状に見えたりするのはこのためです。

ベクタ画像は、表示先の大きさに合わせて線や曲線を計算して描くため、拡大しても図形の輪郭を保てます。しかし、どんな画像でもベクタにすれば鮮明になるわけではありません。複雑な写真を非常に多数の図形で表そうとすると、データや処理が複雑になります。また、画面自体はピクセルで表示するので、極端に細い線や小さな図形の見え方は、画面の解像度や描画方法にも左右されます。

解像度・色数・圧縮まで含めて形式を選ぶ

ラスタ画像の情報量には、縦横のピクセル数と、各ピクセルで表現できる色の数が関係します。ピクセル数や色の種類を増やすほど細部や色を表しやすくなりますが、圧縮していない状態では一般に必要なデータ量も増えます。現実の光景を一定間隔で区切り、色を段階的な数値に変える考え方は、標本化・量子化・符号化と結びついています。

ファイル名の末尾に付く拡張子は、表現方式を見分ける手掛かりになります。ただし、ラスタかベクタかという区別と、データをどう圧縮するかという区別は別の問題です。JPEGは通常、元の情報を一部省いてデータ量を小さくする非可逆圧縮を使います。PNGは元の情報を復元できる可逆圧縮を使います。用途による圧縮方法の違いは、可逆圧縮と非可逆圧縮として整理できます。

画像を選ぶときは、見た目だけでなく、後からどのように編集するかも重要です。写真の一部分を画素単位で補正するならラスタが扱いやすく、図形の位置や線幅を繰り返し調整するならベクタが扱いやすい傾向があります。ファイルサイズは内容、寸法、色、圧縮方法などにも左右されるため、「ベクタは必ず小さい」とは限りません。

ベクタ画像も画面に映る直前には点の集まりになる

ベクタ画像はピクセルを保存の中心にしませんが、一般的なディスプレイはピクセルを光らせて表示します。そのため、SVGの図形や文字も、画面に出す段階では表示位置に対応するピクセルの色へ変換されます。この処理をラスタライズといいます。斜めの線や曲線の縁に中間色を置いて、階段状のぎざぎざを目立ちにくくする処理はアンチエイリアシングです。

プリンタでも、ベクタの図形は印刷装置が出力できる細かな点へ変換されます。つまり、ベクタ形式の利点は「点をまったく使わないこと」ではなく、原稿を図形として保持し、出力先に合った細かさで描画できることにあります。Webページ上のロゴがさまざまな画面サイズでも輪郭を保ちやすいのは、この仕組みを利用できるからです。