【画像生成AI】 PNG でまだ大丈夫？ JPEG, WebP, AVIF の容量と画質を徹底比較！
はじめに
こんにちは、きまま / Easygoing です。
今回は、イラストの画質を考えるときに重要な画像フォーマットについて考えます。
4つの画像フォーマット
現在、主に使われているのは次の４つの画像フォーマットです。
可逆圧縮：圧縮しても画質が劣化しない
非可逆圧縮：画質が劣化するが、その分容量も小さくなる
JPEG
JPEG は 1990 年代の前半に、文字データと比較して容量の大きかった画像データを効率的に圧縮するために制定されました。
JPEG は画質が劣化する 非可逆圧縮 ですが、そのおかげで画像の容量をかなり小さくすることできます。
PNG
PNG は 1996 年 に登場しました。PNG は透過画像を扱うことができ、JPEG より圧縮率は低いものの画質が劣化しない 可逆圧縮 が特徴です。
WebP
2010年代になると、JPEG と PNG の後継としていくつかのフォーマットが登場しますが、2020年9月に Apple が Google の開発した WebP をサポートしたことにより、後継がほぼ WebP に決まりました。
AVIF
2018 年 に登場した AVIF は、WebP を上回る画質と圧縮率を実現できるとして、WebP とともに 次世代のフォーマット として注目されています。
なお、次世代フォーマットの WebP と AVIF は、可逆圧縮 と 非可逆圧縮 の両方をサポートしています。
各フォーマットの品質設定
それでは、実際のイラストで容量を比較してみます。
各フォーマットの 品質設定 は次の値を使います。
PNG：9（最大圧縮）
JPEG：85（Google の推奨値）
WebP：80（JPEG より画質が良く容量が小さいとされる設定）
AVIF：80（同上）
容量の比較（高解像度）
まずは、アップスケラーを使って高解像度で生成したイラストを、そのまま圧縮してみます。
青色のグラフは画質の劣化の無い 可逆圧縮、紫色は劣化のある 非可逆圧縮 を示しています。
高解像度のイラストでは、可逆圧縮は WebP と AVIF は元の PNG より 5～15 % ほど容量が小さくなっています。
それに対して、非可逆圧縮はもとの容量の 6〜15 % の容量になり、JPEG, WebP, AVIF いずれの形式でも 容量を大幅に削減 できることが分かります。
非可逆圧縮の画質の劣化
非可逆圧縮は容量を大幅に削減できますが、画質はどうなるでしょうか？
今度は、圧縮による元画像からの変化を、MAE と SSIM で測定してみます。
Mean Absolute Error (MAE)：主にカラーの違いを検出
Structural Similarity Index (SSIM)：白黒の構造の違いを検出
高解像度の圧縮では、MAE・SSIM の類似度はともに 99 % を超えていて、これは 肉眼では全く違いが分からない レベルです。
実際のイラスト！
それでは、実際のイラストを確認してみます。
なお、note では画像は自動で非可逆 WebP に変換して配信されるので、英語版のページ でより正確な違いを確認できます。
PNG（オリジナル）
JPEG（品質設定：85）
WebP（品質設定：80）
AVIF（品質設定：80）
高解像度のイラストは、適切に設定すれば 非可逆圧縮でも劣化することはほぼありません。
低解像度のイラスト（372 x 372）
今度は、容量をさらに節約するために、解像度を note の実際の画像の表示サイズ（372 x 372）に縮小したイラストで試してみます。
低解像度のイラストでは、圧縮の効果は高解像度の時よりも劣りますが、それでも非可逆圧縮だと元の 20% 程度の容量まで削減できています。
低解像度だと画質は劣化する！
続いて、低解像度のときの画質の劣化を確認します。
低解像度では、先ほどと比べて特に MAE の類似度 が低下していて、オリジナルのイラストから カラーの情報 が失われていることを示しています。
MAE 類似度の 98 % は、パッと見では違いは分かりませんが、拡大して比較すると違いを感じるレベルです。
画像のフォーマットに注目すると、非可逆圧縮の容量と画質のバランスは、AVIF > WebP > JPEG の順で、やはり新しいフォーマットが容量と画質のバランスに優れていることが分かります。
低解像度のイラスト
ここから、低解像度の実際のイラストを見てみます。
PNG（オリジナル）
JPEG（品質設定：85）
WebP（品質設定：80）
AVIF（品質設定：80）
まず、この比較ではイラストの解像度を実際の表示サイズに合わせていますが、先ほどの高解像度のイラストと比較すると、多くの人が PNG でも画質の劣化を感じる と思います。
これは、iPhone や iPad をはじめ 超高密度表示 に対応した端末は、1つの論理ピクセルを更に分割して表示するので、実際には３倍程度の解像度まで画質が変化するためです。
低解像度のイラストは圧縮による劣化も受けやすくなるので、イラストを配信する場合、まずは実際の 表示サイズの約3倍 を目安に十分な解像度のイラストを用意して、目標の容量になるように圧縮品質を調整するのが良いでしょう。
今は、高解像度表示への対応が必須！
超高密度表示は、iPhone や iPad に限らず、Samsungの Galaxy シリーズ（AMOLEDディスプレイ）や Sony の Xperia シリーズ（高解像度LCDやOLED）などの Android 端末 でも普及しています。
最近は、PC よりもスマホのユーザーの方が多く、またサブピクセルレンダリングは、フラッグシップモデルに限らず エントリーモデル まで普及しているので、これからは表示サイズの約３倍の高解像度のイラストをデフォルトで準備するのが良いでしょう。
WebP と AVIF はどこでも使える？
ここから、新しい画像フォーマットの WebP と AVIF の各種サービスの対応状況を調べてみます。
WebP は 2020年に Apple の Safari が対応して以降、幅広いサービスで普及が進んでいて、現在は ほぼ全てのサービス で使うことができます。
一方で、AVIF は 主要なブラウザ は全て対応していますが、note をはじめ個別のサービスは、まだ対応していないものが多いのが現状です。
note や X は、日本で特に普及しているサービスなので、これらのプラットフォームでの利用を考えると、今の段階では次世代フォーマットは WebP を利用するのが無難だと思います。
PNG でまだ大丈夫？
現在の可逆圧縮の主流は PNG 形式ですが、個人的に次の理由から今後も PNG が主役のままになると考えています。
１．WebP と AVIF は拡張子で区別できない
WebP と AVIF は、可逆圧縮と非可逆圧縮の両方に対応しています。
これは、両方を同じファイル形式で統一できて便利ですが、一方で 拡張子を見ただけではどちらの圧縮か区別することはできません。
PNG 形式であれば、劣化の無い可逆圧縮であることがすぐに分かるので、分かりやすさの点では従来の PNG 形式の方が優れています。
２．画像生成 AI の精度は上がっている
先ほどのグラフから分かる通り、可逆圧縮の WebP や AVIF の容量の節約は PNG と比べて １割程度 に留まります。
さらに、画像生成 AI の進歩は速く、新世代モデルの Flux.1 や HiDream はそれまでのモデルと比べて手などの失敗がずっと少ないので、生成枚数も以前より少なく なっています。
静止画は動画と比べると容量が小さいので、PNG を置き換えてまでの WebP や AVIF の普及は進まないと思います。
３．web ページの表示は高速化している
Google は、web ページの表示の高速化するため、画像を 実際の表示解像度まで縮小して WebP または AVIF の非可逆圧縮で配信 することを勧めています。
しかし、この方法だと画質が大きく劣化してしまうのは、先ほどお示しした通りです。
近年は、5G 回線の普及をはじめインターネット回線は高速化していて、さらに 2020 年に標準化された 画像の遅延読み込み 機能のおかげで、適切に設計された web サイトでは、画像の容量がページの読み込み時間に影響することはあまりありません。
また、最近は AI 検索エンジン の普及で調べるときは検索だけで済ますことも多く、実際にページを訪問してくれた人には、少しでもきれいなイラスト を見てもらい、ユーザー体験を向上させるのも一つの考え方だと思います。
X や note では PNG をそのまま使える！
X や note では、高解像度のイラストを PNG 形式でアップロードすると、適切な解像度にリサイズされて、さらに 非可逆 WebP に 自動で変換 して配信されます。
普段は高解像度のイラストを PNG 形式で持っておき、使うときはそのままアップロードしてプラットフォームの自動変換に任せる、シンプルな使い方が分かりやすくて良いでしょう。
画像を簡単に変換するアプリ
ここから、画像のファイル形式を簡単に変換できるアプリをご紹介します。
Squoosh
Squoosh は、Google が公開しているオンラインで簡単に画像のファイル形式を変換できるアプリです。
Squoosh は、画像をドラッグ&ドロップでアップロードして、設定を入力するだけで簡単に圧縮形式を変換できます。
XnView MP
ローカルで多くのファイルをまとめて変換するときは、個人なら無料で使える XnView MP が便利です。
XnView MP は、エクスプローラの表示を画像向けに拡大したようなアプリで、ファイル名・形式・メタデータ・解像度などを まとめて変換 できるほか、各社のデジカメの RAW 形式の表示にも対応しています。
ComfyUI で AVIF 形式を利用する！
ComfyUI は、デフォルトでは AVIF 形式の保存に対応していませんが、次のカスタムノードを使うと AVIF 形式で画像を保存できます。
なお、ComfyUI は AVIF 形式の画像のロードには対応していないので、AVIF 形式の画像を読み込むときは、自分で PNG か WebP などに変換する必要があります。
まとめ：これからも PNG で大丈夫！
解像度は表示サイズの３倍が目安
高解像度なら圧縮しても劣化しない
これからも PNG で大丈夫
JPEG と PNG は古くからあるフォーマットですが、今でも広く使われています。
WebP と AVIF は次世代のフォーマットで、X や note で自動変換して容量を節約してくれるのはとても便利です。
一方で、時代は常に変化していて、今まで勧められていた表示速度を優先した低解像度・高圧縮の画像配信は、必ずしも時代にマッチしなくなってきています。
これからも画質を最優先に、配信速度にも気をつけながらイラストを公開していきたいと考えています。
最後までお読みいただきありがとうございます！
