AVIF vs WebP：次世代フォーマットはどちらが優れている？

WebPとAVIFはどちらもウェブ上でJPGとPNGを置き換えるために作られました。どちらもファイルサイズが小さくなります。どちらも透過と非可逆/可逆圧縮に対応しています。どちらも最新のブラウザで動作します。

では、どちらを使うべきでしょうか？

答えは単純ではありません。圧縮率ではAVIFが勝ちます。互換性と速度ではWebPが勝ちます。最適な選択は、あなたのニーズと対象ユーザーによって変わります。

AVIFとWebPのファイルサイズはどう違う？

AVIFの方がファイルサイズが小さくなります。安定して、すべての画像タイプで。

画像タイプ	WebP (85%)	AVIF (80%)	AVIFの節約量
風景写真	850 KB	580 KB	32%
ポートレート写真	550 KB	380 KB	31%
商品写真	260 KB	175 KB	33%
透過ロゴ	22 KB	15 KB	32%
スクリーンショット	170 KB	120 KB	29%

AVIFは同等の画質で、WebPより約20-35%小さくなります。AVIFは品質80%で、WebPは品質85%でこの結果を達成しています。フォーマット間で品質の尺度が異なるため、数値を直接比較することはできません。大切なのは、同じファイルサイズでの見た目の結果です。

毎日何千枚もの画像を配信するウェブサイトでは、この差はすぐに積み上がります。月に1TBのWebP画像を配信するサイトなら、AVIFで同じコンテンツを700GBで配信できます。CDNと帯域幅のコストを実際に節約できます。変換前に画像をさらに圧縮すれば、追加の節約も可能です。

同じファイルサイズではどちらが綺麗に見える？

同じファイルサイズの場合、AVIFはWebPよりきれいに見える傾向があります。特定の種類のコンテンツでは特にそうです。

滑らかなグラデーションの写真。 夕日、肌の色、ボケのある背景はAVIFの方がきれいに見えます。WebPではこれらの部分で微妙なバンディングが出ることがあります。AVIFはより自然に処理します。

低ビットレートの画像。 圧縮を強くかけた場合（小さなサムネイル、高圧縮のプレビュー）、AVIFの方がよく持ちこたえます。WebPはぼやけます。AVIFはよりシャープで、認識しやすいディテールが残ります。

細かいテクスチャ。 髪、布、葉、その他の細かいテクスチャは、同じファイルサイズでAVIFの方がより鮮明に保たれます。

同等な部分もあります。シャープなグラフィック、テキスト、アイコン、高コントラストの画像です。どちらのフォーマットもこれらをうまく処理します。違いが出るのは、微妙なトーンの変化がある写真コンテンツだけです。

高品質設定（90%以上）では、ほとんどの人はAVIFとWebPを見分けられません。違いが現れるのは、より強く圧縮した場合です。

ブラウザサポートはどう比較される？

ここはWebPが明確に有利です。

WebP：97%以上のブラウザサポート。 Chrome（2014年）、Firefox（2019年）、Safari（2020年）、Edge、Opera。すべての主要ブラウザに対応。残りの3%はInternet Explorerと非常に古いモバイルブラウザです。

AVIF：約93%のブラウザサポート。 Chrome（2020年）、Firefox（2021年）、Safari 16+（2022年）、Edge。新しいSamsung InternetとOpera。ギャップの主な原因は古いSafariと一部のAndroidブラウザです。

4%の差は大したことないように思えるかもしれませんが、対象ユーザーによります。ユーザーの多くが最新のiPhoneとデスクトップChromeを使っているなら、AVIFのサポートは十分です。古いデバイスを持つグローバルなユーザーに配信するなら、このギャップはより重要になります。

安全な戦略は、AVIFをWebPのフォールバック付きで配信することです。すべてのユーザーが、そのブラウザで最適なフォーマットを受け取れます。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

エンコードとデコードはどちらが速い？

WebPは両方で大幅に速いです。

エンコード速度。 画像をWebPに変換するのは、AVIFに変換するより5-10倍速いです。何百枚もの画像をバッチ処理する場合、これは重要です。WebPで30秒のビルドステップが、AVIFでは5分かかることもあります。

デコード速度。 ブラウザはWebP画像をAVIFより速くレンダリングします。高性能なデバイスでは差は小さいです。古いスマホやローエンドのハードウェアでは、AVIFのデコードで目に見える遅延が起きることがあります。

メモリ使用量。 AVIFのデコードはWebPより多くのメモリを使います。RAMが少ないデバイスでは、多くの画像が同時に表示される場合にスクロールのパフォーマンスに影響することがあります。

ほとんどのウェブサイトでは、デコードの差は無視できるレベルです。最新のデバイスはどちらのフォーマットも問題なく処理します。ただし、パフォーマンスが重要なアプリケーションやローエンドデバイス向けに開発するなら、WebPの方が軽い選択肢です。

各フォーマットはどんな機能をサポートしている？

どちらのフォーマットも機能が豊富ですが、違いがあります。

機能	WebP	AVIF
非可逆圧縮	対応	対応
可逆圧縮	対応	対応
透過（アルファ）	対応	対応
アニメーション	対応	対応
HDRサポート	非対応	対応
広色域	限定的	対応
最大サイズ	16,383 px	8,193 px（タイリングで無制限）
色深度	8-bit	8, 10, 12-bit
写真向けビット深度	十分	優れている

AVIFのHDRと広色域サポートは、将来性の面で際立っています。HDRディスプレイがスマホ、タブレット、モニターで標準になれば、AVIFはフォーマットを変えることなく、より豊かな色を表示できます。

WebPのシンプルなアーキテクチャは、作業をより速くします。AVIFの高度な色機能はありませんが、今日のウェブサイトの99%が必要とするものをカバーしています。WebPと従来のフォーマットの比較については、WebP vs PNGとWebP vs JPGの比較をご覧ください。

最大サイズの制限も覚えておく価値があります。WebPは各辺16,383ピクセルが上限です。AVIFの基本制限は8,193ピクセルですが、タイリングで拡張できます。ほとんどのウェブ画像では、どちらの制限も問題になりません。非常に大きな画像（パノラマ、地図）の場合は、サイズを確認してください。

AVIF、WebP、それとも両方を使うべき？

最良のアプローチは、両方のフォーマットを段階的な戦略で使うことです。

1つしか選べないなら： WebPを選びましょう。ブラウザサポートが広く、エンコードが速く、JPGやPNGに比べて大きな節約ができます。今日の時点では、より安全で実用的な選択です。

最高のパフォーマンスが欲しいなら： AVIFを最初に配信し、WebPをフォールバックにしましょう。最新ブラウザのユーザーは最小のファイルを受け取れます。それ以外のユーザーはWebPを受け取りますが、それでも優れています。アップグレードしたいですか？ConvertIMGで数秒で画像を変換できます。

エンコード速度が重要なら： WebPを使いましょう。ビルドパイプライン、リアルタイム画像処理、オンザフライ変換はすべてWebPの方が速いです。AVIFのエンコードはワークフローのボトルネックになることがあります。

将来に備えるなら： AVIFに投資しましょう。ブラウザサポートが広がり、エンコード速度が向上すれば、AVIFはウェブ画像のデフォルトフォーマットになるでしょう。今始めることで先を行けます。最新フォーマットへの第一歩として、PNGをWebPに変換できます。

各フォーマットの特徴と使い分けについて、画像フォーマットの選び方ガイドで詳しく解説しています。

AVIFとWebPの間で変換するには？

ConvertIMGは両方向の変換に対応しています。より広い互換性のためにAVIFからWebPへ。最大の圧縮のためにWebPからAVIFへ。すべての処理はブラウザ内で行われます。サーバーへのアップロードは不要です。ファイルをドロップして、フォーマットと品質を選び、ダウンロードするだけです。バッチ変換にも対応しています。