Nekopps / Article / ラスタとベクトル - Webアプリ制作編集の Nekopps

ラスタとベクトル

（この文書は2001年10月ごろ作成・編集されたものです）

Section1. ラスタデータとベクトルデータ
- はじめに
- 画像の保存形式
Section2. ラスタデータ
Section3. ベクトルデータ
Appendix
- 参考サイト
- あとがき

ラスタデータとベクトルデータ

はじめに

コンピュータで扱う画像といえば、まず思いつくのは小さな点の集まりで構成された「ビットマップ」と呼ばれるタイプのものでしょう。ところがこれとは別に「ベクトル」などと呼ばれる不可思議な形式の画像が流行（？）しています。これはなんと点ではなく、数式データの集まりで画像を表現しようというのです。

今回はいわゆる「ラスタデータ」（ビットマップと類似語）と、ハイエンドユーザを中心にどんどんその勢力を拡大させている謎の「ベクトルデータ」というものの正体を検証してみようと思います。

画像の保存形式

コンピュータで扱う情報はすべて数値に符号化され、「ファイル」と呼ばれる単位でディスクに保存されています。画像に関しても同様で、ラスタ／ベクトルという言葉は、この画像を表現するデータの形式のことを言います。ファイルには、ラスタ形式の画像を扱うもの、ベクトル形式の画像を扱うもの、あるいは両方の形式の画像を扱えるものなどがあります。

この二つの画像形式の特徴を簡潔に説明します。どちらにせよコンピュータは最終的にはディスプレイのピクセル郡に着色（？）をして画像を表現します。ラスタ（一般には「ビットマップ」と呼ばれる）形式の画像は、この各ピクセルの着色情報をそのまま保存する従来からの基本的な画像保存形式です。これに対し、ベクトル（ベクタ，ドローなどと呼ばれることもある）形式の画像は、ピクセルという概念から離れ、“形状の情報”を保存するという考え方に基づいた形式です。ベクトル形式の画像には、「データ量を抑えやすい」，「編集が容易（移動や変形など）」，「拡大縮小が自由自在（解像度に依存しない）」などのラスタ形式には無い大きな利点があります。

：ラスタ画像の例：ベクトル画像の例（自作のしょうもない絵ですが・・）

ラスタデータ

最小単位の集合

私たちの身の回りの物の「最小単位」とは何でしょう？例えばすぐ側にある紙切れを手にとってみて下さい。その物は何が最小単位なのか分かりますか？（紙は木から出来ている、なんてそんな事ではありません(^^; ）物質が存在しているからには何かが集まってそれを構成しているはずです。ただ、それはあまりにも小さいので私たちはそれを知覚することは不可能です。これが「アナログ」というものです。

この紙切れを「画像」としてコンピュータ上で表現したいとします。コンピュータはデータを保持／利用するために最小単位を絶対的に必要とします（この考え方がデジタル）。そこでこの紙切れのビジョンも最小単位の集合として表現することにします。この最小単位が「ピクセル」です。ピクセルはコンピュータの画像表現において最小の単位です。という訳でラスタ形式の画像はピクセル（色を持つ小さな四角）の集合です。

■事後補足: ※そういえばこの最小単位を「画素」と呼びます。

ラスタ画像の拡大縮小

画像の拡大縮小といっても二つの方法があります。一つはアナログ視野的なもの（つまり近くで見るか遠くで見るかということ）で、もう一つはソフトウェア的なものです。アナログでは無理ですがデジタル画像であればソフトウェア的な拡大縮小が可能です。

・アナログ視野的拡大
虫めがね（現実の）を使ってラスタ画像を拡大すると、それはつまり画像の最小単位であるピクセルを拡大するのと同意で、四角いピクセルの角がきわだってきます。よく「ビットマップは拡大すると角がギザギザになってしまう」などというのはこれのことです。日頃よく目にする大抵の印刷物が肉眼では最小単位を確認できない程の高解像度で印刷されているのに対し、ディスプレイはもともと72dpiや96dpiのような低い解像度しか持たないのでこれは仕方のないことです。ディスプレイの表示を肉眼で見る場合は、紙媒体と違って微量の“ぼけ”が発生するので低解像度の割にはきれいに感じます。

	：ラスタ画像を拡大すると、それが四角い画素の集まりで構成されていることが分かる。（写真はラスタ画像の例をニアレストネイバー法で５００％拡大したものの一部）

・ソフトウェア的拡大
コンピュータで扱う画像はデジタルデータですからソフトウェアによる拡大が可能です。この場合はそのソフトの変換アルゴリズムにより結果が違ってきますが、有名なものに「バイキュービック法」、「バイリニア法」、「ニアレストネイバー法」などがあります。ニアレストネイバー法は単純なアルゴリズムで、虫めがねで見たときと同じような結果になります（単にピクセルを拡大したような）。バイキュービック法やバイリニア法を用いると各ピクセルの擬似色を計算し、拡大してもある程度の品質を保つことが可能ですが、本来は無い情報を擬似的に補間しているので限界があります。
＊この三種のアルゴリズムは代表的なフォトレタッチソフトである Photoshop で採用されているものです。 Photoshop,DTP のページでも検証していますので興味があればご覧になってください。

	：ソフトウェアによってある程度は擬似的な拡大版を生成することもできるが、ぼけ気味になる。（写真はラスタ画像の例をバイキュービック法で５００％拡大したものの一部）

縮小については触れませんでしたのでここで補足します。ソフトウェアによるラスタ画像の縮小は、拡大とは逆に情報を間引きます。バイリニア法やバイキュービック法を用いれば、当然ながら本来の質は失われますが、拡大に比べれば微々たるリスクで望む結果が得られます。線画のようなコントラストの強い画像は上記のようなアルゴリズムで縮小するとアンチ・エイリアスが施され、元よりきれいに見えることもあります。

ラスタデータの役割

ラスタはコンピュータによる画像表現の基本であり、いくらベクトルに利点が多くあっても不要になることはありません。ベクトルも最終的にはラスタに変換（ラスタライズという）される、ラスタのためのデータです。

つまり厳密に考えると「コンピュータによる画像の保存形式」という概念から考えればラスタとベクトルを比べることには意味があるはずですが、「コンピュータによる画像のレンダリング表現形式」という視点から見ると、本来それはラスタしか方法が無いことから、ラスタとベクトルを比べることは筋違いなのかもしれません。

という訳でラスタデータの役割は「コンピュータによる画像表現のすべて」とすることができますが、特にラスタデータが必要とされるのは、ベクトルによって保存することが不可能（または相応しくない）な画像を保存するケースと考えることができます。写真のような多階調濃度のピクセルで構成される画像は、色合い表現の苦手なベクトルのもっとも不得意とするところです。このようなデータはラスタ形式で取り扱うことが自然で、また当たり前です。

ラスタデータを扱うファイル形式

ラスタ形式のデータを扱う代表的なファイル形式
形式	［標準的な］拡張子	説明
ビットマップ bitmap	bmp	OS・Windows標準の形式。
PICT（ピクト） picture	pct	OS・MacOS標準の形式。
GIF（ジフ，ギフ） Graphics Interchange Format	gif	圧縮したデータを保存するWebで多く利用される形式。使用色を256以内に限定したパレット、各色への指標データを記録する。この形式で使用する圧縮アルゴリズム（LZW）の特許を米ユニシス社が所有している。
JPEG（ジェイペグ） Joint Photographic Experts Group	jpg	同じく、圧縮したデータを保存するWebで多く利用される形式。人の目の視覚的性質を利用したデータ圧縮をする（劣化が感じられにくい）。フルカラー（約1,677色）を扱える。
PNG（ピング） Portable Network Graphics	png	同じく、圧縮したデータを保存するWebで多く利用される形式だが、普及途中。特許問題を持つGIFに代わる形式としてW3Cに推奨されている。

ラスタ形式を扱うファイル形式はOSや分野ごとに様々に存在しますが、ここではよく目にする一般的なものを表で示しました。ラスタ形式のデータは通常肥大になりがちなので、多くの形式が何らかのデータ圧縮をサポートしています。

ベクトルデータ

数式で表される単純な画像

ベクトル形式のデータ保存はラスタ形式のそれとは根本的に考え方が違います。ラスタ画像は最小単位であるピクセルの集合だと述べましたが、ベクトルにはこの最小単位に相当する概念がありません。ベクトルは単位を集めて画像を構成するのではなく、数式によって“形”を表現します。

この、数式により形を表現する、というのは「単純な形は単純な形（＝少ないデータ）で表そう」という考え方からきています。これにより、単純なイメージはラスタよりベクトルで表す方が大幅にデータ量を抑えることができ、そのうえ、形を細かい単位に分けて保持することにより個別の編集が可能に、さらに、もともと数式で表されているので変形／拡大縮小を自然に柔軟に行うことができます。
※もちろん複雑な形も数式量を増やすことにより表すことができます。

“解像度に依存しない”とは

拡大縮小に関しては同じ形であれば大きくても小さくても幾何学で言う「相似」であり、ベクトルのもっとも得意とするところです。拡大縮小によるリスクが無い、ということは大胆に言ってしまえば「大小の概念が無い」ということになります（もちろん実際には大きさの情報もあります）。大は小をかねる、なんて言葉がありますがこれのことでしょうか（意味が違うかな・・(^^;? ）。

ベクトルデータも印刷時やディスプレイでのプレビュー時にはラスタライズされてドットやピクセルの集合になりますが、このとき出力する解像度に合わせてベクトルデータから最適なラスタ画像が生成されます。つまりこのときにこのベクトル画像の最小の単位を任意で指定することができるという訳です。

ベクトル画像の拡大縮小

ラスタの説明と同様に、ここでもアナログ視野的／ソフトウェア的の拡大縮小の実際に触れてみたいと思います。

・アナログ視野的な拡大縮小
ベクトルデータによる画像が視覚に飛び込むときには、既にそれはラスタライズされた画像なので、この項の説明は済んでいることになります。

	：ベクトル画像もラスタレベルで拡大すれば当然ながら同じ結果になる。（ベクトル画像の例をラスタライズし、ニアレストネイバー法で５００％拡大したものの一部）

・ソフトウェア的な拡大縮小
解像度に依存しない、とはいっても結局ベクトルの利点は専用のソフトウェアが無ければ成り立ちません。ソフトウェアによるベクトルデータの拡大縮小はラスタのように劣化を伴うことは無く、しかもデータ量の変化もほとんどありません。ベクトルデータの拡大／縮小はラスタライズされなければ意味がありません。紙媒体やディスプレイにイメージを表現することを要されたとき、ベクトルデータからは解像度に応じた最適な結果を得ることができます。

	：ソフトウェアによるベクトル画像の拡大は常に最適なビットマップが作られる。（ベクトル画像の例をIllustratorで５００％拡大したものの一部）

ベクトル形式の需要と役割

CAD（Computer Aided Design）の分野では、この“形状の保存”というベクトル形式画像の考え方は基盤とも言えるもので標準的に利用されています。また、出版業界・DTP（DeskTop Publishing）の分野では Adobe Systems社の開発した PostScript というベクトル画像を扱うことができるページ記述言語が事実上の標準として利用されています。また、Macromedia社の開発したWeb上で閲覧することができる Shockwave や Flash などは、ベクトル画像の利点をうまく活かした好例です。

「データ量を抑える」，「柔軟な編集性」，「大小を兼ねる」というベクトルデータの特質は、コンピューティングの様々なニーズに応えることができ、その存在性は以前にもましてさらに高まっています。

データ量を抑えるということは、ディスクスペースを節約できるというのも重要ですが、それよりも現在では“ネットワーク負荷を軽減”できる、ということに重点が置かれています。もしもWebブラウザがベクトルデータで記述された画像をラスタライズできるようになったら、さらにWebの可能性は広がることでしょう。

柔軟な編集性はデータ作成後の再編集を容易にします。ラスタデータというものは画像の寸法だけでなく、各ピクセルの色までも確定された“一枚の絵”ですが、ベクトルデータはそのような固定概念から逸脱した柔軟なデータです。複数の編集可能な形状（“オブジェクト”などと呼ばれる）から構成されるベクトルデータは、それ系のソフトがあれば専門的な知識をほとんど持たない初心者でも、視覚的に感覚的に簡単に、編集を行うことができます。

大小を兼ねるという、ラスタしか存在しなかった時代から考えると驚くべきベクトルの特質は、同じ画像の大小様々なデータが必要なときに威力を発揮します。ラスタ画像の場合このようなとき、縮小はともかく拡大が施されたときには倍率にもよりますが明らかな劣化が目立つようになり、とても利用に耐えるものではなくなってしまいます。ベクトル表現された画像はもともと確定された大きさを持ちません。如何なる解像度にも柔軟に対応することができます。

ベクトルデータを扱うファイル形式

ベクトル形式のデータを扱う代表的なファイル形式
形式	［標準的な］拡張子	説明
EPS Encapsulated PostScript	eps	あらゆるデバイス／ソフト間でデータ交換可能な、PostScriptをカプセル化した形式。バイナリデータやプレビュー画像を含める機能が付加されている。

すいません、よく考えてみたらこれくらいしか思いつきませんでした（^^;　表にする意味がないですね。ですが実際にはベクトルデータを扱う形式はもっとたくさんあるはずです。はやりの3DCGなどもやはりベクトルで絵画されていますし、業界ごとにいろいろあるでしょう。

Appendix

参考サイト

ラスタとベクトルへの理解を深めるために検索し、読ませていただいたサイトらです。並びは見つかった順です。

情報通信工学特別研究II報告書 Javaによる画像フィルタリング
十勝マイクロ：デジタル画像の基礎知識（ラスタ、ベクトル、ファイルフォーマット、解像度など）
YAMASHITA RIKIOさんのサイト：CADを背景としたオートトレースの研究など
上さんの画像のおはなし
シニアのためのCG：ここの「基本的事項（１）」の説明は素晴らしい。
ベクトル・グラフィックスは神々の画像フォーマットか？
画像ファイルの性質
パワード神戸：フリーのPostScriptインタプリタ「Ghostscript」の解説。PostScript記述によるPDFの作成などの貴重な情報。
情報処理議論のポストスクリプト説明
DTPを学ぼう！byストレンジフルーツ：DTPに関する各種の技術情報。注目。
Adobe PostScript3：詳細な説明を記したPDF文書がDLできます。

あとがき

当初の予定より内容が薄くなってしまいました。ラスタやベクトルを扱うファイルのデータ形式や、フラッシュのサンプルムービーなども掲載したかったのですが・・。物事に対する興味も徐々にずれていきますし、調べたいことは山ほどあります。ベクトルについてはPostScriptの詳細か、あるいは3DCGなどの観点からいずれ改めて研究してみたいと考えています。