本文へ移動
すべての記事
解説公開日 更新日

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

AVIF の機能と圧縮の違い、共有や公開の前に確認したい互換性を解説します。

AVIF は AV1 に基づく画像形式です。Web 上の .avif ファイルについて、形式の機能と利用前の確認点を説明します。

AVIF とは

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

AOM 仕様が形式の機能を定義していますが、すべてのエンコーダーやビューアーが全機能に対応するわけではありません。

AVIF と JPG・WebP の違い

AVIF で容量を減らせる場合がありますが、画像内容・エンコーダー・設定で結果が変わります。同じ寸法で出力を比較し、細部を確認してください。削減率や見た目の一致は保証されません。

JPEGWebPAVIF
圧縮方式非可逆可逆 / 非可逆可逆 / 非可逆
透過×〇〇
HDR 対応××〇
ファイルサイズ画像と設定次第画像と設定次第画像と設定次第
ブラウザ対応対象環境で確認対象環境で確認対象環境で確認

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

ブラウザ対応状況

対象のブラウザ・OS・アプリで AVIF を確認してください。静止画像への対応が HDR やアニメーションの全機能への対応を意味するわけではありません。実際のファイルを試し、未対応環境向けに代替形式を用意します。

旧ブラウザ向けには、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 の相互変換

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

  • JPG → AVIF — 既存の写真を最新形式に
  • PNG → AVIF — 非可逆の静止 AVIF を出力します。画素が変わる可能性があるため、画素の一致が必要なら PNG を保持してください。
  • AVIF → JPG — 互換性最優先で戻す
  • AVIF → WebP — まだ AVIF を直接配信していないサイト向け

出典と更新

資料確認日：2026-10-30。形式の機能やアプリの対応と、本サイトの出力機能は異なります。ツールの現在の設定と制限も確認してください。

すべての記事