WebPとAVIF：適切な画像形式を選び、検証する方法
画像や品質目標によってはAVIFがWebPを上回りますが、WebPはエンコードが速く、従来の幅広いワークフローに合う場合があります。拡張子だけでは結果は保証されません。代表的な出力、互換性、パイプライン費用を比較し、利用者に必要なフォールバックを用意してください。
2つのフォーマットの概要
WebPもAVIFも、動画コーデックを起源に持つ画像フォーマットです。Googleは2010年に、WebMビデオと同じVP8技術をベースとしたWebPをリリースしました。Alliance for Open Mediaは2019年に、Google・Mozilla・Apple・Netflixなどが共同開発したより新しい動画コーデックAV1をベースとしたAVIFをリリースしました。
AV1で利用できる新しい符号化手法は圧縮を改善できます。一方、より単純で成熟したWebP実装は処理負荷を減らせる場合があります。実際のエンコードとデコードは、コーデック実装、設定、画像の特徴、端末に左右されます。
圧縮率：どれだけファイルが小さくなるか
ベンチマーク結果は、画像集合、エンコーダ、処理量設定、元画像の履歴、品質指標によって変わります。適切なテストでは、寸法とメタデータ方針をそろえ、複数の視覚指標と人による確認を組み合わせます。
- AVIF — 写真、グラデーション、HDR、高ビット深度のワークフローで良い結果を出せますが、エンコード負荷が高い場合があります
- WebP — 成熟したツールと比較的低い運用の複雑さで、効率的な非可逆・可逆出力が可能です
形式の宣伝上の平均値を個々のファイルの予測に使わないでください。同じマスターから両方を書き出し、同程度の見た目にそろえ、エンコード時間、デコード挙動、メタデータ、フォールバック転送も判断に含めます。
写真以外の素材は写真ベンチマークと異なる結果になることがあります。単純な図形、アイコン、平坦なイラストでは、対応する可逆または準可逆の候補を比較してください。パレット、アルファ、エンコーダ、設定によってどちらも勝ち得ます。
ブラウザとソフトウェアの対応
| ブラウザ | WebPの状況 | AVIFの状況 |
|---|---|---|
| Chrome | 現行版で対応 | 現行版で対応 |
| Firefox | 現行版で対応 | 現行版で対応 |
| Safari | 現行版で対応 | 現行版で対応 |
| Edge | 現行版で対応 | 現行版で対応 |
| Samsung Internet | 現行版で対応 | 対象バージョンと端末を確認 |
| その他の受信側 | WebView、メール、ボット、アプリを確認 | WebView、メール、ボット、アプリを確認 |
対応表は変化し、世界シェアが自分の利用者構成と同じとは限りません。対象ブラウザとブラウザ以外の受信側を確認してください。<picture>要素ではAVIF、WebPの順に提示し、最後の<img>をJPEGのフォールバックにできます。
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="説明文" />
</picture>エンコード速度とツール対応
同程度の処理量設定ではWebPエンコーダの計算負荷がAVIFより低いことが多いものの、比率は大きく変わります。CMSがアップロード時や大量処理で変換するなら、実際に使うライブラリと設定で処理量、メモリ、待ち時間、出力品質を測ってください。
エンコーダ性能はライブラリやバージョンで変わります。デコード負荷も寸法、ビット深度、端末、ブラウザ、実装に依存します。差が分からないと決めつけず、対象となる低性能端末でもテストしてください。
ツールの対応は広いものの均一ではありません。実際に使う編集ソフト、CMS、CDNプラン、ブラウザ環境で、読み込み、書き出し、アニメーション、色プロファイル、メタデータ、自動ネゴシエーションを確認してください。
機能比較
| 機能 | WebP | AVIF |
|---|---|---|
| 非可逆圧縮 | あり（VP8） | 対応（AV1）。相対的な容量は変動 |
| 可逆圧縮 | あり | あり |
| 透過（アルファ） | あり | あり |
| アニメーション | あり | あり |
| 高ビット深度／HDR信号 | 基本のWebP符号化は8ビット。プロファイルも色に影響 | AVIFプロファイルは高いビット深度とHDR関連メタデータを格納可能 |
| 最大解像度 | 文書化された上限は16383 × 16383 | プロファイル、コンテナ、デコーダの制限が適用 |
| エンコード速度 | 負荷が低いことが多い | 負荷が高いことが多い。使用するエンコーダを測定 |
| デコード速度 | 実装に依存 | 実装に依存 |
| ブラウザ対応 | 現在の主要ブラウザ | 現在の主要ブラウザ。古い対象を確認 |
AVIFはWebPの8ビット符号化を超えるビット深度、広色域、HDR信号を表現できます。ただし、それだけで色の正確さは保証されません。マスタリング、プロファイル、メタデータ、ブラウザ挙動、画面性能、検証が必要です。
どちらを選ぶべきか
AVIFを選ぶべき場面：
- 画像パイプラインを管理しており、フォールバックを配信できる環境がある
- 代表的なAVIF出力が、転送量または品質の重要なボトルネックを改善する
- 高ビット深度やHDRなどのAVIF機能が必要で、色の経路全体を検証している
- CDNやビルド工程が検証済みの派生画像を正しく生成、キャッシュ、選択する
WebPを選ぶべき場面：
- 実測したエンコーダ処理量または運用の簡単さでWebPが有利になる
- 対応クライアントがWebPを受け付け、追加のAVIF派生画像に根拠がない
- 代表的な図版がWebPで容量と品質の目標を満たす
- すでにWebPで配信しており、移行コストが効果に見合わない
実測した利点が作業に見合う場合は両方を使う：
<picture>の構成は、生成、保存、キャッシュ、マークアップ、品質確認の作業を増やしますが、配信を改善できる場合があります。CDNが自動化していても、プランの動作、キャッシュキー、Varyの扱い、品質設定、フォールバック出力を確認し、「最適」と決めつけないでください。
画像を変換する
Vizuaは、ソフトをインストールせずブラウザ内で対応するWebPとAVIFを生成できます。選択したファイルは当サイトの画像処理サーバーへ送信されませんが、必要なコードやサイトサービスは通信を使う場合があります。
- WebP圧縮 — 既存のWebPファイルを圧縮
- AVIFに変換 — 対応する入力画像からAVIFを作成
- JPGからWebP — JPEG写真をWebPに変換
- PNGからWebP — PNGグラフィックをWebPに変換
JPEGを元に作業する場合は、画質を保ちながら画像を圧縮する方法で、開始設定の選び方と実際の出力の比較方法を確認してください。
よくある質問
WebPのフォールバックなしでAVIFを使えますか？
対応対象の利用者と関連するすべての受信側がAVIFをデコードできる場合に限ります。現在の主要ブラウザは対応していますが、古いブラウザ、組み込みWebView、メールクライアント、ボット、編集ソフト、後段システムは異なることがあります。幅広い配信が必要なら、picture要素にWebPまたはJPEGのフォールバックを置くのが低コストな保険になります。
ブラウザで速く読み込めるのはどちらですか？
常に勝つ形式はありません。転送量、回線、キャッシュ、デコーダ実装、画像寸法、ビット深度、端末、エンコーダ設定が総時間に影響します。WebPはエンコード負荷が低いことが多く、適切にエンコードしたAVIFは転送バイトを減らせる場合があります。デコード差を無視できると決めつけず、対象端末で代表的なファイルを測定してください。
JPEGをAVIFやWebPに変換すると画質が落ちますか？
非可逆形式から別の非可逆形式への変換では、すでに変化した画素を再び符号化するため世代劣化が生じることがあります。高い品質値でも影響が小さいとは限らず、尺度はエンコーダごとに異なります。利用できる最良のマスターから配信用形式を生成し、マスターを保存して出力を確認してください。
画像ライブラリ全体をAVIFに変換すべきですか？
検証なしには勧められません。既存の非可逆ライブラリを変換すると作業と世代劣化が増える可能性があり、節約量も元画像によって変わります。まずマスターからの新規書き出しや代表的な一部で試し、品質と運用コストを比較し、実測した利点が移行に見合わない場合はWebPやJPEGを残してください。