Picovert

AVIFフォーマットとは?仕組みと使用場面

Picovert チーム著2026-05-225分で読了

AVIF(AV1画像ファイルフォーマット)は、Alliance for Open Mediaが開発し2019年にリリースした 最新の画像フォーマットです。効率的な動画ストリーミングの基盤技術であるAV1動画コーデックの 圧縮アルゴリズムを静止画に適用しています。その結果、同等以上の視覚品質でJPEG、PNG、 さらにはWebPよりも大幅に小さいファイルサイズを実現します。2026年現在、AVIFはすべての主要な ブラウザでサポートされており、Web画像最適化の本格的な選択肢となっています。

AVIFの画像圧縮の仕組み

AVIFはAV1コーデックのフレーム内圧縮を使用しており、従来の方式より大幅に高度です:

  • より大きな変換ブロック:AV1は一度に最大128×128ピクセルの領域を分析します (JPEGは8×8を使用)。より大きなブロックはより多くの空間パターンを捉え、 なめらかなグラデーションや広い均一領域のより良い予測を可能にします。
  • 高度な予測モード:50以上の方向予測モードで隣接ブロックからピクセルを 外挿します。JPEGのシンプルなDCTのみのアプローチと比べて優れています。
  • ループフィルターと後処理:コーデックレベルでインループデブロッキングと 制限方向強調フィルターが圧縮アーティファクトを軽減します。
  • 知覚品質最適化:AVIFエンコーダーは生のビット数ではなく知覚品質指標 (SSIM、VMAF)を目標にできるため、同じファイルサイズでより良く見える画像を生成します。

AVIFはロスレスとロッシーの両方の圧縮、アルファチャンネル(透明度)、HDR(ハイダイナミックレンジ)、 広色域、アニメーションシーケンスをサポートしています。

AVIF vs WebP vs JPEG — ファイルサイズ比較

視覚的に同等の品質での代表的な画像の概算ファイルサイズ:

  • 写真(同等品質):AVIF ≈ 300 KB | WebP ≈ 400 KB | JPEG ≈ 550 KB | PNG ≈ 2 MB
  • 透明度のあるロゴ:AVIF(ロスレス)≈ 22 KB | WebP(ロスレス)≈ 30 KB | PNG ≈ 45 KB
  • 短いアニメーション(3秒):アニメーションAVIF ≈ 200 KB | アニメーションWebP ≈ 300 KB | GIF ≈ 2 MB

これらは近似値です — 実際の削減量は画像コンテンツによって異なります。AVIFの優位性は 複雑なグラデーションを持つ写真で最も大きくなります。シンプルな単色グラフィックは差が小さいです。

AVIFのブラウザサポート

2026年現在、AVIFは幅広いブラウザサポートを持ちます:

  • 完全サポート:Chrome 85+、Firefox 93+、Safari 16+、Edge 121+、 Opera 71+、Chrome Android、Safari iOS 16+
  • 非サポート:Internet Explorer(もはや関連なし)、一部の古い Android WebView、Officeアプリケーション
  • 部分的/低速デコード:古いデバイスはAVIFを表示できますが、 デコードが遅い場合があります。重要なパス画像はフォールバックを保持してください。

SafariはバージョN16(2022年末)でAVIFサポートを追加しました。2026年現在、Safari 16+は アクティブなSafari使用量の大部分を占めており、ほとんどのWebプロジェクトでAVIFを 安全に使用できます。

AVIF vs WebP — どちらを使うべきか?

どちらもWeb利用においてJPEGより優れています。主な違い:

  • ファイルサイズ:AVIFは同等品質で通常WebPより20〜30%小さくなります。 帯域幅が制限されているユーザーには重要です。
  • エンコード速度:AVIFエンコードはWebPより遅いです — 高品質設定では 大幅に遅くなる場合があります。リアルタイム画像CDNでは重要な問題です。
  • ブラウザ互換性:WebPのサポートは若干広め(Chrome 32+、Safari 14+)。 AVIFはChrome 85+とSafari 16+が必要です。2026年のほとんどのサイトでは、 どちらも安全に使用できます。
  • ツールサポート:WebPはより良いツールカバレッジを持ちます — より多くの 画像エディター、CDN、ビルドパイプラインがWebPをネイティブサポートしています。 AVIFサポートは改善されていますが、まだ普遍的ではありません。

推奨:最大圧縮が重要でエンコード時間が許容される場合にAVIFを使用してください (静的アセット、事前ビルド済み画像)。エンコード速度やより広い互換性が優先される場合はWebPを使用してください。

AVIFを使うべき場面

  • Webサイトのヒーロー画像と商品写真:AVIFの優れた圧縮はLCP(最大コンテンツフルペイント) 時間を短縮し、Core Web Vitalsスコアを直接向上させます。
  • Next.jsと現代のフレームワーク:Next.jsのnext/imageは ブラウザがサポートしている場合に自動的にAVIFを提供します(next.config.jsで formats: ['image/avif', 'image/webp']として設定)。
  • ECサイトの商品画像:大規模なカタログは小さなファイルサイズから最も恩恵を 受けます — 1画像あたりより少ないバイトが何千もの商品にわたって積み重なります。
  • HDRと広色域コンテンツ:AVIFはネイティブで10ビットと12ビットの色深度を サポートしており、HDR写真をうまく処理できる唯一の一般的なWebフォーマットです。

AVIFを使うべきでない場面

  • メール:メールクライアントはAVIFをレンダリングしません。メール画像には JPGまたはPNGを使用してください。
  • Officeドキュメント:Word、PowerPoint、ExcelはAVIFの挿入を サポートしていません。PNGまたはJPGを使用してください。
  • ソーシャルメディアへのアップロード:Instagram、Twitter/X、Facebook、 LinkedInはアップロードされた画像を内部的にJPEGに変換します。二重圧縮を避けるために JPGを直接アップロードしてください。
  • 画像編集ワークフロー:AVIFを作業ファイルフォーマットとして使用しないでください。 オリジナルはTIFFまたはPSDで保存し、最終的なWeb配信のためだけにAVIFにエクスポートしてください。
  • パフォーマンスに敏感なオンザフライ生成:AVIFエンコードはCPU集約的です。 リクエスト時にサーバーサイドで画像を生成する場合、WebPまたはJPGの方が実用的かもしれません。

画像をAVIFに変換する方法

ブラウザで無料で任意の画像をAVIFに変換できます:

すべての変換はブラウザで実行されます — サーバーには何もアップロードされません。

AVIFを他のフォーマットに変換する方法

AVIFファイルを受け取り、より互換性の高いフォーマットが必要な場合:

AVIFはどのファイル拡張子を使いますか?

AVIFファイルは.avif拡張子とMIMEタイプimage/avifを使用します。.jpg.pngに名前を変更することはできません — ファイルフォーマットが 異なり、名前の変更はファイルを破損させるだけです。実際に変換する必要があります。

AVIF vs JPEG XL — 違いは何か?

JPEG XL(JXL)はAVIFと競合する別の次世代フォーマットです。JPEG XLは既存JPEGのロスレス 再圧縮(アーカイブに有用)、AVIFより速いエンコード、同等の圧縮率を提供します。しかし、 Chromeは2022年にJPEG XLサポートを削除し、ブラウザの採用は限定的なままです。2026年現在、 Web展開においてAVIFはJPEG XLよりはるかに優れたブラウザサポートを持ちます。