ラスターとベクターの違い

はじめに

ラスターとベクターの違いは、拡張子の一覧ではなく情報の保存方法の違いです。PNG、JPG、WebPは画面をピクセルの集合として保存します。SVGは形、線、色、座標、描画命令を保存します。

どちらが優れているかではなく、どちらが素材の性質と利用目的に合うかを判断します。

ラスターとベクターはどう動きますか？

ラスター画像には幅と高さがあり、各ピクセルが色や透明度を持ちます。写真のような連続した変化を効率よく表現できますが、元の解像度を大きく超えて拡大すると輪郭がぼやけます。

ベクターグラフィックは座標と数式で形を描きます。適切に作られたロゴやアイコンは大きくしても輪郭を再計算できます。一方、写真をベクターで近似すると非常に多くの形が必要になります。

ラスターとベクターの比較

実際の比較: 同じロゴをピクセルとパスで表す

次の例では、1,254×1,254のPNGロゴを254個のSVGパスへ変換しました。入力には大きな白い余白があるためサイズ差が特に大きく、すべてのロゴで同じ削減率になるわけではありません。

ラスターPNG

ベクターSVG

ラスター

792,538バイト

ベクター

30,311バイト

SVGパス

254個

PNG解像度

1,254×1,254

よくある失敗

ベクターは常に優れていると考える

写真や複雑な質感では、ベクター化によってファイルと描画処理が大きくなることがあります。

ラスターは常に低品質だと考える

用途に合った解像度と圧縮なら、ラスター画像は写真やスクリーンショットに最適です。

元の制作方法を無視する

元がベクターなら元データを使い、元が写真ならラスターのまま扱うのが自然です。

拡張子だけで判断する

PNGにロゴが入っている場合も、WebPに写真が入っている場合もあります。内容を見て判断します。

ベストプラクティス

• -写真、質感、自然な光にはラスター形式を選びます。
• -ロゴ、アイコン、図、線画にはベクター形式を検討します。
• -実際の表示サイズと端末密度を確認します。
• -ファイルサイズだけでなく描画構造も確認します。
• -元の制作データを可能な限り保管します。
• -変換後のSVGは必ず視覚確認と最適化を行います。

実務での手順

1. 1
   素材がピクセル情報と形情報のどちらに依存するか判断します。
2. 2
   拡大、CSS制御、再利用の要件を整理します。
3. 3
   元のデザインデータがあるか確認します。
4. 4
   候補形式で出力し、見た目とサイズを比較します。
5. 5
   SVGではパス数と要素数も確認します。
6. 6
   最も単純に要件を満たす形式を選びます。

FAQ

SVGはラスターですか、ベクターですか？

SVGはベクター形式です。ただしSVG内にラスター画像を埋め込むこともできるため、内部構造も確認してください。

PNGとJPGはラスター形式ですか？

はい。どちらもピクセルを保存します。PNGは透明度と可逆圧縮、JPGは写真向けの非可逆圧縮に強みがあります。

写真にはどの形式を使うべきですか？

通常はWebP、JPG、必要に応じてPNGを使用します。SVGは写真の代替形式ではありません。