すべての記事
解説2026/04/24

AVIF とは？次世代画像フォーマットの完全ガイド

AVIF は WebP や JPEG より小さく高画質な、次世代の画像形式。仕組みと対応状況、いつ使うべきかを分かりやすく解説します。

AVIF はブラウザの幅広いサポートを得た最新の画像形式で、旧来のフォーマットを大きく上回る圧縮効率が魅力です。「最近 .avif というファイルをよく見るけれど、これは何？」という方に向けて、要点を整理しました。

AVIF とは

AVIF は AV1 Image File Format の略で、Alliance for Open Media（Google・Apple・Mozilla・Netflix・Amazon などが参加）が策定した動画コーデック AV1 をベースにした画像形式です。

正式な標準化は 2019 年、ブラウザ側の広範な対応は 2022〜2023 年に達成されました。

AVIF と JPG・WebP の違い

AVIF の最大の利点は圧縮効率です。同じ視覚品質なら、AVIF のファイルは概ね次のサイズになります。

  • JPEG より約 50% 軽量
  • WebP より約 20% 軽量

つまり、画質を落とさずに表示速度と帯域コストを大きく改善できます。

JPEGWebPAVIF
圧縮方式非可逆可逆 / 非可逆可逆 / 非可逆
透過×〇〇
HDR 対応××〇
ファイルサイズ（同画質）最大中最小
ブラウザ対応全環境約 97%約 95%

AVIF は完全 alpha 透過（PNG・WebP と同等）と HDR・広色域に対応しており、これらは JPEG では扱えません。

ブラウザ対応状況

2024 年時点で AVIF をサポートするブラウザ：

  • Chrome 85 以降
  • Firefox 93 以降
  • Safari 16 以降
  • Edge 121 以降

旧ブラウザ向けには、HTML の <picture> 要素で AVIF の後に JPEG / WebP のフォールバックを置くのが定番です：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="...">
</picture>

AVIF を使うべき場面

AVIF が向くケース：

  • Web サイトを構築・最適化中で、画像をできる限り軽量化したい
  • ビルドパイプラインが AVIF を自動生成できる（Next.js、Astro、Cloudflare Images、各種 CDN が対応）
  • 商品画像、ヒーロー画像、表示速度に直結する画像を配信している

JPG・WebP のままで良いケース：

  • フォールバックを書かずに広く対応させたい
  • メール、メッセージアプリ、AVIF 非対応ソフトを通じた共有が前提
  • エンコード速度を優先したい（AVIF のエンコードは JPEG より大幅に遅い）

AVIF の相互変換

すべてブラウザ内で処理し、ファイルはアップロードされません：

すべての記事