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

關於生態系統採用 AVIF 的最新資訊。

Jani Huoponen
Jani Huoponen
LinkedIn
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

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

AVIF 生態系統有哪些新功能？

自 Chrome、Firefox 和 Safari 推出 AVIF 以來，網路的 AVIF 使用率一直在穩定成長；目前幾乎所有瀏覽器都支援 AVIF。

在 Chrome 加入 AVIF 穩定支援功能後，光是 Chrome 就在短短一年內，AVIF 的使用量就成長了大約百分之一。

2021 年 5 月至 2023 年 3 月，Chrome 的 AVIF 使用情形折線圖。支援服務量從 0% 成長至僅不到 1.4%，

許多圖片 CDN (例如 Akamai、Cloudflare、Cloudinary 和 Imgix) 正在提供 AVIF 圖片。在一則介紹 AVIF 支援功能的網誌文章中，Iimgix 指出，相較於 WebP 檔案，檔案大小減少了 60%，且檔案減少了 35%。縮減這些檔案的大小可大幅節省儲存空間，而且可以加快網頁載入速度，進而縮短最大內容繪製 (LCP) 時間。LCP 是網站體驗核心指標之一，代表網頁上最大內容區塊的載入速度。使用新型轉碼器壓縮圖片是減少 LCP 的關鍵技巧之一。Lighthouse 是一項功能強大的 Chrome 開發人員工具，可用來測試網站，瞭解 AVIF 能為您省下多少錢。

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

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

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。與以軟體為基礎的語言相比，Pulsar-AVIF 的速度提升了 7 到 23 倍，而且壓縮效率也差不多。

編碼器 編碼時間 (毫秒) 每秒畫格數 CPU 使用率 硬體規格
Pulsar-AVIF
(FPGA) 		60 409.85 305% AMD Alveo U250 1ea + Intel(R) Xeon(R)
2.6 GHz、10 核心的白金級 8171 CPU
鳥
(libaom) 		405 59:26 3200% Intel(R) Xeon(R) Platinum 8370C CPU (
) 2.8 GHz，32 個核心
鳥
(SVT-AV1) 		1325 18:11 3200% Intel(R) Xeon(R) Platinum 8370C CPU (
) 2.8 GHz，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 v3.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 是所需的輸出品質 (範圍從 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 與我們聯絡。

主頁橫幅來源：Unsplash 提供，來源：Amal S 。