Published by @SoNiceInfo at 9/21/2026
WebPとAVIFのどちらを使うべきかの結論は、両方を書き出して<picture>タグで併用することです。 AVIFを第一候補、WebPを第二候補、JPEG/PNGを最終フォールバックに並べれば、対応ブラウザには最も軽い画像を、未対応の環境には従来通りの画像を配信できます。 片方だけに絞るなら、互換性とエンコード速度を重視するならWebP、ファイルサイズの削減幅とHDR・10/12bit深度を重視するならAVIFです。
WebPはGoogleが開発したVP8ベースの画像フォーマット、AVIFはAV1動画コーデックをベースにした画像フォーマットです。 どちらもロスあり・ロスなし圧縮、透過、アニメーションに対応しますが、圧縮効率・色深度・エンコード速度に違いがあります。
| 項目 | JPEG | WebP | AVIF |
|---|---|---|---|
| 圧縮効率 (ロスあり・同画質) | 基準 | 約25〜35%減 | 約50%減 |
| ロスなし圧縮 | 不可 | 可 (PNG比 約26%減) | 可 |
| 透過 / アニメーション | 不可 | 可 | 可 |
| 10bit / 12bit深度 | 不可 | 不可 (8bit) | 可 |
| HDR / 広色域 | 不可 | 限定的 | 完全対応 |
| エンコード速度 | 速い | 速い | かなり遅い |
| 最大サイズ | 65,535 × 65,535 px | 16,383 × 16,383 px | WebPより大きな画像を扱える |
| プログレッシブ表示 | 可 | 不可 | 不可 |
| ブラウザ対応 | すべて | 主要ブラウザすべて (Safariは macOS 11 / iOS 14〜) | 主要ブラウザすべて (Safariは macOS 13 / iOS 16〜) |
圧縮率は公開されている比較調査に基づく目安で、画像の内容とエンコード設定によって変わります。
手元のMacで、1600×1064pxのJPEG写真(230KB)をコマンドラインツールで変換した結果です。
# WebP (cwebp 1.6.0)
cwebp -q 80 in.jpg -o out.webp # 230KB → 112KB
# AVIF (avifenc 1.4.2)
avifenc -q 60 -s 6 in.jpg out.avif # 230KB → 108KBどちらも元のJPEGの半分以下になりました。 ただしこれは1枚の画像での一例で、2つの品質設定は画質を揃えたものではありません。 品質値の意味はエンコーダごとに異なるため、実際のサイトでは変換後の画像を目で見比べて設定を決めるのが確実です。
PNG・JPG・HEIC・GIFをまとめてWebPにしたい場合は、Mac上で一括変換できるWebP一括変換アプリ「WebP Converter.」が無料で始められます。
PNG・JPG・HEICをAVIFへまとめて変換するには、AVIF一括変換アプリ「AVIF Converter.」が使えます。こちらも無料で始められます。
<picture>タグに<source>を上から順に並べると、ブラウザは自分が対応している最初の形式を選びます。 最後の<img>がフォールバックになるため、どの環境でも画像が表示されます。
<picture>
<source type="image/avif" srcset="/images/photo.avif" />
<source type="image/webp" srcset="/images/photo.webp" />
<img src="/images/photo.jpg" alt="写真の説明" width="1600" height="1064" loading="lazy" />
</picture>widthとheightを指定しておくと、読み込み中のレイアウトシフト(CLS)を防げます。 ファーストビューの画像(LCP要素)にはloading="lazy"を付けないでください。
WordPressは5.8からWebP画像、6.5からAVIF画像のアップロードに対応しています。 ただし、すでにアップロード済みのJPEG/PNGが自動で置き換わるわけではないため、既存の画像は別途変換して差し替える必要があります。 AVIFの処理にはサーバー側の画像ライブラリがAVIFに対応している必要があります。
いちばん手早いのはGUIアプリです。画像やフォルダをドラッグ&ドロップするだけで一括変換でき、変換前後の画質を目で確認してから書き出せます。 いずれのアプリも変換はMacの中で行われ、画像をアップロードする必要はありません。
コマンドラインで変換する場合は、Homebrewでcwebpとavifencをインストールできます。
brew install webp libavif手順の詳細は、それぞれの記事にまとめています。
変換はすべてMacの中で完結します
<picture>タグで両方を併用します。商品点数が多いとAVIFのエンコード時間が効いてくるため、大量の商品画像はWebP、キービジュアルや特集画像はAVIF、という分け方が現実的です。両方を書き出して、pictureタグでAVIFを第一候補、WebPを第二候補、JPEG/PNGを最終フォールバックにするのが最も確実です。 片方だけに絞るなら、互換性とエンコード速度を重視する場合はWebP、ファイルサイズの削減幅やHDR・10/12bit深度を重視する場合はAVIFを選びます。
目安として、同等の画質でWebPはJPEG比 約25〜35%減、AVIFはJPEG比 約50%減です。 ただし削減幅は画像の内容とエンコード設定で大きく変わります。写真や滑らかなグラデーションではAVIFが有利になりやすく、小さなアイコンや単純な図ではほとんど差が出ないこともあります。
imgタグにAVIFだけを指定すると、未対応のブラウザでは画像が表示されません。 pictureタグでAVIF・WebP・JPEGの順にsourceを並べておけば、ブラウザは自分が対応している最初の形式を選ぶため、どの環境でも画像が表示されます。
エンコードがWebPやJPEGよりかなり遅いこと、プログレッシブ表示に対応していないこと、古いOSやアプリでは開けない場合があることです。 ビルドのたびに大量の画像を変換するワークフローでは、変換時間が無視できなくなります。
コマンドラインならHomebrewでインストールできるcwebp(WebP)とavifenc(AVIF)が使えます。 GUIでまとめて変換したい場合は、画像をアップロードせずMac上で一括変換できるWebP Converter.、AVIF Converter.、両形式に1本で対応するImage Tool+があります。
<picture>タグで AVIF → WebP → JPEG/PNG の順に併用する。