この記事の要点

AVIF（AV1 Image File Format）は動画コーデック AV1 から派生した次世代画像形式 AOMedia（Alliance for Open Media）が 2019 年に仕様確定、ロイヤリティフリー コンテナは HEIF（ISOBMFF ベース）、HEIC と内部構造を共有 WebP より約 20〜50% 小さく、HDR・10bit カラー・広色域に対応 エンコードは重く時間がかかるが、デコードはハードウェア対応で十分高速 Chrome 85+、Firefox 93+、Safari 16+ でサポート、<picture> でフォールバック必須 透過・アニメーション対応、ロスレスも可能で WebP の完全な上位互換に近い

概要

AVIF（AV1 Image File Format、エーブイアイエフ／アヴィフ）は、AOMedia（Alliance for Open Media、Google・Netflix・Microsoft・Mozilla・Apple・Amazon・Intel などが参加するオープン映像技術アライアンス）が開発した動画コーデック AV1 の Intra フレーム（キーフレーム）部分を画像フォーマットとして抜き出したものです。仕様は 2019 年 2 月にバージョン 1.0.0 が確定し、ロイヤリティフリーで利用できます。

AVIF の特徴は、現行の Web 画像フォーマットの中で最高クラスの圧縮効率を誇る点にあります。同等画質で比較すると、JPEG より約 50%、WebP より約 20〜50% ファイルサイズを削減できます。さらに、HDR（High Dynamic Range）、10bit/12bit カラー深度、BT.2020 などの広色域、フィルムグレイン合成（暗部のノイズを再現）といった、写真・動画分野で求められる高品質機能を備えています。

用途は WebP と類似しますが、特に Netflix のサムネイル、Apple の各種画像配信、ニュースサイトの大判画像、写真共有サービスなど、品質を妥協できない領域で AVIF への移行が進んでいます。

内部構造とマジックナンバー

AVIF は HEIC（後述）と同じ ISOBMFF（ISO Base Media File Format、MP4 系）コンテナを使い、AV1 ビットストリームを格納します。ファイル先頭の ftyp ボックスでブランドが識別されます。

オフセット	値（HEX）	意味
0x00–0x03	00 00 00 NN	ftyp ボックスサイズ（32bit BE）
0x04–0x07	66 74 79 70	"ftyp"
0x08–0x0B	61 76 69 66	"avif"（メジャーブランド）
追加ブランド	avis	AVIF シーケンス（アニメーション）
MIME	image/avif	—

ファイル内部は HEIF と同じく、メタデータを格納する meta ボックス、サンプル本体を格納する mdat ボックスなどで構成されます。1 ファイルに複数の画像、サムネイル、アルファチャンネル、深度マップを同梱できる拡張性があります。

主な用途

• 大手 Web サービスのサムネイル・ヒーローイメージ配信（Netflix、Vimeo など）
• HDR 写真の Web 配信（10bit カラー必須の用途）
• ECサイトの高品質商品画像
• ニュース・メディアサイトの大判記事画像
• 写真共有 SNS（容量削減と画質維持の両立）
• 軽量アニメーション（フルカラー、AVIS）
• レスポンシブ画像セット（srcset + <picture> での最上位フォーマット）

関連形式との比較

項目	AVIF	WebP	JPEG	HEIC
圧縮効率	最高	高	中	非常に高い
HDR / 10bit+	○	×	×	○
透過	○	○	×	○
アニメ	○（avis）	○	×	○
エンコード速度	遅い（CPU重）	速い	非常に速い	速い（iPhone はHW）
ライセンス	ロイヤリティフリー	ロイヤリティフリー	FRAND	有償特許
ブラウザ	Chrome 85+/FF 93+/Safari 16+	ほぼ全モダン	全環境	Safari 17+ のみ
OS 標準対応	Win 11 / macOS 13+	Win 10 / macOS 11+	全 OS	iOS/macOS のみ

編集・閲覧ツール

• libavif：AOMedia 公式の C ライブラリ＋CLI（avifenc / avifdec）。avifenc -q 60 in.png out.avif
• Squoosh：ブラウザ完結の変換ツール。WebP と AVIF の品質比較に便利
• ImageMagick 7.0.25 以降：libheif/libaom 経由でエンコード対応
• Sharp（Node.js）：.toFormat('avif') でサーバーサイド変換
• Adobe Photoshop（プラグイン）：純正対応は限定的だが、サードパーティ AVIF プラグインあり
• GIMP 2.10.22 以降：標準で読み書き対応
• Cloudflare Images / Imgix / Cloudinary：CDN 側で自動配信

注意点・落とし穴

• エンコードが非常に重い：同じ画像をエンコードするのに JPEG の数十倍～百倍の CPU 時間を要する。バッチ処理かビルドステップに組み込むのが現実的
• Safari は 16 から対応：iOS 16 未満ユーザーへの配慮で <picture> フォールバックは必須
• SNS の OGP が未対応のケース：Facebook、Twitter（X）、LINE のクローラーが AVIF を取得できない場合がある。OGP 画像は JPEG/PNG を別途用意
• サーバー MIME 設定：image/avif を MIME に追加しないと一部サーバーで配信されない
• EXIF を保持するエンコーダーが少ない：写真の管理用途では失われないか確認
• 低品質設定でのアーティファクト：q=30 以下では油絵調のぼやけが出やすい。実用は q=50〜70 程度

典型的なフォールバック例：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="ヒーロー画像">
</picture>

関連リンク

• 画像形式（親カテゴリ）
• ファイル拡張子とは
• JPEG（.jpg / .jpeg）
• PNG（.png）
• WebP（.webp）
• HEIC（.heic / .heif）
• 次世代フォーマットでの画像の配信
• アニメーション コンテンツでの動画フォーマットの使用