AVIF 形式の解説 — WebP より 30% 小さい価値を引き出す `<picture>` 運用
Tomoda Hinataツール作者・運営公開 2026年4月26日約7分
AVIF (AV1 Image File Format) は AV1 動画のキーフレーム 1 枚を HEIF コンテナにラップしたもので、同等画質 WebP より 20〜30% 軽量。ただし Outlook デスクトップ、Edge メールクライアント、古い Android Webview、macOS Mail プレビューといった対応ホールが残るため、単独運用ではなく `<picture>` で WebP フォールバックを敷くのが本番運用の作法です。
このガイドで使うツール
AVIF とは技術的に何か?
AVIF は AV1 動画のイントラフレーム (I フレーム) 1 枚を HEIF コンテナ (iPhone HEIC と同じコンテナ) に格納したもの。AV1 は VP9 と HEVC の正統な後継で、Alliance for Open Media がロイヤリティフリーを目的に設計したオープンソースコーデックです。動画クラスのコーデックなので、JPG (1992 年の DCT) や WebP (VP8 由来のイントラモード) より遥かに豊富な圧縮ツールキット (可変ブロックサイズ、洗練された変換、先進エントロピー符号化) を持ち、これが追加の 20〜30% サイズ削減を生み出します。
ブラウザサポート — どこで AVIF は失敗するか
AVIF ネイティブデコードは Chrome 85 (2020)、Firefox 93 (2021)、Safari 16.4 (2023)、Edge 121 (2024) で実装。2026 年時点でグローバルトラフィックの約 92% をカバー。残る 8% は: Outlook デスクトップのメールレンダリング (Word ベース、AVIF デコーダなし)、Microsoft Edge メールプレビュー (同様)、Webview を更新していないアプリの組込ビュー、macOS 13 以前の Mail.app インラインプレビュー、ニッチブラウザと IoT ビューワのロングテール。
`<picture>` フォールバックパターン
本番運用に耐える AVIF は明示的フォールバック付きの `<picture>` の中に置きます: 1 行目 `<source srcset="hero.avif" type="image/avif">`、2 行目 `<source srcset="hero.webp" type="image/webp">`、最後に `<img src="hero.jpg" alt="...">`。ブラウザは上から順に評価し、最初にデコードできるものを使います。`<img>` は全 source 失敗時のレイアウトフォールバックでもあり、モダンブラウザは AVIF、旧ブラウザは WebP、最悪ケースは JPG という三層構造が JS なしで実現します。
AVIF が価値を発揮する場面
3 つの最適点: (1) ヒーロー画像 1KB の節約が LCP を動かす高トラフィックコンテンツサイト。(2) EC の商品ギャラリーで数千点に渡る帯域削減が累積メリットを生む場面。(3) フォトグラフィーポートフォリオで小サイズでの画質が体験価値に直結する場面。逆にやり過ぎになる 3 例: 低トラフィックブログ (エンコードコストが帯域勝ちを上回る)、メールテンプレート (Outlook が見れない)、SNS のスナップショット投稿 (プラットフォーム側で再エンコードされる)。
エンコードコストとビルド時 vs ランタイムの分離
AVIF 品質 60 のエンコード時間は同入力の JPG 品質 82 の約 10 倍。100 枚の商品画像を ワークステーションで 2〜3 分、10 秒予算のエッジ関数では確実にタイムアウト。ビルド時かバックグラウンドジョブで焼き、ユーザーアップロードのクリティカルパスでは絶対に走らせない。逆にデコードは高速 — どのブラウザもエンコード労力に関わらず 50ms 以下でデコードします。
手順
所要時間 約2分原本を選ぶ
可能なら原本 PNG/RAW/TIFF。JPG しかなくても OK — AVIF は WebP より中度の JPEG 入力に強い。
AVIF 変換ツールを開く
ファイルをドロップ。既定の品質 60 が写真で WebP を上回る最適点。
エンコード実行
1 枚あたり 5〜15 秒 — WebP より遅いが cwebp + cavif の CLI インストールよりは速い。
`<picture>` フォールバックを配線
サイト側で AVIF 第一、WebP 第二、JPG を `<img>` ソースに。ブラウザが最初にデコードできるものを選ぶ。
| 形式 | ファイルサイズ | エンコード時間 (M2) | 2026 年ブラウザ対応 |
|---|---|---|---|
| JPG 品質 82 | 245 KB | 0.1 秒 | 100% |
| WebP 品質 82 | 165 KB | 0.4 秒 | 98% |
| AVIF 品質 60 | 115 KB | 4.2 秒 | 92% |
よくある質問
AVIF は透過に対応?
対応 — フルアルファ + 10bit アルファでグラデーションフェードも滑らか。WebP もアルファ対応だが AVIF の方が小さい。
アニメーション AVIF はある?
あります (AVIS = AVIF Image Sequences)。ただしブラウザ対応は静止 AVIF より狭く、現時点のアニメ用途は WebP アニメーションが互換性で勝ちます。
AVIF は HDR 対応?
対応 — 10bit / 12bit AVIF が HDR10 メタデータを運べる。HDR 表示は macOS / iOS の Safari と Chrome に限られる現状。
解像度違いを配信するには?
`<picture>` と各 `<source>` の `srcset` / `sizes` を組み合わせ。ブラウザが形式と解像度を同時に選びます。
AVIF は JPG を置き換える?
予見可能な将来は否 — JPG の万能互換性 (全メール、全プリンタ、全レガシーアプリ) は代替不可。AVIF はハイエンド最適化であって置換ではない。
ブラウザ実行のせいでエンコードが遅い?
違います — AVIF エンコード自体が高コスト。WebAssembly コンパイルされた libavif はネイティブより 10〜20% 遅い程度で、支配的なコストは AV1 コーデック自体。
今すぐ試す
最新のAVIFフォーマットで画像を超軽量化
AVIF 変換ツール