部署 AVIF 提高回應速度的網站

更新 AVIF 在生態系統中採用的方式。

Jani Huoponen
Jani Huoponen
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

AVIF 是一種新圖片格式,由於壓縮率高、效能與廣泛採用,因此在網路上迅速獲得人氣。AVIF 是免權利金的開放式圖片格式,採用英國 Alliance for Open Media 標準化的 AV1 影片轉碼器。這篇文章將概略說明 AVIF 在生態系統中的應用方式,以及開發人員在靜態圖片和動畫中使用 AVIF 時,可期待獲得哪些效能和品質優勢。

自從 Chrome、Firefox 和 Safari 推出 AVIF 格式後,網路上的 AVIF 使用率便持續攀升;目前幾乎所有瀏覽器都支援 AVIF。

在 Chrome 中,自 Chrome 在穩定版中新增 AVIF 支援功能後,一年多來 AVIF 的使用率已成長到約 1%。

從 2021 年 5 月到 2023 年 3 月,Chrome 中使用 AVIF 的折線圖。支援率從 0% 穩步成長至 1.4% 以下。

目前有許多圖片 CDN (例如 AkamaiCloudflareCloudinaryImgix) 提供 AVIF 圖片。在宣布支援 AVIF 的網誌文章中,Imgix 表示,相較於 JPEG,AVIF 可節省 60% 的檔案大小,相較於 WebP,則可節省 35% 的檔案大小。除了大幅節省儲存空間,還能加快網頁載入速度,縮短最大內容繪製時間 (LCP)。LCP 是 Core Web Vitals 指標之一,代表網頁上最大內容區塊的載入速度。使用新型轉碼器壓縮圖片是減少 LCP 的關鍵技巧之一。Lighthouse 是一項出色的 Chrome 開發人員工具,可用於測試網站,並查看 AVIF 可節省多少空間

WordPress 是全球最受歡迎的網站平台,開發人員可以利用外掛程式將圖片轉換為 AVIF,例如:

對於更多實作練習的開發人員來說,ImageMagickFFmpeg 等工具都是很好的起點。

AVIF 編碼速度

如要大規模部署圖片壓縮,快速編碼速度和視覺品質至關重要。AVIF 軟體編碼速度在過去兩年間大幅提升。與其他新型靜態圖片格式相比,AVIF 產生的檔案較小,但視覺品質相近 (請參閱下方圖表,較低的值代表較佳),且編碼速度較快

長條圖比較各種圖片編碼器檔案大小,以 TurboJPEG 輸出的百分比表示。AVIF 的值最低,然後是 JPEG XL、WebP,最後是 MozJPEG。

下方圖表 (越高越好) 表示 AVIF 編碼速度與其他圖片格式的差異。舊一代編碼器 (例如 WebP) 可利用較不複雜 (但效率較低) 的壓縮演算法。透過多執行緒編碼方案,AVIF 可在常見用途中達到類似的效能,同時提供顯著的壓縮效益。

圖片編碼器編碼速度的比較。比較的編碼器是平均 AVIF、平均 JPEG XL、平均 WebP (一個執行緒) 以及平均 MozJPEG (一個執行緒)。就最佳品質和預設努力程度而言,AVIF 通常是速度最快的圖片編碼器之一,但就即時效能而言,它是所有編碼器中最慢的。

如果開發人員想進一步比較詳細的編碼速度和影像品質,圖片編碼比較網站提供了可重現的基準結果。

雖然針對 AVIF 和 WebP 等新型圖片編碼器的軟體實作已針對 x86 和 ARM 處理器架構進行最佳化,但大規模壓縮大量圖片的運算成本可能很高。另一種降低壓縮成本的替代方式是探索硬體加速。Bluedot 開發的硬體加速 Pulsar-AVIF 編碼器是在可程式化的 FPGA 上執行,例如 AMD 的 Alveo U250。與以軟體為基礎的 avifenc 相比,Pulsar-AVIF 可提供 7 到 23 倍的速度提升,且具有類似的壓縮效率

編碼器 編碼時間 (毫秒) 每秒畫格數 CPU 使用率 硬體規格
Pulsar-AVIF
(FPGA)
60 409.85 305% AMD Alveo U250 1ea + Intel(R) Xeon(R)
Platinum 8171 CPU (2.6GHz、10 個核心)
avifenc
(libaom)
405 59.26 3200% Intel(R) Xeon(R) Platinum 8370C CPU,速度為 2.8GHz,有 32 個核心
avifenc
(SVT-AV1)
1325 18.11 3200% Intel(R) Xeon(R) Platinum 8370C CPU,速度為 2.8GHz,有 32 個核心
AVIF 編碼速度比較
  • 測試集: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%*。

動畫圖片轉碼器效能的比較。在平均和中位檔案大小方面,AVIF 都優於 GIF 和 JPEG XL。
* libavif 和 libjxl 版本:libavif 4cff6a3 版 (libaom 3.5.0 版),libjxl 176b1c03 版。測試集:Wikipedia 提供的 15 個 GIF 範例。

Chrome、Firefox 和 Safari 都支援動畫 AVIF 播放功能。

FFmpeg 是建立 AVIF 動畫檔案的工具之一。以下是使用 FFmpeg 將 GIF 轉換為 AVIF 的基本範例:

ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"

$CRF 是所需的輸出品質,範圍為 063。值越低,品質越好,檔案大小也越大。0 使用無損壓縮。針對小型動畫 AVIF 檔案,請先使用 23 的值。

根據預設,FFmpeg 會使用 libaom 來編碼 AVIF 圖片,但是在適用情況下,也能使用 rav1eSVT-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 與我們聯絡。

主頁橫幅圖片取自 Unsplash,由 Amal S 拍攝。