形式の比較
AVIF と WebP、次世代の画像形式はどちらを使うべきか
AVIF も WebP も JPEG や PNG を大きく上回りますが、圧縮率と速度のトレードオフで違いがあります。AVIF は JPEG より最大50パーセント優れた圧縮を実現し、WebP は25～35パーセントほどの優位にとどまる一方ではるかに速くエンコードします。自分で管理するウェブページなら AVIF はエンコードの待ち時間に見合います。1キロバイトより配信の速さが重要な場面では、WebP が現実的な選択肢です。
WebP が最も得意とすること
WebP は、ウェブ向けに JPEG と PNG をそのまま置き換えられる改良版として Google が設計しました。同じ見た目の品質で JPEG より約25～35パーセント小さいファイルを生み出し、透過やアニメーションに対応し、2020年以来すべての主要ブラウザでサポートされています。エンコードも高速で、写真のバッチは数秒で WebP に変換できます。確かな圧縮、広い対応、速いエンコードというこの組み合わせが、今日のウェブページ向け画像にとって WebP を安全な既定値にしています。
AVIF が最も得意とすること
AVIF は動画コーデックの AV1 をベースにしており、同じ見た目の品質で通常 JPEG より50パーセント、WebP より明らかに優れた圧縮を達成します。なめらかなグラデーションや細かなディテールも WebP よりきれいに扱い、非可逆形式で高コントラストの輪郭周りに現れるリンギングノイズも少なくなります。ブラウザ対応は2023年後半にすべての主要ブラウザに広がりました。本当のコストはエンコード時間です。WebP が数秒で済むところを AVIF は数分かかるため、ヒーロー画像や商品写真のように一度圧縮して何度も配信する画像に最適です。
ブラウザ内で両方を選び、試す方法
現実的な進め方は、自分の画像で両方を試して結果を比べることです。同じ写真を画像圧縮ツールにドロップし、WebP で一度、AVIF で一度書き出して、ファイルサイズと見た目の品質を並べて比較しましょう。この圧縮ツールは完全にブラウザ内で動作し、ファイルが端末から外に出ることはありません。すべてのキロバイトがページ速度のスコアに影響するサイトのヒーロー画像や商品ギャラリーには、AVIF が追加のエンコード時間に見合います。多くの画像を素早く処理する必要があるユーザー投稿コンテンツには、WebP が適したトレードオフです。
このガイドで使うツール
よくある質問
WebP のフォールバックなしで AVIF を使えますか？
現代のブラウザを対象とする新しいウェブページなら、使えます。AVIF は2023年後半時点で Chrome、Firefox、Safari、Edge に対応しており、ウェブトラフィックの圧倒的多数をカバーします。対象に古いブラウザや確認できないモバイルの WebView が含まれる場合は、picture 要素で WebP のフォールバックを用意するのが安全です。ブラウザは対応する最初の形式を選び、残りは無視します。
透過画像にはどちらの形式を使うべきですか？
どちらも透過に対応しています。AVIF は同じ品質で WebP よりわずかに優れた圧縮で透過を扱います。透過画像が多くのページに表示されるロゴや UI 要素なら、AVIF は意味のあるバイト数を節約します。エンコード速度が制約になるなら、透過の WebP も優れた結果で、バッチ処理には現実的な選択肢です。