我們會經常撰寫有關網站圖片的爆炸性內容，並指出載入圖片會對使用者體驗造成負面影響 (例如：載入時間增加或占用頻寬) 對使用者體驗造成負面影響的工具。修正此問題的方法之一，是使用現代壓縮縮減圖片大小，而網頁程式開發人員也可使用 AVIF 圖片格式。這篇網誌文章介紹 AVIF 開放原始碼工具近期的更新，引入了 libaom 和 libavif 編碼程式庫，並包含如何運用這些程式庫有效將 AVIF 圖片編碼的教學課程。
AVIF 是以 AV1 影片轉碼器為基礎的圖片格式，並由 Open Media 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 倍。
- 降低 CPU 用量 6.5 倍，如下圖所示。
這些變更可大幅降低 AVIF 編碼的成本，尤其是最常載入的圖片，或是網站上優先順序最高的圖片。隨著 AV1 的硬體加速編碼在伺服器和雲端服務的可用性越來越高，建立 AVIF 映像檔的費用也會持續下降。
利比亞
Libavif 是 AVIF 的參考實作，是 Chrome 的開放原始碼 AVIF muxer 和剖析器，可用於解碼 AVIF 圖片。也可以與 libaom 搭配使用，從現有的未壓縮圖片中建立 AVIF 圖片，或從現有的網路圖片 (JPEG、PNG 等) 轉碼。
Libavif 最近開始支援更多種編碼器設定，包括與更進階的 libaom 編碼器設定整合。 我們改善了處理管道中的最佳化功能，例如使用 libyuv 和預先擴充 Alpha 支援快速將 YUV 轉 RGB 轉換等最佳化作業，進一步加快解碼程序。最後，支援 libaom 3.1.0 中新增的全內部編碼模式，包含上述提及的所有 libaom 改善項目。
使用 avifenc 編碼 AVIF 圖片
進行 AVIF 實驗的快速方法是 Squoosh.app。Squoosh 執行的是 libavif 的 WebAssembly 版本，並公開許多與指令列工具相同的功能。輕鬆比較 AVIF 與其他新舊格式。此外，Squoosh 也有專為節點應用程式所設計的 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
建構指令列編碼器行為
1. 取得程式碼
查看 libavif 的發布標記。
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. 將目錄變更為 libavif
cd libavif
您可以透過多種方式設定 libavif 和 libavif 進行建構。 詳情請參閱 libavif。 我們將建構程式碼，讓它以靜態方式連結至 AV1 編碼器和解碼器程式庫 libaom。
3. 取得及建構程式庫
變更為 libavif 外部依附元件目錄。
cd ext
下一個指令會提取 libaom 原始碼 並以靜態方式建構 libaom
./aom.cmd
將目錄變更為 libavif。
cd ..
4. 建立指令列編碼工具 avifenc
建議您建立 avifenc 的建構目錄。
mkdir build
變更為建構目錄。
cd build
建立 avifenc 的建構檔案。
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
本教學課程中使用的 avifenc 基本參數如下：
| 阿維奇 | |
|---|---|
| --最小值 0 | 將顏色的最小量化器設為 0 |
| --上限 63 | 將顏色最大量化器設為 63 |
| --minalpha 0 | 將 Alpha 版的最小量化器設為 0 |
| --maxalpha 63 | 將 Alpha 版的最大值設為 63 |
| -a end-usage=q | 將費率控制模式設為「常數品質 (Q)」模式 |
| -a cq-level=Q | 將顏色和 Alpha 值設定為量化等級 |
| -a color:cq-level=Q | 將顏色量化程度設為 Q |
| -a alpha:cq-level=Q | 將 Alpha 測試版的量化等級設為 Q |
| -a tune=sim | 調整 SSIM (預設為 PSNR) |
| --jobs J | 使用 J 工作站執行緒 (預設：1) |
| --Speed S | 將編碼器速度設為 0 到 10 (最快速度，預設值：6) |
cq 層級選項可設定量化等級 (0-63)，控制色彩或 Alpha 的品質。
使用預設設定建立 AVIF 映像檔
要執行 avifenc 的最基本參數，就是設定輸入和輸出檔案。
./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 圖片在建立 AVIF 圖片時使用 8 個執行緒，進而使 AVIF 編碼速度大約加快 5 倍。
對最大內容繪製 (LCP) 的影響
圖片是最大內容繪製 (LCP) 指標的常見候選項目。如要改善 LCP 圖片的載入速度，其中一項常見建議是確保圖片已最佳化。縮減資源的傳輸大小能夠改善其資源載入時間，這是在處理圖片的 LCP 候選項目時，目標四大階段之一。
強烈建議您使用圖片 CDN 對圖片進行最佳化。相較於在網站的建構程序中設定圖片最佳化管道，或手動使用編碼器二進位檔，手動將圖片最佳化，這種做法可省下許多心力。但對某些專案來說，映像檔 CDN 可能過於昂貴。在這種情況下，使用 avifenc 編碼器進行最佳化時，請考慮以下事項：
- 熟悉編碼器提供的選項。嘗試各種 AVIF 可用的編碼功能，或許就能節省更多成本，同時保有足夠的影像品質。
- AVIF 同時提供有損和無損編碼。視圖片內容而定，任一類型的編碼成效可能會比其他類型來得好。舉例來說，一般為 JPEG 格式的相片在使用失真編碼的效果最好，而無失真編碼則最適合包含簡單細節的圖片或線條圖，通常以 PNG 格式提供。
- 如果使用支援 Imagemin 的套裝組合，請考慮使用 imagemin-avif 套件，讓 Bundler 輸出 AVIF 圖片變化版本。
透過 AVIF 實驗，如果 LCP 候選圖片為圖片，網站的 LCP 載入時間可能有所改善。如要進一步瞭解如何最佳化 LCP，請參閱最佳化 LCP 指南。
結語
透過 libaom、libavif 和其他開放原始碼工具，使用 AVIF 即可在網站上取得最佳影像品質和效能。這種格式仍相對新穎，我們正積極開發最佳化和工具整合功能。如果您有任何問題、留言或提出功能要求，請在 av1-discuss 郵寄清單、AOM GitHub 社群和 AVIF 維基上與我們聯絡。