我們會經常撰寫來自圖片網站的大量資訊,而 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 與我們聯絡。