AVIF対WebP —— 小さいファイルが必ずしも正解ではない

一度、ひとつのヒーロー画像をWebPとAVIFで書き出して、ブラウザのタブを二つ行き来しながら、自分の目で本当に違いを捉えられるか延々と見比べた恥ずかしい夜があります。AVIFは31%小さかった。それでも見分けはつきませんでした。ただで得をした気分でそこに座り —— そのあと200枚のフォルダを一括で処理して、落とし穴を思い出しました。

AVIFはたいていの場合、より小さいファイルになります。これは事実で、知っておく価値があります。ただ「小さい」は表計算の一列にすぎず、判断が実際に宿っているのは、ほかの列のほうです。

AVIFが勝つところ

AVIFは動画コーデックAV1をベースにしていて、WebPより明確に新しく、賢い設計です。写真的な内容では、同じ視覚品質のWebPよりおおむね15〜30%小さくなります。空、肌、やわらかい影といったなめらかなグラデーションを、古いコーデックが塗りたくるブロックノイズなしに扱えます。WebPが対応しないHDRや広色域にも対応します。完全なアルファチャンネルも、WebPと同様に保てます。

さきほどのフォルダから、見分けがつかない画質設定でのざっくりした数字です。

最後の行をもう一度見てください。平坦でシンプルな図版では、AVIFのほうが大きくなることがあります。その賢さは写真的な複雑さに合わせて調整されていて、2色のイラストには噛みつく対象がありません。そこではWebP、あるいはPNGのほうが勝ちます。

AVIFの代償

サイズの勝利はタダではありません。現実的な代償が二つあります。

エンコード時間。 AVIFは圧縮が桁違いに遅い。同じ画像で、AVIFのエンコードはWebPの数倍かかることがあります —— ときに「一瞬」と「1ファイルにつき数秒待つ」の差になります。ヒーロー画像一枚なら誰も気にしません。でも200枚の一括処理では、その一秒一秒を体で感じます。WebPはエンコードが速すぎて、実質タダのようなものです。

デコードと対応状況。 人が実際に使うブラウザは、いまやすべてAVIFをデコードします —— Chromeは2020年から、Firefoxはその少し後、Safariは2022年後半のバージョン16から。2026年においては、これで実トラフィックの大半をカバーします。でも「対応している」と「どこでも動く」は別の言葉です。WebPには飽和状態の年数が数年ぶん多く積み重なっていて、低スペックのスマホではデコードも速い —— AV1のデコードは、バッテリーとCPUを目に見えて消費することがあります。一部のメールクライアントや古い組み込みWebViewは、いまだにAVIFにまったく触れません。

20%の問いかけ

だから本当の判断は、結局ここに行き着きます —— この画像で、この場所で、余分な約20%は意味を持つのか。

ランディングページの大きなヒーロー画像 —— すべての訪問者がダウンロードする重い一枚 —— なら、答えはイエスです。最初の描画を左右するものから100KB削れるなら、一度だけ払う遅いエンコードは払う価値があります。私が知るなかで、AVIFが最もはっきり効く場面です。

サムネイルのグリッド、ブログの本文中のスクリーンショット、あるいはWebPですでに約50KBを切っているものなら、答えはたいていノーです。小さい数字の20%は、もっと小さい数字にしかなりません。エンコード時間と、わずかな互換性を差し出して、誰も待っていないバイトを節約したことになります。そこではWebPのほうが落ち着いたデフォルトです。

AVIFを使わない場面

ファイルがモダンなブラウザの外へ行くなら —— メールのニュースレター、古いCMS、自分の管理外にあるパートナーのシステム —— AVIFに賭けはしません。WebPを使うか、リスクをゼロにしたいならプレーンなJPGにします。表示されない最小のファイルには、何の価値もありません。

平坦な図版、ロゴ、線画もAVIFでエンコードしません。コーデックの用途が違いますし、そういうものでWebPに負けるのを何度も見て、もう試すのをやめました。

実際の決め方

正直なワークフローは、重い写真的なものはAVIFに変換し、軽く、シンプルで、広く配布するものはWebPのままにする、というものです。すべてを支配する一つの形式などありません。画像ごとに選ぶだけです。

自分で比べてみたければ、どちらもここのブラウザ内で動きます —— 既存のWebPをさらに絞るならWebP→AVIF、マスターからまっすぐ行くならPNG→AVIFです。どこにもアップロードされず、エンコードは自分のマシンで起きます —— だからこそAVIFの遅さも身をもって感じます。これは不具合ではありません。小さなファイルのためにコーデックがより多く働いている、その様子が目の前で見えているのです。

自分のヒーロー画像を両方に通してみてください。違いが見えず、AVIFが明らかに小さいなら、答えは出ています。ただし、次の200枚でも答えが同じだとは思い込まないことです。