關於在生態系統中採用 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 圖片。Imgix 在一篇宣布支援 AVIF 的網誌文章中，發現比 WebP 節省了 60% 的檔案大小，還比 WebP 節省 35%。縮減檔案大小不僅可大幅節省儲存空間，但也有助於加快頁面載入速度，進而加快最大內容繪製 (LCP) 時間。LCP 是網站體驗核心指標之一，代表網頁上最大內容區塊的載入速度。使用新型轉碼器壓縮圖片是減少 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。與軟體式裝置相比，Palsar-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 以來，網路的 AVIF 使用量一直穩定增加，並受到瀏覽器、圖片 CDN、WordPress 外掛程式和編碼工具的廣泛支援。總而言之，AVIF 是在網路上放送圖片的理想選擇；AVIF 不但快速編碼與解碼，還提供畫質最佳或最小的檔案大小，而且根據個人喜好調整網站。AVIF 是在網頁上放送動畫最有效的方式。如有任何問題、意見或功能要求，歡迎透過 av1-discuss 郵寄清單、AOM GitHub 社群和 AVIF 維基與我們聯絡。
主頁橫幅圖片來源為 Amal S ，來自「Unsplash」。