SVG, APNG, WebPなど、ベクタ形式や最近の画像形式の特徴や違い

このサイトで普段紹介しているイラストや写真の多くはjpgやpngなどのWebでよく使われている画像形式です。
ですが、jpgやpngの形式以外にもたくさんの画像形式があるので、それぞれの違いや特徴を知っておくと便利です。
そこで今回はベクタ形式といわれる画像や、比較的最近の画像形式についてまとめてみました。

ラスタ形式とベクタ形式

画像の形式はラスタ形式とベクタ形式の二つに分けることができます。

ラスタ形式

しばしばビットマップ画像ともいわれるラスタ形式の画像は、画素といわれる色の付いた点の集まりで表されます。
この画素の数が多ければ多いほど、密度が高ければ高いほど、画像をきれいに表現することができます。
そして画素の密度を示す指標として解像度というのがあります。
この解像度によって画像のきれいさを数値で表すことができます。

ビットマップ画像は写真やグラデーションの表現が得意です。
その一方、大きなサイズで画像を表したり、画像の拡大を行うと、解像度が下がってしまい画像が汚くなるという欠点があります。

ラスタ形式のフォーマットの代表として、「JPEG」や「PNG」などがあります。
おおよその人が使う拡張子はこうしたラスタ形式の画像だと思います。

ベクタ形式

ベクタ形式の画像は、画像の様々な要素を直線や曲線などの数式で表現します。

ラスタ形式の画像と比較すると、まず画像を数式で管理するので、ラスタ形式に比べてデータ量が小さくなりやすいです。
ラスタ形式の場合は解像度が高いほど、画像のサイズが大きいほど、画素のデータ量が大きくなりますが、ベクタ形式の画像にはそうした心配がありません。
ベクタ形式の画像はいくら拡大しても、数式で計算できるので画像が汚くならないからです。

その一方で、数式で表現のしにくいグラデーションや複雑な画像を表現するのが苦手です。
ロゴや単純なイラストなどに向いている形式とも言えます。

ベクタ形式のフォーマットの代表として「SVG」などがあります。

様々な画像形式

SVG（Scalable Vector Graphics）

SVGは以下のような特徴を持っています。
・ベクタ形式
・フルカラー
・XML（eXtensible Markup Language:拡張可能なマークアップ言語）で記述
・透過可能
・アニメーション可能
SVGは1998年に登場したフォーマットです。
SVGはXMLといわれる言語をもとに書かれており、柔軟な編集が可能になります。
例えば、画像を複数のファイルに分割したり、透過処理、アニメーションなどが容易に可能となっています。

HEIF(High Efficiency Image File Format)

HEIFは以下のような特徴を持っています。

フルカラー
可逆／非可逆圧縮が可能
背景透過可能
アニメーション可能
メタデータを持たせられる

HEIFは2013年に登場したフォーマットです。
HEIFの特徴はさまざまな情報を1ファイルに保存できる点です。
例えば、ExifやXMPなどのメタデータを持つことができるし、
一つのファイル内に複数の画像を持つことができるし、
アニメーションを持つことができるし、
透明度やサムネイル画像などを含むことが可能である。
今後JPEGに代わって普及するかもしれない形式です。

APNG(Animated Portable Network Graphics)

APNGは以下のような特徴を持っています。

フルカラー
可逆圧縮
背景透過可能
アニメーション可能
PNGとの互換性

APNGは2004年に登場したフォーマットです。
PNGを拡張されたフォーマットであり、PNGの持つ全ての利点に加え、アニメーション機能が追加されています。
APNGが使われている有名なものとして、LINEのアニメーションスタンプなどがあります。
アニメーション機能はGIFと比べると、フルカラーが取り扱え、半透明などの表現が可能になっています。
また、APNGはPNGとの高い互換性を持っており、APNGに非対応な環境でもPNG画像として表示させることができます。
今後GIFに代わって普及するかもしれない形式です。