我們會經常撰寫來自圖片網站的大量資訊，而 Lighthouse 等工具醒目顯示，如果圖片載入對使用者體驗造成負面影響，例如增加載入時間，或佔用更多重要資源佔用的頻寬。解決方法之一是使用現代壓縮來縮減圖片檔案大小，網頁開發人員專用的新選項為 AVIF 圖片格式。這篇網誌文章說明 AVIF 開放原始碼工具的最新更新、介紹 libaom 和 libavif 編碼程式庫，並提供相關教學課程，說明如何使用這些程式庫有效率地對 AVIF 圖片進行編碼。
AVIF 是一種圖片格式，以 AV1 影片轉碼器為基礎，並根據 Alliance for Open Media 標準化。相較於 JPEG 和 WebP 等其他圖片格式，AVIF 的壓縮功能可大幅提升。雖然確切節省量取決於內容、編碼設定和品質目標，但我們和其他方法所省下的時間比 JPEG 高出 50% 以上。
此外，AVIF 也為新的圖片功能加入轉碼器和容器支援，例如高動態範圍和廣色域、膠片合成和漸進式解碼。
新功能
自 Chrome M85 開始支援 AVIF 之後，對開放原始碼生態系統中的 AVIF 支援功能已經在許多層面上獲得改善。
黎巴嫩
Libaom 是開放原始碼的 AV1 編碼器和解碼器，由「Alliance for Open Media」公司維護，並用於 Google 和其他成員公司的許多實際工作環境服務。在 libaom 2.0.0 版本期間 (Chrome 新增 AVIF 支援功能的同時)，以及最近 3.1.0 版中，程式碼集已大幅新增靜態圖片編碼最佳化。包括：
- 針對多執行緒與圖塊編碼進行最佳化。
- 降低 5 倍記憶體用量。
- 以及減少 6.5 倍的 CPU 用量，如下圖所示。
這些變更可大幅降低編碼 AVIF 的費用；特別是，您網站上最常載入的圖片，或優先順序最高的圖片。隨著伺服器和雲端服務更提供 AV1 的硬體加速編碼功能，建立 AVIF 映像檔的費用也會持續下降。
利波維夫
Libavif 是 AVIF 的參考實作，是 Chrome 中用於解碼 AVIF 圖片的開放原始碼 AVIF muxer 和剖析器。也可以與 libaom 搭配使用，從現有的未壓縮圖片建立 AVIF 圖片，或從現有網路圖片 (JPEG、PNG 等) 轉碼。
Libavif 最近開始支援更多元的編碼器設定，包括與更進階的 libaom 編碼器設定整合。使用 libyuv 快速轉換 YUV-to-RGB 等處理管道中的最佳化作業，以及預先乘法的 Alpha 支援功能，可進一步加快解碼程序。最後，針對 libaom 3.1.0 中新增的全系列編碼模式，提供上述所有程式庫改善項目。
使用 avifenc 編碼 AVIF 圖片
您可以利用 Squoosh.app 對 AVIF 進行實驗。Squoosh 執行 libavif 版本的 WebAssembly 版本，並且提供與指令列工具相同的許多功能。輕鬆比較 AVIF 與其他新舊格式。此外，還有專為節點應用程式設計的 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. 取得並建構程式庫
變更為 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 [options] input.file output.avif
本教學課程使用的基本參數如下：
| 航空 | |
|---|---|
| --min 0 | 將顏色下限設為 0 |
| --max 63 | 將顏色最大量化器設為 63 |
| --minalpha 0 | 將 Alpha 值的最小量化器設為 0 |
| --maxalpha 63 | 將 Alpha 最大量化器設為 63 |
| -a end-usage=q | 將頻率控制模式設為「持續品質 (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) |
| --工作 J | 使用 J 工作站執行緒 (預設：1) |
| --速度 S | 將編碼器速度設為 0 至 10 (最慢，預設為 6) |
cq 層級選項會設定量化等級 (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 參數。這個參數可設定要使用多少執行緒建立 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 成本可能不高。如果是這種情況，在使用 avinc 編碼器進行最佳化時，請考慮以下事項：
- 熟悉編碼器提供的選項。透過試用部分 AVIF 提供的編碼功能，您或許可以節省額外費用，同時仍可保留足夠的影像品質。
- AVIF 提供有損與無損編碼。視圖片內容而定，其中一種編碼類型的成效可能優於其他編碼。舉例來說，以 JPEG 格式拍攝的相片通常採用有損編碼的效果最好，而無損編碼方式則最適合含有一般以 PNG 格式呈現的簡單細節或線條藝術的圖片。
- 如果您的整合工具提供 Imagemin 社群支援，建議您使用 imagemin-avif 套件來輸出 AVIF 圖片變化版本。
如果能試用 AVIF，這樣即使 LCP 候選人適合圖片，您網站的 LCP 就比較有進步了。如要進一步瞭解如何最佳化 LCP，請參閱最佳化 LCP 指南。
結論
使用 libaom、libavif 和其他開放原始碼工具，您可以使用 AVIF 為網站取得最佳圖片品質和效能。這個格式才剛推出不久，最佳化和工具整合仍在積極開發中。如有任何疑問、意見或功能要求，請透過 av1-discuss 郵寄清單、AOM GitHub 社群和 AVIF wiki 與我們聯絡。