WEBでよく使われる画像のはなし

画像の形式について

① ラスタ画像

　画像はピクセル（色の情報をもった小さな正方形）が集まったものとして表現されます。写真やデジタルアートなどによく使われます。あらゆる種類の画像を表現できますが、拡大すると画質が荒くなってボケてしまうのが特徴。

代表：JPEG（jpg）, GIF, PNG, PSD, TIFF　等

② ベクター画像

　画像は点や線、曲線などの図形を組み合わせ、数学的な座標と計算式で表現されます。
拡大や縮小をしても画質が劣化しないのが特徴。

代表：SVG、AI、EPS　等

よく使われる画像ファイル形式の特徴

① JPEG（jpg）

• • 最大約1,677万色をサポートしていて、写真やリアルな画像表現が得意。
• • グラデーションを自然に表現可能。
• • 圧縮率を調整することで、ファイルサイズを大幅に小さくすることができる。
• • 透明部分をサポートしていない（表現できない）ため、透過部分が必要なときはPNGやWebP等の別フォーマットが使用される。
• • 非可逆圧縮のため、圧縮後は元の画質には戻すことができない。そのため、一度サイズを小さくしたり、元の画像をそのまま上書き保存を繰り返したりすると画質が劣化していく。

② PNG

• • 可逆圧縮のため圧縮しても品質が劣化しない。そのため、編集や保存を繰り返しても元の画質が維持される。
• • 透明部分を表現できる。
• • 図やグラフなど、品質を劣化させたくない画像に適する。
• • JPEGと同じく最大約1,677万色の表現が可能。
• • より多くの情報が保持される可逆圧縮のため、ファイルサイズが大きくなりがち。

③ GIF

• • 複数の画像をフレームとして組み合わせ、簡易的なアニメーションを作成できるのが大きな特徴。
• • 透明部分を表現できる。
• • 最大256色（8ビット）の表現しかできないためファイルサイズを小さくできる。
• • 写真のような高画質画像には不向き。

④ SVG

• • ベクター画像のため、拡大・縮小しても品質が損なわれない。
• • ロゴやアイコンなどで活躍する。
• • XML形式で記述されるため、テキストエディタで編集が可能。
• • JavaScriptやCSSを用いて、アニメーションや動的なスタイルを適用できる。
• • 写真や多くの色や形を含む複雑な画像にはあまり向いていない。

⑤ WEBP

• • 2010年にGoogleによって開発された新しめの画像ファイル形式。
• • 非可逆圧縮・可逆圧縮のどちらもサポートしているため、画質を保ったままファイルサイズを小さくすることができる。
• • 透明部分を表現できる。
• • GIF画像のようなアニメーションにも対応。

⑥ AVIF

• • 2019年にリリースされた次世代の画像ファイル形式。
• • 軽さで注目されてきたWEBPを上回る圧縮率を実現しており、ファイルサイズをさらに小さくできる上に画質が非常に高い。
• • AV1という動画圧縮技術を基にされているため、静止画だけでなく動画にも対応可能。
• • PNGやWEBP同様に透明部分を表現でき、かつファイルサイズを小さくできる。
• • アニメーションにも対応。
• • 圧縮率が非常に高いためその分、画像を表示する際のデコード速度が遅くなる可能性がある。
• • 新しいフォーマットであるため、すべてのブラウザや画像編集ソフトが完全に対応してるわけではないが、互換性については今後改善していくことが期待される。