members

members

サステナブルWebデザインにつながる次世代画像フォーマットとは

Tweet

次世代画像フォーマット
インターネットの普及が加速を続ける現代社会において、情報技術の発達とともにデータ通信量は増加し続けています。Webサイトの閲覧に伴うデータ通信量を削減することで二酸化炭素の排出を抑制する取り組みとして「サステナブルWebデザイン」に注目が集まっています。このコラムではWeb制作で使用している画像フォーマットについて特徴と用途をまとめるとともに、従来のWeb制作で使用している画像フォーマットは何に変更することでデータ量の削減につなげられるかについてまとめました。

画像の分類

すべての画像はビットマップ画像とベクター画像のいずれかであり、写真もイラストも図形もこの2つに分類されます。
ビットマップ画像は主に写真で使われており、フルカラーできめ細かい色彩を表現できますが、図形を変形するとギザギザが目立つという特徴があります。ベクター画像は主にアイコンやロゴで使われており、画像の図形を変形しても画質は劣化しませんが、写真など色数が多い画像のデザインには向かないという特徴があります。

画像の分類

出典:WEB用に使われる画像形式の基礎と特徴

ビットマップ画像 ベクター画像
特徴 ピクセルという点の集まりで構成されている画像を指します 画像の線を数値演算して、数式で表した画像を指します
長所 画像全体が大量のピクセルによって構成されているため、きめ細やかな色彩を表現することができます 画像を拡大・縮小しても画質が劣化しません
短所 画像が良い分、画像サイズが大きくなります
拡大・縮小すると輪郭の点がギザギザになるのが目立ちます
写真のような色数が多く、輪郭が不明瞭な画像を数式で表すと、元の写真以上に画像サイズが大きくなることがあります

Web制作で使用される主な画像フォーマット

Web制作で主に使用される画像フォーマットはJPG、PNG、GIFなどがありますが、いずれもビットマップ画像です。イラストやロゴ、アイコンといったベクター画像で表現できる画像であってもビットマップ画像として使用されているケースも多くみられます。

JPG PNG GIF
種類 ビットマップ画像 ビットマップ画像 ビットマップ画像
用途 一般的に色数の多い写真に用いられます Webサイト上で画像を表示させるために用いられます Webサイト上でイラストやアイコン、ロゴを表示させるために用いられます
長所 フルカラーで約1678万色表現できます
画像サイズを小さくできます
フルカラーで約1678万色表現できます
圧縮しても元の画像に戻すことができます
透明の指定ができます
アニメーションが表示できます
画像サイズが小さいです
圧縮しても元の画像に戻すことができます
短所 圧縮すると元の画像に戻せません
透明の指定ができません
画像の種類によってはJPGよりも画像サイズが大きくなります 色数が256色と少ないため、写真には不向きです

次世代画像フォーマット

ビットマップ画像の次世代画像フォーマットはWebPやAVIF、ベクター画像の次世代画像フォーマットはSVGがあります。
WebPは、従来型ビットマップ画像の画像フォーマット3種類(JPG、PNG、GIF)の長所を生かしつつ、画像サイズを約30%小さくすることができるという特徴を持つとともに、ほとんどのブラウザで対応しています。
AVIFはWebPの長所を生かしてWebPよりさらに約35%画像サイズを小さくすることができますが、2021年11月現在で対応しているブラウザが限られているため、マルチブラウザ対応のWeb制作で使用する画像の画像フォーマットとしては適していません。
SVGは、ベクター画像の画像フォーマットとして使用されています。イラストやロゴ、アイコンといった画像もビットマップ画像として使用されていましたが、ベクター画像とすることで、画像の変形による画質の劣化が見られなくなるだけでなく、ビットマップ画像に比べて画像サイズを小さくすることができます。

WebP AVIF SVG
種類 ビットマップ画像 ビットマップ画像 ベクター画像
特徴 JPGより約25~34%、PNGより約26%画像サイズを小さくできます WebPよりさらに約35%画像サイズを小さくできます JPGやPNGに比べて画像サイズを小さくすることができます
用途 JPG、PNG、GIFと同様に、Web上の画像として用いられます Web上の画像として用いられます
動画コーデックであるAV1の圧縮技術を利用した画像フォーマットです
Web上でイラストやロゴ、アイコンを表示させるために用いられます
長所 画像サイズを小さくできます
透明の指定ができます
アニメーションが表示できます
WebPよりもさらに画像サイズを小さくできます 拡大・縮小しても画像が劣化しません
レスポンシブ対応が可能です
後から色やサイズを変更できます
短所 圧縮すると元の画像に戻せません
一部のブラウザで対応していません
Chrome、Firefox、Operaなど、対応しているブラウザが限定されています
Adobe Photoshopでサポートしていません
写真では画像サイズが大きくなります
JPGやPNGで保存するとSVGに戻せません
SVGコードの知識が必要です

まとめ

現在Web制作で主に使用されている写真の画像フォーマットはJPGやPNGが中心となっていますが、次世代画像フォーマットであるWebPはマルチブラウザ対応が進められているため、今後使用されるビットマップ画像の画像フォーマットはWebP、ベクター画像の画像フォーマットはSVGが主流になるのではないでしょうか。
また、サステナブルWebデザインにつながる次世代画像フォーマットを選ぶ際は、使い分ける必要があります。マルチブラウザで使用する画像のビットマップ画像としてはWebPを採用する方が望ましいですが、Google Chromeなど特定のブラウザに限定して使用するビットマップ画像としては、AVIFを採用する方が望ましいでしょう。イラストやロゴ、アイコンといった単純な画像の画像フォーマットとしては、SVGを採用する方がデータ量削減につながると考えられます。

コラム執筆

黒崎 昌弘(くろさき まさひろ)

EMCカンパニー第6ビジネスユニット アカウントサービス第6ユニット所属。
2020年5月に中途入社し、ツール開発等を通して業務支援を行っている。

カテゴリ: SDGs, Webデザイン
2021年11月19日