Web開発において、適切な画像フォーマットを選択する際の基準や考慮するべき点についての参考をまとめました。

WEB開発において一般的に使用する画像フォーマットの種類

画像形式	WebP	AVIF	JPEG	PNG	GIF	SVG
拡張子	.webp	.avif	.jpg	.png	.gif	.svg
圧縮方法	非可逆圧縮（ロッシー）／可逆圧縮（ロスレス）	非可逆圧縮（ロッシー）／可逆圧縮（ロスレス）	非可逆圧縮（ロッシー）	可逆圧縮（ロスレス）	可逆圧縮（ロスレス）	可逆圧縮（ロスレス）
透過	〇	〇	×	〇	×	〇
アニメーション	〇	〇	×	×	〇	〇

可逆圧縮は保存を繰り返しても画質が劣化しません。それに対して非可逆圧縮は保存するごとに画質が劣化します。
WebPやAVIFは可逆圧縮・非可逆圧縮の両方に対応しているのでどちらかを選択可能です。
非可逆圧縮にする方が軽くなります。
PageSpeed Insightsでは「画像を効率的にエンコードする」事が推奨事項であり、その為に次世代フォーマットの画像提供を推奨しています。

用途に応じて、一般的に推奨される画像フォーマット

WebP

用途: Webページの高速読み込みを重視する場合。写真やイラストにも使えます。
利点: JPEGとPNGの利点を組み合わせたようなフォーマット。高い圧縮率と高品質な画像が特徴です。透明背景やアルファチャンネル、アニメーションもサポート。
注意点:2023年現在、WebPはWeb上で画像を効率的に圧縮するためのフォーマットとして広く使用されています。WebPは一般的な画像フォーマット（JPEGやPNG）と比較して、より小さなファイルサイズで美しく表示できます。これにより、ウェブページの読み込み速度を向上させることができます。
ただし、すべての画像をWebPに変換する際にはいくつかの点に注意する必要があります。
WebPはすべてのブラウザで完全にサポートされているわけではありません。一部の古いブラウザやプラットフォームでは、WebP画像が正しく表示されない可能性があります。したがって、対象とするユーザー層のブラウジング環境に応じて、適切な対応を検討する必要があります。
WebP画像をサポートしていないブラウザや環境のユーザーにも適切な画像を提供するために、フォールバックの画像（通常はJPEGやPNG）を用意することが重要です。
現在のサポート状況
https://caniuse.com/?search=webp

AVIF

用途: AVIFはHDR（ハイダイナミックレンジ）画像をサポートしており、明るい風景の視認性が高いため、雲や太陽といった高輝度の映像を表示する際に、向いております。
利点: AVIFは非常に高い圧縮効率を提供します。同じ画質であっても、JPEGやPNGと比較して小さなファイルサイズで画像を保存できます。特に、高解像度の画像や複雑なシーンにおいて効果があります。
注意点: AVIFのブラウザサポートは進展していますが、まだ完全なサポートが得られないのが現状です。一部の古いブラウザやプラットフォームでは、AVIF画像が正しく表示されない可能性があります。したがって、対象とするユーザー層のブラウジング環境に応じて、適切な対応を検討する必要があります。
AVIF画像をサポートしていないブラウザや環境のユーザーにも適切な画像を提供するために、フォールバックの画像（通常はJPEGやPNG）を用意することが重要です。
現在のサポート状況
https://caniuse.com/?search=AVIF

JPEG (Joint Photographic Experts Group)

用途: 写真やイメージで色合いやトーンが重要な場合。
利点: 圧縮率が高く、自然写真を表示する場合に特に適しています。見た目は遜色なくPNGファイルよりファイルサイズが比較的小さくなります。
注意点: 透明な背景やアルファチャンネルをサポートしません。

PNG (Portable Network Graphics)

用途: 透明な背景や図形、アイコンなど。イラストやグラフィックスに適しています。特に、文字や図形などのような輪郭のハッキリした絵の画像では、JPEGよりも圧倒的に高画質です。
利点: 透明な背景やアルファチャンネルをサポート。非圧縮または可逆圧縮で保存され、高品質な画像が得られますが、ファイルサイズは大きめです。

GIF (Graphics Interchange Format)

用途: 簡単なアニメーションや低色数のイラスト。
利点: 複数のフレームを含むアニメーションに適しています。ただし、色数が制限されるため、写真には不向きです。

SVG (Scalable Vector Graphics)

用途: ベクター形式のグラフィックスやアイコン。多様な解像度に適応するのに便利。ベクター形式とは、点の座標やそれを結ぶ線を数値データで記録・再現する画像方式です。
利点: ベクター形式のため、拡大・縮小しても品質が損なわれません。線や面の輪郭がはっきりしたロゴやイラストに特化しています。写真には適していません。フォントにも使えます。

次世代フォーマット 2023年現在のAVIFとWebPの比較

圧縮効率と画質

AVIF

AVIFは高い圧縮効率と優れた画質を提供することで知られています。従来の画像フォーマットよりも小さなファイルサイズで、高解像度の画像を保持する能力があります。

WebP

WebPも優れた圧縮効率と画質を提供しますが、AVIFほど高い圧縮率での画質維持には若干劣る可能性があります。

ブラウザサポート

AVIF

AVIFのブラウザサポートは2023年時点でも進展していますが、まだ完全なサポートが得られるわけではありません。一部の主要なブラウザはAVIFをサポートしていますが、すべてのブラウザで問題なく表示されるわけではありません。

WebP

WebPは2023年でも広くサポートされており、多くの主要なブラウザで問題なく表示されると考えられています。（一部の古いブラウザやプラットフォームを除く）

エンコードとデコードの効率

AVIF

AVIFのエンコードやデコードは計算リソースを必要とするため、一部の環境や古いデバイスではパフォーマンスの問題が発生する可能性があります。

WebP

WebPのエンコードとデコードは効率的であり、一般的に広範囲な環境でスムーズに動作します。

フォーマット選択の考慮事項

AVIFとWebPの選択は、プロジェクトの特定のニーズに基づいて行うべきです。AVIFは高い圧縮率と画質を提供しますが、ブラウザサポートが限られるため、主要なブラウザの利用者をカバーすることができるか検討が必要です。一方、WebPは広範囲なブラウザサポートを持ち、多くの場合に適しています。
総括すると、AVIFとWebPはどちらも高性能な画像フォーマットであり、プロジェクトの要件やターゲットユーザー層に応じて選択する価値があります。AVIFは圧縮率と画質において優れていますが、ブラウザサポートの限定があるため、現在はWebPのほうがより広範囲な利用ができるといえます。

今回は画像フォーマットの特性についてでした。
次回は次世代フォーマットの書き出しについて書きます。