跳至內容
Vizua

WebP 與 AVIF：如何選擇並測試合適的圖片格式

更新:

在部分圖片和品質目標下，AVIF 可能勝過 WebP；WebP 則可能編碼較快，並更適合較廣的舊有流程。副檔名無法保證結果。請比較代表性輸出、相容性和流程成本，並在受眾需要時提供備援。

兩種格式的背景

WebP 和 AVIF 都源自影片編解碼器。Google 於 2010 年發布 WebP，基礎是 VP8——也就是 WebM 影片格式所使用的技術。開放媒體聯盟（Alliance for Open Media）則於 2019 年發布 AVIF，基礎是 AV1，這是由 Google、Mozilla、Apple、Netflix 等多家公司共同開發的新一代高效編解碼器。

AV1 提供的較新編碼工具可以改善壓縮，而較簡單、成熟的 WebP 實作可能降低處理成本。實際編碼與解碼表現取決於編解碼器實作、設定、圖片特徵和裝置。

壓縮效率：檔案究竟小多少？

基準結果會隨測試圖片集、編碼器、運算強度設定、來源歷程及品質指標而變。負責任的測試會統一尺寸和中繼資料政策，並結合多種視覺指標與人工檢查：

  • AVIF — 可在照片、漸層、HDR 及高位元深度流程中得到出色結果，但編碼成本可能很高
  • WebP — 可用成熟工具產生有效率的有損或無損輸出，許多流程的營運複雜度也較低

不要把格式的宣傳平均值當作單一檔案的預測。從同一母檔輸出兩種格式，配對可比較的視覺品質，並把編碼時間、解碼表現、中繼資料及備援傳輸納入決策。

非照片素材的表現可能不同於照片基準。對簡單圖形、圖示及平面插畫，可在支援時比較無損或近無損候選；調色盤、透明度、編碼器和設定都可能讓任一格式勝出。

瀏覽器與軟體支援

瀏覽器 WebP 狀態 AVIF 狀態
Chrome 目前版本支援 目前版本支援
Firefox 目前版本支援 目前版本支援
Safari 目前版本支援 目前版本支援
Edge 目前版本支援 目前版本支援
Samsung Internet 目前版本支援 檢查目標版本和裝置
其他接收端 檢查 WebView、郵件、機器人和應用程式 檢查 WebView、郵件、機器人和應用程式

支援表會改變，全球占比也不等於你的受眾。請檢查目標瀏覽器及非瀏覽器接收端。<picture> 元素可依序提供 AVIF、WebP，並以 JPEG 作為最後的 <img> 備援： 

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="圖片說明" />
</picture>

編碼速度與工具支援

在相近的運算強度設定下，WebP 編碼器通常比 AVIF 需要較少運算，但比例差異很大。如果 CMS 在上傳時或大量批次轉換圖片，請使用實際部署的程式庫和設定測試吞吐量、記憶體、佇列時間及輸出品質。

編碼器效能會隨程式庫和版本改變。解碼成本也受尺寸、位元深度、裝置、瀏覽器及實作影響。請在目標低階裝置測試，不要假設差異無法察覺。

工具支援廣泛但不一致。請在實際使用的編輯器、CMS、CDN 方案及瀏覽器環境確認匯入、匯出、動畫、色彩描述檔、中繼資料和自動協商。

功能比較

功能 WebP AVIF
有損壓縮支援（VP8） 是（AV1）；相對大小會變
無損壓縮支援支援
透明度（Alpha）支援支援
動畫支援支援
高位元深度／HDR 訊號 WebP 基礎編碼為 8 位元；描述檔仍會影響色彩 AVIF 描述檔可攜帶較高位元深度及 HDR 相關中繼資料
最大解析度 文件記載上限為 16383 × 16383 受描述檔、容器及解碼器限制
編碼速度 成本通常較低 成本通常較高；請測試使用的編碼器
解碼速度 視實作而定 視實作而定
瀏覽器支援 目前主要瀏覽器 目前主要瀏覽器；檢查舊版目標

AVIF 可以表達高於 WebP 8 位元編碼的位元深度、廣色域及 HDR 訊號。但這些能力不保證色彩準確；母帶處理、描述檔、中繼資料、瀏覽器行為、螢幕能力和測試都仍然重要。

該選哪種格式？

選擇 AVIF 的情況：

  • 你能掌控圖片處理流程，並可提供備援格式
  • 代表性的 AVIF 輸出能改善相關的傳輸或品質瓶頸
  • 你需要高位元深度或 HDR 等 AVIF 功能，且已測試完整色彩路徑
  • CDN 或建置流程能正確產生、快取及協商已驗證的變體

選擇 WebP 的情況：

  • 實測編碼吞吐量或營運簡易性偏向 WebP
  • 支援的客戶端接受 WebP，額外的 AVIF 變體不值得建立
  • 代表性圖形以 WebP 達到位元組和品質目標
  • 已在使用 WebP 且效能良好，遷移成本不划算

實測效益值得時，同時使用兩者：

<picture> 組合會增加產生、儲存、快取、標記及品質審查工作，但也可能改善傳遞。有些 CDN 會自動協商；仍需驗證方案行為、快取鍵、Vary 處理、品質設定及備援輸出，不要直接假設傳遞「最佳」。

如何轉換圖片

Vizua 可直接在瀏覽器建立支援的 WebP 和 AVIF 輸出，無須安裝軟體。所選檔案不會送到我們的圖片處理伺服器；必要程式碼和網站服務仍可能使用網路：

若使用 JPEG 來源，我們的圖片壓縮不失真指南說明如何選擇起始設定並比較實際輸出。

常見問題

可以使用 AVIF 而不提供 WebP 備援嗎？

只有在目標受眾及所有相關接收端都能解碼 AVIF 時才可以。目前主要瀏覽器均支援 AVIF，但舊版瀏覽器、內嵌 WebView、郵件用戶端、機器人、編輯器及下游系統可能不同。需要廣泛傳遞時，在 picture 元素中提供 WebP 或 JPEG 備援通常是成本很低的保障。

哪種格式在瀏覽器中載入更快？

沒有永遠的贏家。傳輸大小、連線、快取、解碼器實作、圖片尺寸、位元深度、裝置及編碼器設定都會影響總時間。WebP 的編碼成本通常較低，而妥善編碼的 AVIF 可能傳輸較少位元組。請在目標裝置測試代表性檔案，不要假設解碼差異可以忽略。

把 JPEG 轉成 AVIF 或 WebP 會損失畫質嗎？

從一種有損格式轉成另一種時，已經改變的像素會再次編碼，因此可能產生世代損失。較高的品質數值不保證影響較小，而且不同編碼器的刻度不同。請從最佳可用母檔產生傳遞格式，保留母檔並檢查輸出。

應該把整個圖片庫轉成 AVIF 嗎？

不應在未測試前這樣做。轉換既有的有損圖片庫會增加工作，也可能增加世代損失，節省量則因來源而異。先從母檔的新輸出或代表性樣本開始，比較品質與營運成本；若實測效益不足以支持遷移，就保留 WebP 或 JPEG。

親自試試兩種格式

可在瀏覽器免費轉換。所選檔案不會送到我們的圖片處理伺服器；網站服務仍可能使用網路。

轉換為 AVIF 壓縮 WebP JPG 轉 WebP