WebP vs AVIF：2026年にどちらを使うべきか

AVIFは同等の画質でWebPより20〜30%小さいファイルを生成しますが、WebPはエンコードが速くブラウザサポートも若干広い（97%対95%）です。2026年のほとんどのウェブサイトにとって最適な答えは、AVIFをメインフォーマットとして配信しWebPをフォールバックとして組み合わせることです。以下で詳しく見ていきましょう。

2つのフォーマットの概要

WebPとAVIFはどちらも動画コーデックから生まれました。Googleは2010年にVP8（WebMビデオフォーマットと同じ技術）をベースにWebPをリリースしました。Open Media Allianceは2019年に、Google、Mozilla、Apple、Netflixなどが共同開発した新世代ビデオコーデックAV1をベースにAVIFをリリースしました。

この世代差が重要です。AV1はVP8が持っていなかった10年分の圧縮研究を取り込んで設計されており、それがAVIFが一貫して小さいファイルを生成できる理由です。一方、VP8のシンプルなアルゴリズムのおかげでWebPはエンコードとデコードが速く、実際の処理パイプラインではこのトレードオフが依然として重要な意味を持ちます。

圧縮率：ファイルサイズの差

数値は画像の種類によって異なりますが、傾向は一貫しています。SSIM指標で同等の視覚的品質を基準にした比較では次のとおりです。

• AVIF——元のJPEGと比べた中央値ファイルサイズ削減率は約50%
• WebP——同じJPEGと比べた中央値削減率は約30%

つまり知覚品質が同等の場合、AVIFはWebPより約20〜30%小さくなります。実例として、1 MBのJPEG写真はWebPで約700 KB、AVIFで約500 KBになります。商品画像が10枚あるページでは、この差は無視できないほどの帯域幅節約になります。

非写真系の画像ではこの差は縮まります。フラットカラーのシンプルなグラフィック、アイコン、イラストでは両フォーマットの差は小さくなります。こういったアセットでは、WebPの可逆モードがAVIFの可逆モードと十分に競争できることが多いです。

なお、Cloudflare、AWS CloudFront、AkamaiといったCDNはいずれも自動コンテントネゴシエーションに対応しており、ブラウザのAcceptヘッダーに応じてAVIFまたはWebPを自動で配信できます。日本国内で多く使われるCDNも同様の機能を提供しているため、手動でのフォーマット切り替えを実装せずに済みます。

ブラウザサポート（2026年）

2%の差は主に、iOS 15以前やmacOS Monterey以前に留まっている古いSafariユーザーと、一部の古いAndroidブラウザによるものです。ほとんどのオーディエンスにはフォールバックなしで両フォーマットを配信できます。確実に対応したい場合は、<picture>要素でAVIF優先・WebPフォールバック・JPEGフォールバックの順に記述できます。

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="説明文" />
</picture>

エンコード速度とツールサポート

この点ではWebPに明確な優位性があります。WebPのエンコードはAVIFより著しく速く、デフォルト設定では同じ画像で5〜10倍速いことも珍しくありません。CMSで画像アップロード時に変換を行う場合や、大量の商品写真をバッチ処理する場合、この速度差は実際の時間節約につながります。

AVIFのエンコード速度はリリース以来大幅に改善されていますが、WebPのスループットにはまだ及びません。デコードはより近い水準で、WebPの方が数ミリ秒速いですが、ユーザーが体感できるほどの差ではありません。

ツールのサポートについては、現在は両フォーマットとも充実しています。Adobe PhotoshopはPhotoshop 2023からAVIFネイティブサポートを追加しました。WordPress、Cloudflare、Fastlyをはじめとする主要CDNは自動コンテントネゴシエーションで両フォーマットを処理できます。

機能比較

圧縮以外でのAVIFの際立った優位点はHDRと広色域への対応です。AVIFは10ビット・12ビットの色深度とHDRメタデータ（PQ、HLG）をサポートしており、WebPでは物理的に表現できない色域を扱えます。写真系サイト、色精度が重要な商品を扱うECサイト、その他カラーアキュラシーが求められる場面では、これは本物の差別化要素になります。

どちらを使うべきか

AVIFを選ぶべき場合：

• 画像パイプラインを管理でき、フォールバックを配信できる場合
• Core Web Vitals（LCPなど）のパフォーマンスが重要で、毎KBが重要な場合
• HDRや広色域のサポートが必要な場合
• CDNが自動フォーマットネゴシエーションを処理してくれる場合

WebPを選ぶべき場合：

• エンコード速度が重要な場合（大規模バッチ処理、リアルタイムアップロード）
• フォールバックロジックなしでできるだけ広い互換性が必要な場合
• 画像の大部分がシンプルなグラフィックで、AVIFの圧縮優位が最小限な場合
• すでにWebPを配信しており、移行コストが見合わない場合

両方を使う（推奨）：<picture>要素を使ったアプローチは実装の複雑さをほぼ増やさず、すべての訪問者にブラウザが処理できる最小のファイルを届けられます。CloudflareなどのCDNはこれを完全に自動化しており、1枚の画像をアップロードするだけで訪問者のAcceptヘッダーに基づいて最適なフォーマットを自動配信します。

画像の変換方法

両フォーマットへの変換はブラウザ上で直接行えます。サーバーへのアップロードも、ソフトウェアのインストールも不要です。Vizuaのツールはブラウザ内の最適化アルゴリズムを使ってすべてのファイルをデバイス上でローカル処理します。

• WebP圧縮——既存のWebPファイルのサイズを削減します
• AVIFに変換——あらゆる画像からAVIFを作成します
• JPGからWebP——JPEG写真をWebPに変換します
• PNGからWebP——PNGグラフィックをWebPに変換します

圧縮全般のトレードオフについては画質を保ったまま圧縮する方法のガイドで各フォーマットの最適な品質設定を解説しています。

よくある質問