AVIFエンコーダ比較 2025 — SVT-AV1 / libaom / rav1e の画質と速度

公開: 2025年9月21日 · 読了目安: 1 分 · 著者: Unified Image Tools 編集部

はじめに

AVIF は高圧縮が魅力ですが、エンコーダ（SVT-AV1 / libaom / rav1e）ごとに画質/速度/安定性が異なります。単純な「最小ファイルサイズ」だけではなく、視覚劣化の質、デコード時間、CI の実行時間、パラメータの安定性まで含めて判断する必要があります。本稿は代表データセットでの比較手順を公開し、実務に直結するプリセット選びを支援します。

TL;DR

互換性/安定重視: libaom、速度重視: SVT-AV1、画質の素性確認に rav1e
まず WebP をベースに AVIF を追加検証（破綻がなければ採用）
LCP 対象はデコード時間も考慮し、q を 5 前後で微調整

背景: 画像圧縮完全戦略 2025 ─ 画質を守りつつ体感速度を最適化する実践ガイド、圧縮アーティファクト監査 2025 — 見るべき箇所・悪化条件・回避策

データセットと評価軸

データセット（例）:

ポートレート（肌/ボケ）×3
テキスト/UI（細線/高コントラスト）×3
風景（細かい葉/レンガ）×3
グラデーション（空/背景）×3

評価軸:

視覚劣化（肌のバンディング/輪郭エッジ/テクスチャ保持）
ファイルサイズ（代表幅 4 段: 640/960/1280/1536）
エンコード時間（1ファイル平均、CI のスループット）
デコード時間（LCP 候補での体感寄与）

測定は SSIM/PSNR を補助に、最終判断は目視で行います。

比較観点

視覚劣化（輪郭/肌/グラデ/ノイズ）
ファイルサイズ（代表幅 3–5 段で比較）
エンコード/デコード時間（サーバ/クライアント負荷）

追加観点:

パラメータ安定性（同一 q/speed での揺らぎ）
可搬性（CLI/ライブラリ/ホスティング対応）

コマンド例

# libaom (avifenc)
avifenc --min 28 --max 32 --speed 6 input.png out-libaom.avif

# SVT-AV1
aomenc --good --cpu-used=6 -q 35 -o out-svt.ivf input.y4m
# → 適切なツールで AVIF にパッケージング

# rav1e
rav1e input.y4m -s 6 -q 35 -o out-rav1e.ivf

実務では GUI/ライブラリによる一括処理が多いため、ツールチェーンの安定性や CI 実行時間も指標に含めます。

推奨パラメータの目安（静止画用途）

libaom: --min 28 --max 32 --speed 6（品質重視、安定）
SVT-AV1: -q 34〜38 --cpu-used=6（速度/サイズのバランス）
rav1e: -q 34〜38 -s 6（検証・比較用に）

UI/テキスト系は 4:4:4/ロスレスも選択肢。写真は 4:2:0 が多くのケースで十分です。

推奨の進め方

代表シーンで WebP/AVIF を比較、SSIM/Butteraugli を補助に
破綻が気になる場合は WebP 優先。問題なければ AVIF を採用
LCP 画像は priority/preload と組み合わせ、ファイルサイズとデコード時間のバランスを最適化

実務チューニングの流れ

WebP を基準値として作成（q=75–80）
AVIF を q=34–38 で試験、肌/文字/グラデで破綻がないか確認
問題があれば WebP 採用 or AVIF の q を段階引き上げ
LCP 候補はデコード遅延を考慮し、q を 2–4 下げる代わりに代表幅を適切化

Next.js への落とし込み

<Image
  src="/img/hero-1280.avif"
  alt="ヒーロー"
  width={1280}
  height={720}
  sizes="(max-width: 768px) 100vw, 768px"
  priority
  fetchPriority="high"
  // 非ヒーローは loading="lazy" decoding="async"
/>

代表幅 3–5 段 × WebP/AVIF
sizes をレイアウトと厳密に一致
LCP 候補のみ優先度付与

ベンチパイプライン（自動化の骨子）

データセット定義: 代表シーン 12–20 点を固定（差し替えは versioning）
生成: 各エンコーダ × 代表幅 × q/speed のグリッドを一括生成
測定: ファイルサイズ/エンコード時間/SSIM/Butteraugli を収集
可視化: 並べ比較ページを自動生成（破綻の視覚確認）
推奨: しきい値ベースでプリセットを選出し、CI に適用

簡易スクリプト例（Node）:

import { execFile } from 'node:child_process';
function run(cmd: string, args: string[]) {
  return new Promise((res, rej) => execFile(cmd, args, (e, o) => e ? rej(e) : res(o)));
}