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	3-5x JPEG	全部

關鍵數據：同等 SSIM 品質下，AVIF 比 WebP 再小 20-30%，比 JPEG 小 50-60%。

---

為什麼 AVIF 這麼小？

AV1 編碼的優勢

1. 畫面內預測：利用圖片內部的空間冗餘
2. 變換編碼：支援 4×4 到 64×64 的變換區塊
3. 量化矩陣：更精細的頻率域量化
4. Film Grain 合成：分離膠片顆粒，用參數描述而非像素儲存

失真 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>

瀏覽器依順序選擇第一個支援的格式。

---

使用工具庫轉換 AVIF

操作步驟

1. 開啟 圖片格式轉換工具
2. 上傳圖片（支援 JPG、PNG、WebP、GIF）
3. 選擇輸出格式為 AVIF
4. 調整品質參數：
   • 高品質 (CQ 20-30)：幾乎無失真，體積減 40-50%
   • 均衡 (CQ 35-50)：適合大多數情境，體積減 50-60%
   • 高壓縮 (CQ 55-70)：縮圖/預覽，體積減 60-80%
5. 下載轉換結果

轉換效果參考

原圖	原始大小	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 的特殊能力

Alpha 通道（透明度）

AVIF 支援失真壓縮 + Alpha 通道，這是 JPEG 不具備的：

PNG (透明) 45KB → AVIF (透明, CQ 35) 12KB → 體積減 73%

HDR / 廣色域

AVIF 支援 PQ 和 HLG 兩種 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 版本（需預先產生）。

---

最佳實踐

1. 使用 <picture> 降級：AVIF → WebP → JPEG 三級降級
2. 品質參數選 35-50：大多數情境的最佳平衡點
3. 預先產生而非動態轉換：建置時產生，避免伺服器 CPU 開銷
4. 照片用 AVIF，圖示用 SVG：向量圖不適合 AVIF
5. 透明圖片用 AVIF：取代 PNG，體積減 70%+
6. CDN 設定自動轉換：Cloudflare Image Resizing / CloudFront 支援依 Accept 標頭自動回傳 AVIF