AVIF：下一代圖像格式的技術深度解析

AVIF 簡介與基本原理

AVIF 是基於開源 AV1 視頻編解碼器的圖像格式，由 Alliance for Open Media (AOMedia) 開發。它是一種開放、免版稅的圖像文件格式，使用 HEIF(High-Efficiency Image File) 容器存儲經 AV1 壓縮的圖像數據。自 2019 年推出以來，AVIF 因其卓越的壓縮效率和圖像質量表現而迅速獲得關注。

AVIF 的工作原理是先將圖像分割成不同大小的塊（從 4×4 到 64×64 像素），然後對每部分單獨分析和壓縮，這種方法允許更精確的壓縮，尤其對於圖像中不同複雜度的區域。

AVIF 的技術特性

AVIF 支持多種先進的技術特性，使其成為現代網絡應用的理想選擇：

• 高動態範圍 (HDR) 支持：能夠顯示更廣闊的色彩和亮度範圍，使圖像更加生動逼真
• 色深選項：支持 8 位、10 位和 12 位色深，適用於不同質量需求的場景
• 色彩空間豐富：支持多種顏色空間，包括標準動態範圍 (SDR) 和高動態範圍 (HDR)
• 透明度支持：完全支持 Alpha 通道，使其適用於需要透明背景的圖像
• 動畫功能：支持圖像序列和動畫，可作為 GIF 的替代品

AVIF 與其他圖像格式的比較優勢

相比傳統的 JPEG、PNG 和較新的 WebP 格式，AVIF 有著顯著的優越性：

文件大小與壓縮效率

AVIF 的最大優勢之一是其卓越的壓縮效率。研究表明：

• AVIF 可以比 WebP 小 50%，同時保持相同的質量水平
• 與 JPEG 相比，AVIF 能夠將文件大小減少高達 50%，而不會有明顯的質量損失
• Netflix 的測試框架顯示，與 JPEG 或 WebP 相比，AVIF 的文件大小有顯著減少

圖像質量表現

在視覺質量方面，AVIF 表現同樣出色：

• 對於漸變、陰影和細節處理更佳，較少出現壓縮瑕疵
• 在低比特率下能夠保持更好的細節保留
• 特別適合複雜圖像的高質量壓縮

下表比較了 AVIF 與其他常見格式的主要特性：

特性	JPEG	PNG	WebP	AVIF
文件大小	較大	最大	小	最小
質量	良好	極佳	很好	極佳
透明度	不支持	支持	支持	支持
動畫	不支持	不支持	支持	支持
色彩範圍	有限	中等	中等	廣泛
加載速度	慢	最慢	快	最快
瀏覽器支持	全面	全面	廣泛	逐漸完善

libavif：AVIF 圖像處理的核心庫

libavif 是一個輕量級、可移植的 C 語言實現的 AV1 圖像文件格式庫，致力於提供友好且靈活的 AVIF 處理工具。

libavif 的主要特點

• 完整格式支持：支持 AV1 的所有 YUV 格式和位深度（包括 Alpha 通道）
• 多編解碼器接口：可以與多種 AV1 編解碼器配合使用，包括 libaom、dav1d、libgav1、rav1e 和 SVT-AV1
• 命令行工具：提供 avifenc 和 avifdec 命令行工具，方便圖像轉換
• 跨平台兼容：支持 Windows、Linux 等多種操作系統
• 活躍維護：由 AOMediaCodec 團隊持續維護和更新

avifenc 的性能與使用技巧

avifenc 是 libavif 提供的編碼工具，可以將其他格式的圖像轉換為 AVIF 格式。以下是關於其性能的一些關鍵發現：

編碼速度與質量

AVIF 編碼提供不同的速度選項（0-10），影響編碼時間和質量：

• 速度設置 0-6 使用 good quality 編解碼器模式，傾向於提供更好的質量
• 速度設置 7-10 使用 realtime 編解碼器模式，提供更快的編碼速度
• 有趣的是，較慢的預設由於更精確，在某些情況下可能會產生較大的文件

位深選擇的影響

研究表明，即使對於 8 位原始圖像，使用 10 位 AVIF 編碼也能獲得更好的結果：

• 10 位格式在處理漸變時效果更佳，減少了條帶現象
• 使用 aq-mode 1（方差自適應量化）可以減少細節損失，避免細節模糊
• 雖然 10 位編碼比 8 位稍慢，但速度差異通常不大，而質量提升明顯

最近的 libavif v1.1.1 版本帶來了多項性能改進：

• 測試覆蓋率和安全覆蓋率的提升
• 更新的依賴關係帶來更高性能
• libaom v3.9.1 加速 AVIF 編碼
• 最新版本的 libyuv 加速 AVIF 解碼

瀏覽器支持情況

根據 caniuse.com 的數據，AVIF 的瀏覽器支持狀況如下：

桌面瀏覽器

• Chrome：從 85 版本（2020 年）開始完全支持，目前所有版本（133-136）均支持
• Edge：從 121 版本（2024 年 1 月）開始支持
• Safari：16.1-16.3 版本部分支持，16.4 及以上版本完全支持
• Firefox：從 93 版本開始完全支持
• Opera：從 71 版本開始支持
• IE：所有版本均不支持

移動瀏覽器

• Chrome for Android：133 版本支持
• Safari on iOS：從 16.0 版本開始支持
• Samsung Internet：從 14.0 版本開始支持
• Firefox for Android：135 版本支持
• Opera Mini：所有版本均不支持

值得注意的是，Edge 雖然基於 Chromium，但直到 2024 年 1 月才正式支持 AVIF，這與 Chrome 相比有明顯延遲。

實際應用與最佳實踐

在實際應用中，AVIF 能夠為網站提供顯著的性能提升：

網站性能優化

• 更小的文件大小導致更快的頁面加載時間
• 減少數據傳輸，使網站在低帶寬環境下也能高效運行
• 改善用戶體驗，特別是對於圖片密集型網站

如何實施 AVIF

可以通過以下方式在網站中實施 AVIF：

1. 使用 HTML picture 元素提供備選格式：

   <picture>
       <source srcset="image.avif" type="image/avif">
       <source srcset="image.webp" type="image/webp">
       <img src="image.jpg" alt="描述">
   </picture>

2. 使用 libavif 進行批量轉換：

   avifenc -q 75 input.jpg output.avif

3. 考慮不同質量設置，根據實際需求平衡質量與文件大小：

   • 對於高質量需求，可以使用較低的壓縮率
   • 對於普通網頁圖像，質量設置為 50-70 通常能提供良好的平衡

結論

AVIF 代表了圖像格式的重要進步，提供了卓越的壓縮效率和圖像質量。隨著主流瀏覽器對 AVIF 支持的不斷完善，它正在成為網絡圖像的優先選擇。

libavif 作為處理 AVIF 的主要工具庫，提供了強大而靈活的功能，使開發者能夠充分利用這一先進格式。雖然 AVIF 編碼可能比其他格式稍慢，但其帶來的文件大小減少和質量提升通常能夠抵消這一缺點。

隨著網絡速度和用戶體驗要求的不斷提高，AVIF 無疑將在未來的網絡圖像優化中扮演更加重要的角色。對於關注性能和用戶體驗的開發者來說，現在正是開始採用 AVIF 的最佳時機。