使用 AVIF 壓縮網站上的圖片

Jai Krishnan
Jai Krishnan
Wan-Teh Chang
Wan-Teh Chang
Jeremy Wagner

我們經常撰文討論圖片對網站造成的膨脹問題，而Lighthouse等工具也會指出圖片載入作業對使用者體驗造成負面影響的情況，例如增加載入時間，或將頻寬從更重要的資源中移除。解決這個問題的方法之一，就是使用新式壓縮技術來縮減圖片的檔案大小。AVIF 圖片格式是網頁開發人員的新選擇。本篇文章將說明 AVIF 開放原始碼工具的最新更新內容，並介紹 libaom 和 libavif 編碼程式庫，以及如何使用這些程式庫有效地編碼 AVIF 圖片的教學課程。

AVIF 是一種圖片格式，以 AV1 影片轉碼器為基礎，並根據 Alliance for Open Media 標準化。相較於 JPEG 和 WebP 等其他圖片格式，AVIF 的壓縮效果大幅提升。雖然實際節省的空間取決於內容、編碼設定和品質目標，但我們和其他研究人員發現，相較於 JPEG，使用 WebP 可節省超過 50% 的空間。

使用 AVIF 的圖片
1120 x 840 像素 AVIF，檔案大小為 18,769 位元組 (按一下可放大)
使用 JPEG 的圖片
1120 x 840 像素 JPEG，檔案大小為 20,036 位元組 (按一下可放大)

此外，AVIF 還新增了編解碼器和容器支援功能，可支援高動態範圍和寬廣色域、膠卷顆粒合成和漸進式解碼。

新功能

自 Chrome M85 開始支援 AVIF 以來，開放原始碼生態系統的 AVIF 支援功能已在許多方面有所改善。

Libaom

Libaom 是開放原始碼 AV1 編碼器和解碼器，由開放媒體聯盟 (Alliance for Open Media) 中的公司維護，並用於 Google 和其他會員公司的許多製作服務。在 libaom 2.0.0 版本 (Chrome 新增 AVIF 支援的同時) 和最近的 3.1.0 版本之間，程式碼庫中已加入許多靜態影像編碼最佳化功能。包括：

  • 針對多執行緒與圖塊編碼進行最佳化。
  • 記憶體用量降低 5 倍。
  • 降低 CPU 使用量 6.5 倍，如下圖所示。
使用 speed=6、cq-level=18 處理 8.1 MP 影像

這些變更可大幅降低編碼 AVIF 的費用；特別是，您網站上最常載入的圖片，或優先順序最高的圖片。隨著 AV1 的硬體加速編碼功能在伺服器和雲端服務中越來越普及，建立 AVIF 圖片的成本也會持續降低。

Libavif

Libavif 是 AVIF 的參考實作項目，是一種開放原始碼 AVIF 多路器和剖析器，可在 Chrome 中用於解碼 AVIF 圖片。您也可以搭配使用 libaom，從現有的未壓縮圖片建立 AVIF 圖片，或從現有的網路圖片 (JPEG、PNG 等) 進行轉碼。

Libavif 最近新增了對更多編碼器設定的支援，包括與更進階的 libaom 編碼器設定整合。處理管道中的最佳化功能，例如使用 libyuv 和預乘 alpha 支援快速 YUV 轉換至 RGB，可進一步加快解碼程序。最後，針對 libaom 3.1.0 中新增的全系列編碼模式，提供上述所有程式庫改善項目。

使用 avifenc 編碼 AVIF 圖片

您可以利用 Squoosh.app 對 AVIF 進行實驗。Squoosh 執行 libavif 版本的 WebAssembly 版本，並且提供與指令列工具相同的許多功能。這麼做可以輕鬆比較 AVIF 與其他舊版和新版格式。另外，Squoosh 也有專為 Node 應用程式設計的CLI 版本。

不過，WebAssembly 尚未能存取 CPU 的所有效能原語，因此如果您想以最快的速度執行 libavif，建議使用命令列編碼器 avifenc。

為瞭解如何編碼 AVIF 圖片，我們將使用上述範例中的相同來源圖片，提供教學課程。開始設定前，請備妥以下項目：

此外，您還必須安裝 zlib、libpng 和 libjpeg 的開發套件。Debian 和 Ubuntu Linux 發行版本的指令如下：

sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev

建立指令列編碼器 avifenc

1. 取得程式碼

檢查 libavif 的發布標記。

git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git

2. 將目錄變更為 libavif

cd libavif

您可以透過多種方式設定 avifenc 和 libavif 以進行建構。詳情請參閱 libavif。我們將建構 avifenc，以便以靜態方式連結至 AV1 編碼器和解碼器程式庫 libaom。

3. 取得及建構 libaom

變更為 libavif 外部依附元件目錄。

cd ext

下一個指令會擷取 libaom 原始碼，並以靜態方式建構 libaom。

./aom.cmd

將目錄變更為 libavif。

cd ..

4. 建構指令列編碼工具 avifenc

建議您為航空建立建構目錄。

mkdir build

切換至建構目錄。

cd build

建立航空的建構檔案。

cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..

建立航空。

make

您已成功建構 avifenc！

瞭解 avifenc 指令列參數

avifenc 採用的指令列結構：

./avifenc [options] input.file output.avif

本教學課程中使用的 avifenc 基本參數如下：

avifenc
--min 0將顏色的最小量化器設為 0
--max 63將顏色的最大量化器設為 63
--minalpha 0將 alpha 的 min quantizer 設為 0
--maxalpha 63將 alpha 的最大量化器設為 63
-a end-usage=q將速率控制模式設為「Constant Quality (Q)」(固定品質) 模式
-a cq-level=Q將顏色和 alpha 的量化等級設為 Q
-a color:cq-level=Q將顏色的量化等級設為 Q
-a alpha:cq-level=Q將 alpha 的量化等級設為 Q
-a tune=ssim針對 SSIM 進行調整 (預設為 PSNR)
--jobs J使用 J 工作站執行緒 (預設：1)
--速度 S將編碼器速度設為 0 到 10 (最慢到最快，預設值為 6)

cq-level 選項會設定量化等級 (0 到 63)，用於控制顏色或 Alpha 的品質。

使用預設設定建立 AVIF 圖片

最常執行的素材資源參數，是設定輸入和輸出檔案。

./avifenc happy_dog.jpg happy_dog.avif

建議您使用以下指令列對圖片進行編碼，例如以量化層級 18 為例：

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif

Avifenc 有許多選項會影響品質和速度。如要查看選項並進一步瞭解相關資訊，請執行 ./avifenc

您現在擁有自己的 AVIF 圖片了！

加快編碼器的運作速度

視電腦的核心數量而定，您可能需要變更 --jobs 參數。這個參數會設定 avifenc 用來建立 AVIF 圖片的執行緒數量。請嘗試在指令列中執行這段指令。

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif

這可讓使用者在建立 AVIF 圖片時，告知使用 8 個執行緒，進而將 AVIF 編碼速度提升約 5 倍。

對 Largest Contentful Paint (LCP) 的影響

圖片通常是最大內容繪製 (LCP) 指標的常見候選項目。改善 LCP 圖片的載入速度時，常見的最佳化建議之一，就是確保圖片經過最佳化。縮減資源的傳輸大小，可改善資源載入時間，這是處理圖片 LCP 候選項目時，要著重的四個重要階段之一。

在最佳化圖片時，強烈建議使用圖片 CDN，因為這比在網站建構程序中設定圖片最佳化管道，或手動使用編碼器二進位檔手動最佳化圖片，所需的努力程度低得多。不過，就某些專案而言，映像檔 CDN 成本可能不高。如果是這種情況，請在使用 avifenc 編碼器進行最佳化時，考量以下事項：

  • 熟悉編碼器提供的選項。您可以嘗試使用 AVIF 提供的部分編碼功能，進一步節省空間，同時保留足夠的圖片品質。
  • AVIF 提供有損和無損編碼。視圖片內容而定，某種編碼方式的成效可能會優於其他方式。舉例來說，通常以 JPEG 格式提供的相片，採用有損編碼效果可能會比較好，而如果圖片含有簡單細節或線條圖，通常以 PNG 格式提供，則無損編碼可能會比較好。
  • 如果使用支援 imagemin 的社群支援捆綁器，請考慮使用 imagemin-avif 套件，讓捆綁器輸出 AVIF 圖片變化版本。

在 LCP 候選項目為圖片的情況下，您可以嘗試使用 AVIF，藉此改善網站的 LCP 時間。如要進一步瞭解如何最佳化 LCP，請參閱最佳化 LCP 的指南。

結論

使用 libaom、libavif 和其他開放原始碼工具，您可以使用 AVIF 為網站取得最佳圖片品質和效能。這個格式才剛推出不久，最佳化和工具整合仍在積極開發中。如有任何問題、意見或功能要求，請透過 av1-discuss 電子郵件討論群組、AOM GitHub 社群和 AVIF wiki 與我們聯絡。