ラスター画像とベクター画像の違いと用途！

みなさんがwebサイトやパソコンを使っているうえでよく目にする画像には、大きく分けて２種類の形式があります。これを聞いてピンーとくる人で、それぞれの違いがわかっている人には当たり前の内容だなと思われるかもしれません。

ただし、次のような人はぜひ読んでみてください！

・これからwebデザインの勉強を始めていこうと思っている人
・写真の編集加工に興味のある人
・これからPhotoshopやillustratorを使い始める人
・画像を拡大縮小すると画像がボケることに困っている人
・会社のweb担当者、関係者

ラスター画像とベクター画像

パソコンでみなさんが目にされている画像は、「ラスター画像」と「ベクター画像」の２種類に大きく分けられます。
どちらも同じ画像であることに違いはありませんが、特徴が異なり使用用途も変わってきます。
web制作においても「ラスター画像」と「ベクター画像」を正しく使い分けることが望ましいです。

パッと見で違いがわかりますか？

ベクター画像

この状態では違いはわからないですよね
それぞれを拡大して見てみたいと思います。

ベクター画像

少し違いが見えてきましたね。
さらに拡大したいと思います。

ベクター画像

どうでしょうか？違いが見えるようになってきたと思います。
ブラウザーで拡大したり、スマホであればピンチアウト（2本の指で広げる）してもらえればさらに違いがわかると思います。

ラスター画像とは？

ラスター画像は、ビットマップ画像と呼ばれる形式です。
大きなポイントは、点が縦横の格子状に並ぶことで構成されています。
点は、それぞれ濃淡や色が異なっており、その点が集まって一つの画像が出来上がっています。
そのため、画像を拡大していくと点の大きさに限界があり、画像が荒く、ボケてしまうのです。
しかし、点で濃淡や色を細く表現しているので、風景写真のように色の濃淡や細かな部分まで表現できるのです。

このような点をピクセル（画素）と呼びます。
一般的に解像度が高い、低いと言いますが、これは単位面積あたりピクセル数が多いか少ないかのことです。
解像度が高いほど単位面積あたりのピクセル数が多く、高画質になります。

ラスター画像のポイント
・写真や素材などの細かな色の違い濃淡に強い
・拡張子は.png .jpg .gif など
・画像の拡大縮小に弱い
・主な編集ソフトはphotoshop

ベクター画像とは？

ベクター画像はラスター画像とは大きく異なり、点（ピクセル）の集まりから構成されている画像ではありません。
ベクター画像は、複数の点をそれぞれ直線や曲線で結んで構成されています。
またこれらの点や結んでいる線、色、曲線の曲率などを数式的に表現しています。
つまり、点や線、色といった情報を数値データとして扱い描いているのがベクター画像です。
ベクター画像は数値データを元にして描いているため、拡大縮小によって画像の画質の劣化が起こりません。
ただし、写真のような細かな描写を必要とする画像を表現することが難しくなります。

このようにベクター画像はロゴなどのテキストや地図の簡易イラストで主に用いられています。
拡大していっても画像がガクガクしていく（画質が落ちる）ことがないことが分かると思います。

このようにベクター画像は、アンカーポイントと呼ばれる点と点を線や曲線で結んで描かれています。
※こちらは説明用の画像なのでラスター画像です。（ベクター画像編集画面のラスター画像）

ベクター画像のポイント
・ロゴやイラストに向いている
・拡大縮小で画質が劣化しない
・拡張子は.svg .eps など
・写真などの細かな描写を表現できない
・主な編集ソフトはillustrator

さいごに

ラスター画像とベクター画像の違いとそれぞれの特徴を紹介してきました。ラスター画像とベクター画像のそれぞれのメリットを活かせる形で使い分けすることがポイントになります。

これから画像編集をしていこうと思っている人は、絶対に通る道になりますので、やりながら理解を深めていってもらえればと思います。