更新 AVIF 在生態系統中採用的方式。
AVIF 是一種新圖片格式，由於壓縮率高、效能與廣泛採用，因此在網路上迅速獲得人氣。AVIF 是免權利金的開放式圖片格式，採用英國 Alliance for Open Media 標準化的 AV1 影片轉碼器。這篇文章將概略說明 AVIF 在生態系統中的應用方式，以及開發人員在靜態圖片和動畫中使用 AVIF 時，可期待獲得哪些效能和品質優勢。
AVIF 生態系統有什麼新功能？
自從 Chrome、Firefox 和 Safari 推出 AVIF 格式後，網路上的 AVIF 使用率便持續攀升；目前幾乎所有瀏覽器都支援 AVIF。
在 Chrome 中，自 Chrome 在穩定版中新增 AVIF 支援功能後，一年多來 AVIF 的使用率已成長到約 1%。
目前有許多圖片 CDN (例如 Akamai、Cloudflare、Cloudinary 和 Imgix) 提供 AVIF 圖片。在宣布支援 AVIF 的網誌文章中，Imgix 表示，相較於 JPEG，AVIF 可節省 60% 的檔案大小，相較於 WebP，則可節省 35% 的檔案大小。除了大幅節省儲存空間，還能加快網頁載入速度，縮短最大內容繪製時間 (LCP)。LCP 是 Core Web Vitals 指標之一，代表網頁上最大內容區塊的載入速度。使用新型轉碼器壓縮圖片是減少 LCP 的關鍵技巧之一。Lighthouse 是一項出色的 Chrome 開發人員工具，可用於測試網站，並查看 AVIF 可節省多少空間。
WordPress 是全球最受歡迎的網站平台，開發人員可以利用外掛程式將圖片轉換為 AVIF，例如：
對於更多實作練習的開發人員來說，ImageMagick 和 FFmpeg 等工具都是很好的起點。
AVIF 編碼速度
如要大規模部署圖片壓縮，快速編碼速度和視覺品質至關重要。AVIF 軟體編碼速度在過去兩年間大幅提升。與其他新型靜態圖片格式相比，AVIF 產生的檔案較小，但視覺品質相近 (請參閱下方圖表，較低的值代表較佳)，且編碼速度較快。
下方圖表 (越高越好) 表示 AVIF 編碼速度與其他圖片格式的差異。舊一代編碼器 (例如 WebP) 可利用較不複雜 (但效率較低) 的壓縮演算法。透過多執行緒編碼方案，AVIF 可在常見用途中達到類似的效能，同時提供顯著的壓縮效益。
如果開發人員想進一步比較詳細的編碼速度和影像品質，圖片編碼比較網站提供了可重現的基準結果。
雖然針對 AVIF 和 WebP 等新型圖片編碼器的軟體實作已針對 x86 和 ARM 處理器架構進行最佳化，但大規模壓縮大量圖片的運算成本可能很高。另一種降低壓縮成本的替代方式是探索硬體加速。Bluedot 開發的硬體加速 Pulsar-AVIF 編碼器是在可程式化的 FPGA 上執行，例如 AMD 的 Alveo U250。與以軟體為基礎的 avifenc 相比，Pulsar-AVIF 可提供 7 到 23 倍的速度提升，且具有類似的壓縮效率。
- 測試集：Kodak (24 張圖片，768x512)
- 同時編碼 24 張圖片 (24 個程序)
- 每個軟體編碼程序都會使用 4 個執行緒執行。(-j 4)
開發人員可以使用雲端虛擬機器 (例如 Azure NP-Series) 部署 Pulsar-AVIF 編碼器。
回應式網頁的 AVIF 功能
AVIF 有幾項實用的功能，有助於提供更具回應性的網頁。這次我們將深入探討動態 AVIF，這是目前在網路上提供酷炫動畫最有效率的方式。
動畫 AVIF
動畫 GIF 是 35 歲動畫圖片的常見格式。動畫 GIF 檔的最大缺點是只支援 256 色，且壓縮效果不佳，因此檔案大小非常大，且實際用途的解析度或影格速率受到限制。相反地，動畫 AVIF 編碼其實與 AV1 影片編碼方案相同，可大幅縮減檔案大小，相較於 GIF 動畫，檔案大小可減少許多。
我們執行了簡單的基準測試，並將一組動畫 GIF 編碼為 AVIF 和 JPEG XL。在測試集上，相較於原始 GIF 檔案，檔案大小節省百分比的中位數約為 86%，相較於動畫 JPEG XL 檔案則約為 73%*。
Chrome、Firefox 和 Safari 都支援動畫 AVIF 播放功能。
FFmpeg 是建立 AVIF 動畫檔案的工具之一。以下是使用 FFmpeg 將 GIF 轉換為 AVIF 的基本範例：
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF 是所需的輸出品質，範圍為 0 到 63。值越低，品質越好，檔案大小也越大。0 使用無損壓縮。針對小型動畫 AVIF 檔案，請先使用 23 的值。
根據預設，FFmpeg 會使用 libaom 來編碼 AVIF 圖片，但是在適用情況下，也能使用 rav1e 或 SVT-AV1。如要進一步瞭解編碼器選項，以及如何調整速度/品質取捨的編碼參數，請參閱 FFmpeg 的 AV1 編碼指南。
另一種用途是將 AV1 影片重新包裝為 AVIF，而不需要重新編碼原始檔案。這比解碼/編碼原始 AV1 檔案便宜許多，而且可讓 AV1 影片與 <img> 元素搭配使用。您可以將 -c:v copy 傳遞至 FFmpeg 來執行這項操作。
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
結論
自推出以來，網路上的 AVIF 使用量持續增加，且廣泛受到瀏覽器、圖片 CDN、WordPress 外掛程式和編碼工具的支援。總而言之，AVIF 是網路上提供圖片的絕佳選擇；AVIF 不僅能快速編碼和解碼，還能提供最佳品質或最小檔案大小 (視網站需求而定)。AVIF 是網路上傳遞動畫的最佳方式。如有任何疑問、意見或提出功能要求，歡迎透過 av1-discuss 郵寄清單、AOM GitHub 社群和 AVIF wiki 與我們聯絡。