AVIFはウェブで使用される最新の主流画像フォーマットです。JPEGとWebPの両方より優れた圧縮を提供し、同じ視覚品質でJPEGより40〜50%小さく、WebPより約20%小さいファイルを生成します。現在、世界中のブラウザの92%以上でサポートされています。2019年に標準化され、2023年までに主要ブラウザで広くサポートされたAVIFは、今日あらゆるウェブプロジェクトで検討に値する実用的な選択肢となっています。

AVIFとは何か？

AVIFはAV1 Image File Formatの略です。AV1ビデオコーデックから派生した静止画・アニメーションフォーマットで、画像をAV1ビデオストリームの単一イントラコーディングフレームとしてエンコードします。AV1はGoogle、 Mozilla、Microsoft、Apple、Netflix、Amazonなどが参加するコンソーシアムであるAlliance for Open Media（AOMedia）が開発しました。このコーデックは完全にロイヤリティフリーです — HEVC（HEIF/HEICの基盤コーデック）に関連する特許ライセンス料を回避することが、開発の主要な動機でした。

AVIFは本質的にAV1ビデオから抽出された単一フレームであるため、AV1開発者がビデオ配信のために長年かけて洗練させたすべての高度な圧縮技術をそのまま受け継ぎます。この研究投資こそが、AVIFを静止画専用に設計された他のフォーマットよりはるかに効率的にしている理由です。

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

独立したベンチマークは、画像圧縮効率で一貫して同じランキングを示しています：

AVIF vs JPEG — 同じ知覚品質で、AVIFファイルは通常JPEGより40〜50%小さくなります。 500 KBのJPEGの場合、AVIF相当品は多くの場合250〜300 KBです。
AVIF vs WebP — 同等の品質でAVIFはWebPより約20%小さくなります。WebPはすでに JPEGより25〜35%小さいため、AVIFはその優位性をさらに高めます。
AVIF vs JPEG XL — 両フォーマットは競合しており、すべての画像タイプで一貫した優位性を持つものはありません。JPEG XLは写真画像の可逆圧縮性能が優れており、AVIFは非常に低いビットレート（高度に圧縮された画像）で優位に立ちます。

重要な注意点が一つあります：AVIFのエンコードはWebPやJPEGよりも大幅に遅いです。同等の品質設定で、 AVIFエンコードは10〜50倍の時間がかかる場合があります。静的アセットのビルド時の事前生成には許容できますが — リアルタイムのオンザフライエンコードには往々にして非実用的です。

AVIFが優れた圧縮を実現する方法

AVIFの圧縮上の優位性は、AV1イントラフレーム予測エンジンから来ています。このエンジンはJPEG（予測なし）や WebPのVP8コーデック（輝度ブロックに対して10の予測モードを提供）が使用する予測方法よりも実質的に高度です。 AV1はブロックあたり60以上の方向性イントラ予測モードに加え、さまざまな非方向性モードをサポートし — はるかに少ないビットで画像コンテンツを表現できます。

高度なイントラ予測 — AV1は細かい方向性モード（大きいブロックでは3°間隔で0°〜180°）を使用して隣接ブロックから各コーディングブロックを予測します。予測後の残差がはるかに小さくなり、エンコードに必要なビットが減ります。
可変ブロックサイズ — AV1は4×4から128×128ピクセルまでのブロックサイズをサポートします。エンコーダーは均一な領域には大きいブロックを、細かいディテールには小さいブロックを選択して、各領域に最適なサイズを使用します。
クロマサブサンプリングのサポート — AVIFは4:2:0、4:2:2、4:4:4クロマサブサンプリングをネイティブサポートします。写真には4:2:0（JPEGと同じ）が一般的で、テキストと鮮明なグラフィックには 4:4:4が色の正確さを保持します。
フィルムグレインシンセシス — AV1にはエンコード中にソースから自然なグレインを除去し、コンパクトなパラメータセットからデコード時に再構築する組み込みのフィルムグレインシンセシスツールがあります。これにより、画像が人工的に滑らかに見えることなくビットを節約します。

AVIFの機能的優位性

純粋な圧縮以外にも、AVIFは古いフォーマットが持たない機能をサポートしています：

HDRとワイドカラーガマット — AVIFは10ビットおよび12ビットの色深度をサポートし、 Display P3およびRec. 2020色空間のHDRコンテンツを実現します。JPEGは8ビットに制限され、WebPもウェブ配信では8ビットまでです。
アルファ透明度 — WebPおよびPNGと同様に（JPEGとは異なり）、AVIFは完全なアルファチャンネル透明度をサポートします。アルファプレーンは同じAV1コーデックでエンコードされ、 PNGの可逆アルファよりも優れた圧縮効率を提供します。
可逆・非可逆モード — AVIFは両方をサポートします。可逆AVIFは一般的な画像では可逆WebPやPNGよりほとんど小さくなりませんが、オプションとして存在します。
アニメーション — AVIFはAVIS（AV1 Image Sequence）コンテナを使用してマルチフレームアニメーションをサポートします。アニメーションAVIFファイルはアニメーションWebPや GIFより大幅に小さくなる可能性がありますが、静止AVIFよりもエンコードが遅くなります。
クロマサブサンプリングモード — 4:2:0、4:2:2、4:4:4すべてがサポートされており、色のディテールにおける品質・サイズのトレードオフを制御できます。

AVIFのブラウザサポート

2026年現在、AVIFは現代のプラットフォーム全体で広いブラウザサポートを持っています：

Chrome — バージョン85からサポート（2020年8月）
Firefox — バージョン93からサポート（2021年10月）
Safari — バージョン16からサポート（2022年9月、macOS Ventura / iOS 16）
Edge — バージョン121からサポート（2024年1月、Chromiumベース）

2026年現在、世界的なブラウザサポートは約92〜93%です。AVIFをサポートしないブラウザはInternet Explorer（廃止）、バージョン16以前の古いSafari、一部の古いChromiumベースのモバイルブラウザです。ほとんどのウェブプロジェクトでは92%のサポートで十分です — 特に <picture>要素でWebPまたはJPEGのフォールバックを使用する場合はなおさらです。

AVIFエンコード速度のトレードオフ

AVIFの主な実用的デメリットはエンコード速度です。圧縮効率を最大化する品質設定では、AVIFはWebPより 10〜50倍遅くエンコードされる場合があります。WebPの変換に100msかかる作業がAVIFでは1〜5秒かかる可能性があります。

これはAVIFをどのように使用すべきかについて明確な意味を持ちます：

ビルド時生成に適している — ビルドプロセス中にAVIFファイルを事前生成する場合（例：Next.jsビルドでsharpを使用）、エンコード時間は一度だけ支払われ、結果のファイルはキャッシュされます。これが理想的なシナリオです。
リアルタイムオンザフライエンコードには適していない — 最初のリクエスト時に画像を変換する画像CDNとプロキシはWebPを素早く処理できますが、AVIFは許容できないレイテンシを引き起こす可能性があります。ほとんどの画像CDNは現在、バックグラウンド処理とキャッシングとともにAVIFをサポートしています。
速度プリセットの使用 — libaom-av1や libsvtav1などのエンコーダーは速度プリセット（0〜10）を提供します。より速いプリセット（例：6〜8）を使用すると、エンコード時間を3〜10倍短縮でき、ファイルサイズのペナルティはわずかです — ほとんどのコンテンツにとって合理的なトレードオフです。

AVIFを使用すべき場合

AVIFが適した選択である場合：

ビルド時に静的アセットを事前生成する場合 — デプロイ中に画像バリアントを生成する eコマースサイト、ブログ、マーケティングページがAVIFから最も恩恵を受けます。ファイルサイズの節約が直接ページの重さと帯域幅コストを削減します。
現代ブラウザを使用するユーザー層 — 分析データがトラフィックの95%以上がChrome、 Firefox、最新SafariからであることをShow示している場合、92%の世界的サポート数値が特定のユーザー層に対してさらに有利になります。
写真重視のサイト — AVIFの圧縮上の優位性は写真コンテンツで最も顕著です。ギャラリーサイト、ポートフォリオページ、メディアの多いブログで最大のファイルサイズ削減が見られます。
eコマース製品画像 — 製品ページは多くの場合、数十枚の高品質画像を提供します。製品画像をAVIFに変換すると、ページビューあたり数百キロバイトのページ重量を削減し、Core Web Vitals スコアを向上させることができます。

代わりにWebPを使用すべき場合

WebPが優れた選択となるシナリオがいくつかあります：

リアルタイム変換 — オンザフライで画像を変換する必要がある場合（例：ユーザーアップロード、動的リサイズ）、WebPのエンコード速度がはるかに実用的です。
より広い互換性要件 — ユーザー層に古いSafari（16以前）ユーザーが相当数含まれる、または97〜98%に近いブラウザサポートが必要な場合、WebPがより安全な選択です。2026年現在、世界的サポートは97%以上です。
よりシンプルなツールチェーン — WebPエンコードはほぼすべての画像処理ライブラリでサポートされています。ImageMagickやPillowの古いバージョンではAVIFサポートがないか限定的な場合があります。

画像をAVIFに変換する方法

PNG、JPEG、WebP画像をAVIFに変換する最も簡単な方法は、Picovertの PNG to AVIF変換ツールを使用することです。完全にブラウザ内で実行され — どのサーバーにもファイルがアップロードされず — 数秒で変換されます。他のソースフォーマットには、一般的な画像変換ツールを使用すると、サポートされているすべての入力フォーマットからAVIFを出力フォーマットとして選択できます。

ビルドパイプラインで画像を処理する開発者には、sharpライブラリ（Node.js）が最も一般的な選択肢です：

const sharp = require('sharp')
await sharp('input.jpg')
  .avif({ quality: 60, effort: 4 })
  .toFile('output.avif')

effortパラメータ（0〜9）は速度・圧縮のトレードオフを制御します。低い値は速く、高い値はより小さいファイルを生成します。静的ビルドパイプラインではeffort 6〜8が合理的なバランス点です。

プログレッシブエンハンスメントのためのHTML picture要素

ウェブでAVIFを提供する際の推奨パターンは、フォールバック付きのHTML <picture>要素を使用することです。ブラウザはサポートする最初のソースを選択します：

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="説明" width="800" height="600" />
</picture>

このアプローチはAVIF対応ブラウザに最小のファイルを提供し、ChromeやFirefoxユーザー向けにはWebPにフォールバックし、レガシー環境では最終的にJPEGにフォールバックします。レイアウトシフト（Core Web Vitalsメトリクス）を防ぐために、<img>タグのwidthとheight属性は常に設定すべきです。

Next.jsを使用している場合、Next.js設定にformats: ["image/avif", "image/webp"]を設定すると、組み込みの<Image>コンポーネントがAVIFの提供を自動的に処理します。

今すぐ画像をAVIFに変換するには、Picovertの画像変換ツールでフォーマット変換を行うか、画像圧縮ツールでファイルサイズを削減してください。どちらのツールもアップロード不要でブラウザ内で動作します。