先に要点
- AVIF (AV1 Image File Format) は AOMedia が開発した AV1 動画コーデックの 1 フレームを画像として保存する形式。JPEG 比で 50% 前後、WebP 比でもさらに 20〜30% 小さくなる強力な圧縮性能を持ち、ロイヤリティフリーで配信できる。
- 2026 年時点で Chrome / Edge / Firefox / Safari / iOS / Android / macOS / Windows の主要環境がほぼ全対応済み。caniuse のグローバルサポートは 95% を超え、もう「対応待ち」のフォーマットではなく実用段階。
- 強みは 高圧縮 + 透過(alpha)対応 + HDR / 広色域対応 + アニメーション対応。`
` 要素で WebP / JPEG にフォールバックすれば 未対応環境を安全にカバーできる。 - 弱みは エンコード時間が遅い(JPEG の数十倍)、編集ツール対応がまだ薄い、サムネ表示やプレビューで一部古い OS / 古いソフトが扱えない。CI/CD でビルド時に変換、CDN でオンザフライ変換が現実的。
- 判断軸: 「写真系の大きな画像 → AVIF が最有利」「アイコン / 小さい画像 → 圧縮率の差が小さく WebP で十分」「編集環境やレガシー互換が重要 → JPEG / PNG のまま」。CDN(Cloudflare Polish / Vercel Image Optimization / AWS CloudFront + Lambda@Edge)に変換を任せると運用が楽。
「Web ページの表示速度を上げたい」「画像が重くてサイトが遅い」── 画像最適化は Web パフォーマンス改善の最初の打ち手で、フォーマット選びがそのまま体験に直結します。
AVIF は 2019 年に標準化された比較的新しい画像フォーマットで、「JPEG より大幅に軽く、WebP よりさらに軽い」 圧縮性能で注目されています。2022〜2024 年は「サポートがまだ薄い」フェーズでしたが、2026 年時点では 主要環境ほぼ全対応 になり、もう実用段階に入っています。
この記事では、AVIF の 仕組み・WebP / JPEG との違い・対応状況・実装方法・移行戦略 を実務目線で整理します。WebP との比較は WebP とは — JPEG / PNG との違い も併読してください。
AVIF とは — まず一言で
AVIF は 「AV1 動画コーデックを画像 1 枚に応用したフォーマット」 です。AV1 は Netflix / YouTube / Google などが参加する AOMedia(Alliance for Open Media)が開発した動画コーデックで、その圧縮アルゴリズムを画像に転用したのが AVIF。
由来と歴史
2019 年に AOMedia が仕様を公開、Mozilla / Google が支持。AV1 のキーフレーム圧縮を 1 枚画像に応用した形で、動画圧縮の高度な技術がそのまま使える。
圧縮の強さ
JPEG 比で 同等画質なら 50% 前後、WebP 比でも さらに 20〜30% 小さくなる。写真系の大きな画像ほど効果が出やすく、サイト全体の画像トラフィックを 30〜50% 減らせる 事例が多い。
機能セット
透過(alpha チャンネル)・HDR・広色域 (Rec. 2020 / Display P3)・アニメーション をすべてサポート。`WebP の上位互換` に近い機能セット。
ロイヤリティフリー
AV1 はオープンなライセンスで開発されており、商用利用でもロイヤリティが発生しない。HEVC(動画版 H.265)に対する代替として広く採用が進んだ流れの一部。
WebP / JPEG / PNG との比較
主要フォーマットを 1 表で整理します。
| 項目 | AVIF | WebP | JPEG | PNG |
|---|---|---|---|---|
| 登場年 | 2019 | 2010 | 1992 | 1996 |
| 由来コーデック | AV1(動画) | VP8(動画) | 独自(DCT ベース) | 独自(ロスレス) |
| 圧縮率(JPEG 比) | 約 50% 削減 | 約 25〜35% 削減 | 基準 | —(ロスレス) |
| 非可逆 / 可逆 | 両対応 | 両対応 | 非可逆のみ | 可逆のみ |
| 透過(alpha) | ○ | ○ | × | ○ |
| アニメーション | ○ | ○ | × | ×(APNG 別形式) |
| HDR / 広色域 | ○ | △(限定的) | △(JPEG XL で対応進む) | 限定的 |
| ブラウザ対応 | 主要ブラウザ全対応(2024〜) | 主要ブラウザ全対応 | すべて対応 | すべて対応 |
| エンコード速度 | 遅い(JPEG の数十倍) | 中 | 速い | 中 |
「圧縮率は AVIF が最強、編集ツールサポートは JPEG / PNG が最強、バランスを取るなら WebP」というのが大雑把な力学です。
2026 年の対応状況
もうほぼ対応している と言える状況。caniuse のグローバルサポートは 95% を超えています。
ブラウザ
Chrome 85+ / Edge 121+ / Firefox 93+ / Safari 16+(iOS 16+) がすべて対応。古い Safari(macOS 12 以前)や Internet Explorer などのレガシー環境だけ AVIF を読めない。
OS のサムネ表示
macOS 13+ / Windows 11(コーデック追加) / iOS 16+ / Android 12+ がプレビュー可能。Windows 10 はデフォルトで AVIF プレビュー不可(コーデックを Microsoft Store からインストール必要)で、ユーザー環境次第。
編集ツール
Photoshop は 2023 年から正式対応、Figma / Canva / Affinity も対応。古い画像編集ソフトでは開けない ので、`元データは JPEG / PNG で保存して配信時だけ AVIF に変換` の運用が安全。
CDN / 画像最適化サービス
Cloudflare Polish / Vercel Image Optimization / AWS CloudFront + Lambda@Edge / Cloudinary / imgix などが オンザフライ変換 に対応。`CDN に任せて元データは触らない` のが現代の運用。
実装方法 — picture 要素でフォールバック
ブラウザに合わせてフォーマットを切り替えるには、HTML の <picture> 要素を使うのが定石です。
<picture> の中で <source> を上から評価し、対応していれば AVIF、なければ WebP、最後の <img> が JPEG フォールバック。これだけで 全ブラウザを安全にカバーできます。
変換ツール
AVIF への変換にはいくつかの選択肢があります。
libavif の `avifenc` コマンド が公式。`avifenc input.jpg output.avif --min 30 --max 40` のように品質指定。CI/CD で大量変換する場合の基本。
画像処理ライブラリ
Sharp(Node.js) は `sharp(input).avif({ quality: 60 }).toFile(out)` のように書ける。Pillow(Python) は `Image.open(input).save(out, "AVIF", quality=60)` で出力。ImageMagick も対応している。アプリ内で動的変換するなら Sharp が圧倒的に速い。
CDN オンザフライ変換
Cloudflare Polish / Vercel Image Optimization / Cloudinary / imgix が ユーザーの Accept ヘッダを見て自動でフォーマットを選択。`元画像 1 枚を置くだけで AVIF / WebP / JPEG が動的に出る`。運用負荷ゼロで現代的。
エンコード設定の目安
AVIF は 圧縮率 vs エンコード時間 vs 品質 のトレードオフがあるので、用途別に設定を変えます。
| 用途 | quality(Sharp) | --min / --max(avifenc) | 備考 |
|---|---|---|---|
| サムネ・小さい画像 | 40〜50 | min 30 / max 50 | サイズ最小化重視 |
| 記事内の写真 | 55〜65 | min 25 / max 40 | JPEG quality 80 相当の画質 |
| ヒーロー画像・LP | 70〜80 | min 18 / max 28 | 高画質、サイズ大きめ |
| ロスレス(写真以外) | `lossless: true` | --lossless | PNG 代替、図表・スクリーンショット |
エンコードは 遅い(JPEG の 10〜50 倍) ので、ビルド時に並列化するか、CDN オンザフライ変換に任せるのが実用的。
移行戦略 — JPEG / PNG → AVIF
既存サイトを AVIF 対応にする時のステップを整理します。
まず CDN オンザフライ変換を試して、効果が出るなら本格的にビルドパイプライン化 が、現代的かつ低コストな進め方です。
ハマりやすいポイント
実装で踏みやすい落とし穴を整理します。
Accept ヘッダのキャッシュ事故
CDN が `Accept` ヘッダを Vary に含めないと、AVIF レスポンスが WebP / JPEG 未対応ブラウザに配信される。Cloudflare / CloudFront などは自動でやるが、自前リバースプロキシでは `Vary: Accept` を必ず設定する。
画像編集ソフトで開けない
古い画像編集ソフトは AVIF を開けない。`元データは PNG / JPEG / RAW で保存、配信用に AVIF を生成` の運用にする。AVIF を「編集元データ」にすると、編集できない事故が起きる。
エンコード時間でビルドが遅延
`サイト全体の画像を AVIF に変換` するビルドは時間がかかる。変更があった画像だけ差分変換するか、CDN オンザフライ変換に任せる設計に。
プレビュー対応の差
`Windows 10 ユーザーが AVIF ファイルをダウンロードしたら開けない` ような UX 事故。ダウンロード提供用の画像は JPEG / PNG のままにし、ブラウザ表示用だけ AVIF にする。
AVIF を使うべきか / 使わないべきか
判断の目安を整理します。
AVIF に関するよくある質問
Q. AVIF と WebP、どっち使うべき?
A. 「両方使えるなら AVIF を優先 + WebP フォールバック」が現代の正解。WebP でも十分軽いケースが多いですが、AVIF はさらに 20〜30% 軽くなるので「とにかく軽く」が目的なら AVIF。<picture> で両方並べると、対応ブラウザは AVIF を、未対応は WebP を使ってくれます。
Q. AVIF のエンコードが遅いのは何とかなりますか?
A. 「ビルド時に並列化」「CDN オンザフライ変換に任せる」「差分変換」 で改善できます。avifenc には --speed オプションがあり、--speed 8 のような速い設定にすればエンコード時間が大幅に短縮されますが、ファイルサイズは少し大きくなります。バランスを見ながら調整。
Q. AVIF と JPEG XL(JXL)の関係は?
A. JPEG XL は別の次世代フォーマット候補です。Mozilla / Apple が支持、Google が一度サポートを撤退してから 2024 年に方針転換。2026 年時点では AVIF のほうが対応環境が広いので、既に AVIF が動いている場合は JXL を急いで追加する必要は薄い。JXL は JPEG の可逆変換 ができるユニーク機能があり、将来的に注目される可能性。
Q. AVIF を導入したら SEO に影響しますか?
A. 「LCP の改善で間接的に SEO に効く」のがメイン効果。Web パフォーマンスは Core Web Vitals としてランキング要素』 なので、画像が軽くなって LCP が改善すれば検索順位にもプラス。AVIF というフォーマット自体を Google が優先する` ことはありません。
Q. SVG と AVIF はどう使い分けますか?
A. 「アイコン / ロゴ / 図表 → SVG、写真 / 複雑な画像 → AVIF」が基本。SVG は ベクター(拡大しても劣化しない) ので UI 要素向け、AVIF は ラスター(写真向け)。写真と SVG は競合しない ので、両方を適材適所で使う。
Q. WordPress や CMS でも使えますか?
A. 「使える(プラグイン経由)」。WordPress は 5.8 以降が AVIF アップロードをサポート、Smush / Imagify / ShortPixel のような画像最適化プラグインが自動で AVIF / WebP に変換してくれます。オリジナルは JPEG / PNG のまま、配信時に AVIF / WebP を自動生成 が定番。
Q. AVIF をメール添付や SNS 投稿に使ってよい?
A. 「Web 配信用に限定」が無難。メールクライアントや SNS の画像処理は AVIF 対応がまだ完全ではないため、相手が開けない / プレビューできない』 事故が起きやすい。SNS / メールには JPEG / PNG / WebP に変換してから添付` するほうが安全。
まとめ
AVIF は 「JPEG / WebP より大幅に軽い次世代画像フォーマット」として、2026 年時点で実用段階に入りました。`Web 配信のバイト数を 30〜50% 減らせる』 効果があり、LCP 改善や帯域コスト削減に直結します。
<picture> 要素で WebP / JPEG にフォールバックすれば未対応環境を安全にカバーできるので、「AVIF を導入できない理由」はほぼ無くなった状態。CDN オンザフライ変換(Cloudflare / Vercel / Cloudinary)に任せれば運用負荷ゼロで導入できるので、「まず CDN で試して効果を測る → 効果が出ればビルドパイプラインに組み込む」の流れが現代的なアプローチです。
参考リンク
- AOMedia: AV1 Image File Format (AVIF) Specification
- caniuse: AVIF image format
- MDN: AVIF 画像フォーマット
- Google: WebP 公式
- libavif: AOMediaCodec / libavif