更新 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 與我們聯絡。