ディジタル画像は、ラスタ画像とベクタ画像の2種類に大別されます。それについて、できる範囲で説明しようと思います。
広告
目次
ラスタ画像とベクタ画像の違い
ラスタ画像はピクセル基準で保存
ラスタ画像は、基本的にピクセル毎の値を保存したり、圧縮してまとめて保存した画像です。
画像は横幅×縦幅のピクセル（小さな点、ディスプレイ上では、小さな四角形。所謂ドット絵）の塊であらわされ、それを様々な手段で圧縮することで成り立っています。
語源はどうやらラスタスキャン。つまり、ピクセルの塊を一行ずつ読み込み、ついで一列ずつ読むことで二次元画像を得る方式によるもの、であるそうです（参考: Wikipedia）。
このあたりの詳しい解説はWikipediaにありましたので、ぺたり。
有名なフォーマットとしては、bmp、jpeg、png、gifあたりがあります。この中にも可逆（そのままのデータを残せる）と不可逆がありますが、このあたりは省略しますね。
ベクタ画像はベクトル基準で保存
ぺクタ画像は、その名前の通り、ベクトル、あるいはストロークといった、「どのようにどういう図形を描いたか」を保存する手段です。
たとえば、図の一点から一点に直線を引いた場合、出発点と到着点を記録し、「直線を引いた」ことを記録して保存しておけば、それを画像を読み込むときに再び読み込んで、同じ線を再現することができるというわけです。なお、ベクタ画像を作成できるドロー・ツールでは、直線だけでなく、数式などで「どう描いたか」を記録できるような形で曲線を描くことができます。勿論、円や長方形を描画することも可能です。
有名なフォーマットでは、svg(Scalable Vector Graphics)などがあります。
ラスタ/ベクタ画像の利点/欠点とは？
ラスタ画像の利点/欠点
まずはラスタ画像から。
ラスタ画像の利点
ラスタ画像の利点としては、下記のようなものが上げられます。
- ファイルサイズが一定して小さくなりやすい（圧縮率がある程度保障されている）
- 表示が速い
- bmp, jpeg, png, gifなど代表的なフォーマットの画像はたいていの画像ソフトで扱える
これらの理由により、頻繁に用いられる画像はラスタ画像であることが多いです。PDFとかだと、文書を作成する人によりちょっと違ったりしますが。
画像ソフトでの扱いが多いのは、このように普及しやすく、実際普及しているからというのもあるでしょうけれども、ただ単にピクセルの値を扱うことができればよいのが便利でもあるからかなあ、とは勝手に考えています。
ラスタ画像の欠点
原理的に仕方のないことですが、
- 拡大・縮小に弱い
- あとからレイヤを書き直すようにして編集するような類の修正が難しい
という弱点があります。
拡大・縮小に弱いのはそのままの意味です。特に拡大は、へたになんのアルゴリズムも使わずに拡大してしまうとぎざぎざが目立ったりします。なにせ、たとえばまっすぐ斜めに線を引いたとしても、線として記録されるのではなく、「ドットの値の集まり」が記録されます。ですので、「ドットの値の集まり」をどう拡大するかといえば、単純にはドットの大きさを大きくするということになるのですが、人の目はなめらかな拡大とはいいがたくなります。ですので、ラスタ画像の縮小・拡大は難しいことなのです。
また、後から書き直す場合も、編集履歴的な感じでレイヤを保持したままでないことが殆ど（それでも軽量に保存できる点がラスタ画像の利点でもありますが）です。ではレイヤを保持したままであればいいのかというと、イラストソフトを使っている方であればお分かりかと思いますが、レイヤのぶん画像のサイズが大きくなってしまうので、それも、という感じ。そのあたりは、圧縮効率がいい分、仕方がないのかもしれません。
ベクタ画像の利点/欠点
ベクタ画像の利点
ベクタ画像の利点としては、下記のようなものがあげられます。
- 拡大・縮小に強い
- あとから線であるとか、図形の書き直しが行える
- 複雑すぎる画像でなければ、圧縮サイズは小さい
理屈としては、「ここからここまでこう書いた」というのを線や図形として記録しているようなものなので、拡大あるいは縮小をするなら、その大きさで描画をしなおせばいいので、かなりなめらかな拡大・縮小が可能です。
また、線や図形については後から編集可能なので、そのまま編集が可能です。つまり、先ほど説明したラスタ画像の欠点である、書き直しが難しいという点も、ここでそれなりにクリアできるのです。
更にいえば、ラスタ画像を組み込んで使ったりしない限りは、そもそもサイズというのが殆ど存在しませんから、たとえば壁紙配布を行いたい場合など、様々なサイズの画像を用意しないで済むのです。
さらに、このように画像をストロークとして記号化して保存し、拡大も縮小もできるということで、単純なイラストレーションに関しては、基本的には画像の縦横にファイルサイズが依存しません。つまり、丸なら「○」のデータだけ保存されるので、「大きな丸の細かいピクセル値」などは保存しなくて良い、ということです。
ベクタ画像の欠点
さて、ベクタ画像にも勿論欠点があります。箇条書きにしてみると、以下のようになります。
- 複雑な画像の場合、ファイルサイズが大きくなり、描画にも時間がかかる
- 扱うペイントソフトが限られる
まず一つ目について。
利点でも述べたように、ベクタ画像は「どのように線や図形を描いたか」を記録するので、利点で述べた、簡単な図形を記録するときには、場合によってはラスタ画像より軽くなりえます。
しかし、それは翻せば、複雑なイラストレーションなどの、線や図形が多いものを保存する場合は、ファイルサイズがかなり重くなり、かつ画像を表示するときはそれら多くの線や図形を描画することになるので、ただ単にピクセルに設定されている値をざーっと描画していけばいいラスタ画像と違い、描画速度も遅くなります。
二つ目は、ただ単にあまりベクタ画像は知られていないことがまず一つです。
現在主な画像の形式としてはPNGやJPEGが普及しており、Windows標準ペイントでもこれらのラスタ画像を扱えるようになっているようです。一方、ベクタ画像を加工するソフトを探すときは検索しなければならないこともあります。
また、私としては処理形式の違いによるものもあるのかも、とも思います。ラスタ画像とベクタ画像では描き方がまず違いますし、しかもベクタ画像の場合、「画面にペイントソフトのようにイラストを描きたい」であるとか、「ベクター画像の内部コードを見ながら座標や図形を指定しながらやりたい」であるとか、人によってどういうふうに作成したいかが違ったりするようなので、そのあたりもあるでしょうから。
しかしそういう風に、（中身がsvgなど、ソフトの読み解ける形式であれば）内部コードを見ながらでもよし、ペイントソフトのように線や図形を引くのもよし、ができるのがベクタ画像のよさかもしれません。
それぞれの代表的な形式に対応した画像ソフト
ラスタ画像形式
ラスタ画像形式に対応した画像ソフトは多くあります。Windows標準で備わっているソフトであるペイントもそうでしょうし、クロスプラットフォームなど考えるとGIMPなどもあります。有料ではフォトショップもあるかと。
ベクタ画像形式(SVG形式)に対応したソフト
ベクタ画像は、主にSVG形式が普及しています。Webブラウザでも、最近は表示が可能になったようです。
そのSVG形式に対応したソフトで代表的なものは、Inkscapeです。有料ではIllustratorというソフトが有名な様子。前述の、「ペイントソフトのような感じでベクタ画像を作成したい」という需要にもマッチしているようです。
では座標を指定して、コードを書き換えつつ行いたい場合はと言うと、BracketsやAtomの出番になります。
Inkscape
Inkscapeでは、イラストソフトで描くようにして、SVG形式のイラストを作成することができます。一寸使ってみましたが、なるほど高機能でした。
Inkscapeは下記からダウンロード可能です。
公式サイト:
窓の杜:
コードを書きつつ編集する場合
この需要の場合は、そもそもSVG画像の仕組みをそれなりに理解している人向けですので、さくっと下記の良く纏まっているページをご覧になれば楽かと思います。
なおおすすめはAtomもしくはBracket。Bracketについては以下のサイトにて纏められています。
ただ、Bracketはただ今フォントが反映されないという問題を抱えているので、そのあたりが気になる人には、Atomのほうがベターなのかもしれません。
その他コメントなど
ここまでつらつら書いてきましたが、個人的には（写真以外の用途、イラストレーションなどで）ベクタ画像はお勧めです。なぜかというと、色々と分かりやすく、再編集もしやすく、拡大縮小も綺麗にできるからです。ラスタ画像への変換だって簡単です。
イラストも、様々なサイズを用意しなくても、それ一つだけて細かいところまで確認可能というのは魅力的ではないでしょうか。というか、ぶっちゃけ壁紙ダウンロードをするとき、SVGがあればなあと思ったことがあるというのが、この記事を書く動機のひとつでもありました。
おすすめですよ、ベクタ形式。