AVIF画像フォーマット完全ガイド:WebPよりさらに30%小さい次世代画像形式
AVIF:画像圧縮の新しい王者
AVIF(AV1 Image File Format)はAV1動画コーデック技術をベースにした、WebPに次ぐ次世代画像フォーマットです。
| フォーマット | コーデック | 同等画質でのサイズ | ブラウザ対応 |
|---|---|---|---|
| JPEG | libjpeg | 基準 | すべて |
| WebP | VP8 | -25~35% | 97%+ |
| AVIF | AV1 | -50~60% | 92%+ |
| PNG | deflate | JPEGの3〜5倍 | すべて |
重要なデータ:同等のSSIM画質で、AVIFはWebPよりさらに20〜30%小さく、JPEGより50〜60%小さくなります。
なぜAVIFはこんなに小さいのか?
AV1エンコードの強み
- フレーム内予測:画像内部の空間的冗長性を利用
- 変換符号化:4×4から64×64までの変換ブロックをサポート
- 量子化マトリックス:より細かい周波数領域の量子化
- フィルムグレイン合成:フィルムの粒子感を分離し、ピクセルではなくパラメータで記述
非可逆 vs 可逆
| モード | サイズ比較 | 適した用途 |
|---|---|---|
| 非可逆 (CQ 30) | JPEGの40% | 写真、スクリーンショット |
| 非可逆 (CQ 50) | JPEGの25% | サムネイル、プレビュー |
| 可逆 | PNGの50〜60% | アイコン、UI素材 |
| 非可逆 + Alpha | PNGの30% | 透過が必要な写真 |
ブラウザ対応状況(2026年)
| ブラウザ | AVIF対応 | バージョン |
|---|---|---|
| Chrome | ✅ | 85+ |
| Firefox | ✅ | 93+ |
| Safari | ✅ | 16+ |
| Edge | ✅ | 85+ |
| Samsung Internet | ✅ | 15+ |
| IE | ❌ | 非対応 |
カバー率92%以上で、本番環境に安心して使えます。
フォールバック戦略
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="写真" loading="lazy">
</picture>
ブラウザは順番に、最初に対応しているフォーマットを選択します。
ToolsKuでAVIFに変換する
操作手順
- 画像フォーマット変換ツールを開く
- 画像をアップロード(JPG、PNG、WebP、GIFに対応)
- 出力フォーマットに AVIF を選択
- 品質パラメータを調整:
- 高品質 (CQ 20-30):ほぼロスレス、サイズを40〜50%削減
- バランス (CQ 35-50):ほとんどの場面に最適、サイズを50〜60%削減
- 高圧縮 (CQ 55-70):サムネイル/プレビュー向け、サイズを60〜80%削減
- 変換結果をダウンロード
変換効果の参考値
| 元画像 | 元のサイズ | AVIF (CQ 35) | 圧縮率 | SSIM |
|---|---|---|---|---|
| 風景写真 (4K) | 8.2MB | 1.1MB | 87% | 0.95 |
| 人物写真 | 3.5MB | 0.5MB | 86% | 0.94 |
| UIスクリーンショット | 1.2MB | 0.15MB | 88% | 0.97 |
| アイコン (PNG+Alpha) | 45KB | 12KB | 73% | 1.00 |
AVIFの特別な機能
アルファチャンネル(透過)
AVIFは非可逆圧縮とアルファチャンネルの併用に対応しており、これはJPEGにはない特徴です:
PNG(透過) 45KB → AVIF(透過, CQ 35) 12KB → サイズ73%削減
HDR / 広色域
AVIFはPQとHLGの2種類のHDR伝達関数、およびBT.2020広色域をサポートしています:
| 特性 | JPEG | WebP | AVIF |
|---|---|---|---|
| 色深度 | 8-bit | 8-bit | 8/10/12-bit |
| 色域 | sRGB | sRGB | sRGB / BT.2020 |
| HDR | ❌ | ❌ | ✅ PQ/HLG |
| Alpha | ❌ | ✅ | ✅ |
アニメーション
AVIFはアニメーションシーケンス(AVIS)に対応しており、アニメーションWebPと同様に使えます:
アニメーションGIF 2.5MB → アニメーションWebP 0.8MB → アニメーションAVIF 0.5MB
コマンドラインでの変換
libavif (avifenc) を使う
# インストール
# macOS: brew install libavif
# Ubuntu: apt install libavif-bin
# 基本的な変換
avifenc input.jpg output.avif
# 品質を指定 (0-63、小さいほど高品質)
avifenc -q 30 input.jpg output.avif
# 可逆圧縮
avifenc --lossless input.png output.avif
# 速度を指定 (0-10、遅いほど圧縮率が向上)
avifenc -q 35 -s 6 input.jpg output.avif
ImageMagickを使う
# AVIFに変換
magick input.jpg -quality 65 output.avif
# 一括変換
magick mogrify -format avif -quality 65 *.jpg
Nginxでの自動変換
# JPEGをAVIFとして動的に返す
map $http_accept $avif_suffix {
"~*image/avif" ".avif";
}
server {
location ~* ^/.+\.(png|jpg|jpeg)$ {
add_header Vary Accept;
try_files $uri$avif_suffix $uri =404;
}
}
クライアントがAVIFに対応している場合、.avif版が自動的に返されます(事前生成が必要)。
ベストプラクティス
<picture>でフォールバック:AVIF → WebP → JPEGの3段階フォールバック- 品質パラメータは35-50を選ぶ:ほとんどの場面での最適なバランス
- 動的変換ではなく事前生成:ビルド時に生成し、サーバーのCPU負荷を回避
- 写真はAVIF、アイコンはSVG:ベクター画像はAVIFに向かない
- 透過画像はAVIFに:PNGの代替として、サイズを70%以上削減
- CDNで自動変換を設定:Cloudflare Image Resizing / CloudFrontはAcceptヘッダーに応じてAVIFを自動返却可能
#AVIF#图片格式#WebP#压缩#图片优化