2026年の画像フォーマット：AVIFがWebPに勝る場合と、そうでない場合

2026年の画像フォーマットの現状

AVIFは長いあいだ「未来のフォーマット」と言われてきましたが、いまではもう現在のものに感じられます。ブラウザ対応は2024年末に世界全体で95%を超え、CDNはAVIFへの自動トランスコードを追加し、多くの画像最適化ツールがAVIFを標準で扱うようになりました。一方でWebPは、安全なフォールバックになっています。広く普及し、エンコードが速く、ほとんどの用途には十分です。

もはや論点は、理論上AVIFのほうが優れているかどうかではありません。優れています。問題は、エンコード時間、ツールの成熟度、エッジケースでの挙動といった実務上のトレードオフを踏まえて、あなたのワークロードで切り替える価値があるかどうかです。

この記事では、その判断ツリーをたどります。何千枚ものユーザーアップロード画像を配信する場合と、十数枚のマーケティング用ヒーロー画像を手作業で調整する場合とでは、答えは異なります。エンコード速度を重視するなら、答えはまた変わります。

AVIFが明確に勝つところ

AVIFはAV1ビデオコーデックのイントラフレーム圧縮を使います。つまり、動画向けに長年積み重ねられてきた最適化の恩恵を受けます。その結果、同等の知覚品質では、特に写真コンテンツにおいてWebPより一貫してファイルサイズが小さくなります。

さまざまな画像セットで繰り返しテストすると、同じSSIMスコアでAVIFファイルはWebPより20〜30%小さくなります。高解像度の写真、たとえば商品写真、編集用画像、幅1200pxを超える画像では、この差はすぐに積み上がります。2MBのWebPは1.4MBのAVIFになります。ページ上の100枚の画像にそれを掛け合わせると、帯域幅の節約は無視できません。

AVIFは、滑らかなグラデーションや低コントラストの領域もWebPよりうまく扱います。WebPはVP8由来のため、空、影、そのほか微妙な階調変化でバンディングが出ることがあります。AVIFのより高度な変換符号化はこれを避けます。デザイン制作物、イラスト、夕焼けなど、画像にグラデーションが多く含まれる場合、AVIFはより小さいファイルサイズでよりきれいに見えます。

ブラウザ対応も、ほとんどのサイトでAVIFを主要フォーマットにできる程度には十分強くなりました。最後の大きな未対応だったSafariは16.4（2023年3月）で対応しました。2026年初頭時点で、世界全体の対応率は95%を超えています。残るギャップは古いAndroid端末とレガシーなエンタープライズブラウザであり、そのためフォールバックはまだ必要です。

WebPがまだ理にかなうところ

エンコード速度が、実務上もっとも大きな制約です。AVIFのエンコードは、品質設定やエンコーダー実装にもよりますが、WebPより5〜10倍遅くなります。ユーザー生成コンテンツ、たとえばプロフィール写真、フォーラムの添付ファイル、リアルタイムにアップロードされるあらゆる画像では、このレイテンシが問題になります。200msで終わるWebPエンコードが、AVIFでは2秒になります。アップロードを同期的に処理しているなら、それはユーザーに見える遅延です。

解決策は、非同期でエンコードすること（元画像をアップロードし、プレースホルダーを配信し、バックグラウンドでエンコードする）か、ユーザー生成コンテンツではWebPを使い、AVIFは自分で管理できるキュレーション済みアセットに限定することです。多くのサイトは両方を採用しています。マーケティング画像にはAVIF、ユーザーアップロードにはWebPです。

WebPはツール面でも成熟しています。あらゆる画像ライブラリ、CMSプラグイン、CDNが何年も前からWebPをサポートしています。AVIF対応も追いつきつつありますが、エッジケースはまだ存在します。古いImageMagickビルドの中には、低品質なAVIF出力を生成するものがあります。一部のCDNはAVIFトランスコードに追加料金を課します。レガシーCMS、限られた予算、厳しい締め切りといった制約のある環境で作業しているなら、WebPがもっとも抵抗の少ない道です。

最後に、WebPはほぼすべての場合でJPEGより小さく、リアルタイム用途に十分な速度でエンコードできます。現在の基準がJPEGで、まだモダンなフォーマットへ移行していないなら、WebPはより安全な最初の一歩です。AVIFは後から段階的な拡張として追加できます。

実務向けの判断ツリー

選び方は次のとおりです。

• キュレーション済みのマーケティング画像、ヒーロー画像、編集用写真: AVIFを主要フォーマットとして使い、最初のフォールバックにWebP、最後のフォールバックにJPEGを用意します。ファイルサイズ削減はエンコードコストに見合い、パイプラインも自分で管理できます。
• リアルタイムにアップロードされるユーザー生成コンテンツ: WebPを使います。最後の20%の圧縮効率よりエンコード速度のほうが重要であり、数秒単位の遅延は許容できません。
• イラスト、ベタ塗りのグラフィック、スクリーンショット: AVIFはWebPより優れていますが、大きなベタ面を持つ単純なグラフィックではPNGも競争力があります。両方をテストしてください。PNGがすでに小さく、よく圧縮できているなら、フォーマット移行に見合わないこともあります。
• サムネイルや小さな画像: 通常はWebPで十分です。AVIFによる絶対的なバイト削減は小さく（10KBのWebPが8KBのAVIFになる程度）、規模が大きいほどエンコード速度のほうが重要になります。
• レガシーブラウザ対応が重要: WebPを主要なモダンフォーマットとして使い続けます。AVIFの95%という対応率は優秀ですが、古い端末やエンタープライズ環境のユーザーが多い場合、ほぼ普遍的に対応しているWebPのほうが安全です。

迷う場合、もっとも安全なパターンは、対応ブラウザにはAVIFを配信し、WebPのフォールバックとJPEGの最終フォールバックを用意することです。<picture>要素を使えば簡単です。

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

この方法なら、両方の利点を得られます。モダンブラウザには最大限の圧縮を、古いブラウザには安全なフォールバックを提供できます。

重要なエンコード設定

AVIFを採用する場合、エンコード設定はWebPの場合より出力品質に大きく影響します。AVIFの柔軟性は、悪い結果を作ってしまう経路が多いことも意味します。

もっとも重要な設定は、qualityとspeedの2つです。qualityは分かりやすく、数値が高いほど見た目が良くなり、ファイルは大きくなります。AVIFでは、写真コンテンツの場合、quality設定は75〜85あたりが通常のスイートスポットです。70を下回ると、目に見えるアーティファクトが出始めます。90を超えると、品質向上が実質的にないままファイルサイズが膨らみます。

speedは、エンコーダーが出力の最適化にどれだけ時間をかけるかを制御します。遅いエンコードほどファイルは小さくなりますが、効果はすぐに逓減します。多くのエンコーダーは0〜10のスケールを使い、0がもっとも遅く、10がもっとも速い設定です。speed設定は6〜8がよい妥協点です。バッチ処理には十分速く、ファイルサイズも理論上の最小値から10〜15%以内に収まります。

サーバー上でAVIFをエンコードするなら、最近のバージョンのlibavifまたはavifencを使ってください。古いエンコーダー（2024年以前）は、同じファイルサイズでも明らかに劣る出力を生成します。このフォーマットはまだ成熟途上であり、エンコーダーの改善は大きく進んでいます。

JPEG XLはどうか

JPEG XLは、技術的にはAVIFとWebPの両方より優れています。より高く圧縮でき、より速くエンコードでき、可逆圧縮をサポートし、より幅広い画像タイプを扱えます。ただし、死んだフォーマットでもあります。

Googleは2022年に、採用の少なさと複雑さを理由にChromeからJPEG XLサポートを削除しました。Appleはサポートを追加しませんでした。2026年時点で、JPEG XLをサポートしているのはFirefoxとSafari Technology Previewだけです。つまり、本番利用には向きません。ブラウザベンダーが方針を転換しない限り（その可能性は低いでしょう）、JPEG XLはWeb向けではなく、愛好家やアーカイブ用途のフォーマットにとどまります。

移行パス

JPEGからモダンフォーマットへ移行する場合、もっとも安全な道筋は次のとおりです。

1. 現在の画像パイプラインを監査する。画像がどこから来るのか（CMS、ユーザーアップロード、CDN）、どのように処理されているのか、現在どのフォーマットを配信しているのかを確認します。ブラウザ内で画像を処理することがプライバシー面で有利な理由では、画像処理をどこで行うかに関するトレードオフの一部を扱っています。
2. WebPから始める。エンコードが速く、広くサポートされており、すぐにファイルサイズを削減できます。低リスクな最初の一歩です。
3. キュレーション済みコンテンツにAVIFを追加する。WebPが安定して動くようになったら、ファイルサイズがもっとも重要な高価値画像にAVIFを追加します。エンコード時間をテストし、CDNまたは画像サービスが対応していることを確認してください。
4. ブラウザ対応を監視する。AVIFの対応状況は現在優れていますが、分析データで古いブラウザのユーザーが無視できない割合を占めているなら、WebPを主要フォーマットとして維持します。
5. 影響を測定する。移行前後で、リアルユーザーモニタリングを使ってページ読み込み時間とLargest Contentful Paintを追跡します。慌てずにLighthouseレポートを読む方法は、パフォーマンス指標を解釈するための有用なガイドです。

目的は、新しいからという理由で最新フォーマットを使うことではありません。目的は、品質を犠牲にせず、より小さい画像を配信することです。それによりページ速度が向上し、帯域幅コストが下がります。AVIFは多くの場合WebPよりうまくそれを実現しますが、エンコード速度、ツール、ブラウザ対応といった実務上の制約により、一部のワークロードではWebPが依然として正しい選択です。

重要なポイント

• AVIFは同等品質でWebPより20〜30%小さくなります。特に写真コンテンツやグラデーションを含む画像で顕著です。
• AVIFのエンコードはWebPより5〜10倍遅いため、非同期でエンコードしない限り、リアルタイムのユーザーアップロードには実用的ではありません。
• AVIFのブラウザ対応は世界全体で95%を超えていますが、WebPのほぼ普遍的な対応は、より安全なフォールバックになります。
• キュレーション済みのマーケティング画像では、AVIFを主要フォーマットにし、WebPとJPEGのフォールバックを用意します。ユーザー生成コンテンツではWebPを使い続けます。
• JPEG XLは技術的には優れていますが、実用可能なブラウザ対応がなく、本番Webサイトでは使うべきではありません。

FAQ

Q: フォールバックなしでAVIFを配信できますか？

A: まだできません。AVIF対応は95%を超えていますが、それでも古いブラウザを使うユーザーが何百万人も残ります。<picture>要素を使って、必ずWebPまたはJPEGのフォールバックを含めてください。ブラウザは、対応している最適なフォーマットを自動的に選択します。

Q: AVIFは透過に対応していますか？

A: はい。AVIFはアルファチャンネルをサポートしており、透過が必要な場合にPNGの有力な代替になります。通常、ファイルサイズはPNGより小さくなりますが、エンコードは遅くなります。

Q: 既存の画像をすべてAVIFに再エンコードすべきですか？

A: 帯域幅の節約が労力に見合う場合に限ります。まずは、影響がもっとも見えやすい高トラフィックのページと大きな画像から始めてください。低トラフィックのページや小さな画像では、ROIは最小限です。まず新しいコンテンツに集中し、その後、選択的に既存分を補完してください。

Q: AVIFをバッチエンコードする最適なツールは何ですか？

A: avifenc（libavifの一部）が、もっとも広く使われているコマンドラインツールです。GUIツールでは、Squoosh（Webベース）とImageOptim（Mac）がどちらもAVIFに対応しています。多くのモダンなCDNや画像サービス（Cloudflare、Cloudinary、imgix）は、AVIFへ自動的にトランスコードできます。

Q: AVIFはレスポンシブ画像やsrcsetで使えますか？

A: はい。フォーマットのフォールバックには、複数の<source>要素を持つ<picture>要素を使い、レスポンシブなサイズ指定には各<source>内でsrcsetを使います。ブラウザは対応状況とビューポート幅に基づいて、最適なフォーマットとサイズを選びます。

<!-- tool-cta:start -->

💡 お試しください: 自分のアセットで2つの形式を Image Converter を使って比較できます。AVIF と WebP の両方を出力できるため、実際のサイズと品質を測定できます。

<!-- tool-cta:end -->

Sources

• AVIF vs WebP: A Comprehensive Comparison — さまざまな画像タイプにおける圧縮効率と品質設定の詳細な分析。
• Can I use AVIF? — AVIF画像フォーマットの現在のブラウザ対応データ。
• libavif GitHub repository — AVIFのリファレンスエンコーダー実装とドキュメント。
• Web Almanac: Images — Web全体における画像フォーマット採用状況とパフォーマンスに関する年次レポート。