AVIF vs PNG
どちらも写真を保存できますが、トレードオフが異なります。実際の違いと、選び方をまとめました。
Short answer
写真的な中身なら AVIF が大差で勝ちますし、可逆モードもあります。アイコンやスプライト、単純な線画のような小さく平坦な素材では、PNG のほうが小さいことが多く、そして常に手軽です。
Why this comes up
ここに来る人はたいてい二通りです。大きすぎる PNG の写真を抱えていて削減幅を最大にしたい人か、素材のパイプラインを組み直していて AVIF が PNG を全面的に置き換えられるか考えている人です。答えはこの二つで大きく違い、たいていの一括りの助言が外れるのは後者のほうです。
項目別の比較
| 項目 | AVIF | PNG |
|---|---|---|
| 圧縮方式 | 非可逆 | 可逆 |
| 透過 | 対応 | 対応 |
| 一般的なファイルサイズ | 同等の JPEG のおよそ 40-55% | 同等の JPEG のおよそ 300-500% |
| 互換性 | 現行の全ブラウザが対応。一部の古いデスクトップアプリは未対応 | 数十年前のソフトも含め、どこでも開けます |
| 主な入手元 | ページ容量を最適化しているウェブサイト | スクリーンショット、ロゴ、図版 |
What actually differs
AVIF には可逆モードがある。そのことが忘れられている
比較はたいてい非可逆の AVIF と可逆の PNG を突き合わせますが、それは同条件の試験ではありません。可逆の AVIF は存在し、写真的な中身ならバイト単位で同一のまま PNG に余裕をもって勝ちます。要件が本当に「劣化なし」なら、PNG に留まる必要はありません。どちらの AVIF モードの話かを言えばいいだけです。
ごく小さく平坦な素材では AVIF がよく負ける
AVIF にはコンテナのオーバーヘッドがあり、32×32 のアイコンではそれを埋め合わせられません。符号化の道具立ても、単純な図形にはない写真的なきめを前提にしています。平坦な色のアイコンなら、同じ画像の AVIF より小さな PNG になることがよくあり、差が大きいこともあります。アイコン一式を変換する前に実測してください。「AVIF のほうが小さい」という一括りの規則は、写真の規則です。
PNG に互換性の問題はそもそもない
PNG は 90 年代からどこでも開き、フォールバックも picture 要素もコンテントネゴシエーションも要りません。AVIF は、読者の一部が古い Safari を使っているなら三つとも必要です。大きなヒーロー画像なら、その手間は実際のバイト数に見合います。2KB のアイコンでは何の見返りもなく、ビルド工程がひとつ増えるだけです。
Which to use
Use AVIF for
ウェブ上の写真や、細部の多い大きな画像。半分以下も狙える場面で、フォールバックがすでに構成に入っている場合。
Use PNG for
アイコン、スプライト、ロゴ、文字のスクリーンショット、そして AVIF の優位が消え、どこでも開けることがまだ効いてくる小さく平坦なもの。