WebP vs AVIF：下一代圖片格式完整比較

如果 WebP 已經讓 PNG 和 JPG 顯得過時，那麼 AVIF 正在對 WebP 做同樣的事情。AVIF 是目前壓縮效率最高的主流圖片格式之一，但它也帶來了新的相容性挑戰。本文深入比較 WebP 和 AVIF 的每個面向，幫助你決定是否該跟上這波技術演進。

什麼是 AVIF？

AVIF（AV1 Image File Format）是基於 AV1 視訊編碼技術衍生而來的靜態圖片格式，由開放媒體聯盟（Alliance for Open Media，AOM）在 2019 年正式發布。AOM 的成員包括 Google、Apple、Mozilla、Netflix、Microsoft 等科技巨頭，這使得 AVIF 從一開始就擁有強大的行業支持。

AV1 編碼器在視訊領域已被證明是壓縮效率的頂尖選手。AVIF 將這套先進技術應用於靜態圖片，結果令人印象深刻。

AVIF 的壓縮率優勢

研究數據顯示，AVIF 的有損版本比同等 WebP 平均小 20%；與 JPG 相比，差距可達 50% 以上。無損版本的 AVIF 也比無損 WebP 更小，儘管差距相對較小。

在實際測試中：

• 一張 1920×1080 的高品質照片：JPG 約 500 KB → WebP 約 380 KB → AVIF 約 280 KB
• 同等感知品質下，AVIF 的資料量往往只有 JPG 的一半甚至更少
• 在低品質設定下，AVIF 比 WebP 更能抵抗壓縮偽影，尤其在細節豐富的區域

AVIF 優異壓縮率的關鍵在於其更大的變換塊大小（最大支援 128×128 像素的編碼塊）和更先進的運動補償技術（雖然對靜態圖片而言不直接適用，但衍生的技術確實更有效率）。

HDR 與色彩深度支援

這是 AVIF 相對於 WebP 的一個重要差異化優勢。AVIF 原生支援：

• HDR（高動態範圍）：能記錄更廣的亮度範圍，在支援 HDR 的顯示器上呈現更豐富的視覺層次
• 10 位元和 12 位元色彩深度：相比 WebP 和 JPG 的 8 位元，能呈現更多色階，有效避免漸層區域的色帶（banding）問題
• 廣色域（Wide Color Gamut）：支援 P3 和 Rec. 2020 色彩空間，適合高端顯示設備

WebP 則僅支援 8 位元色彩深度和標準動態範圍。對於大多數一般網頁圖片，這個差距不明顯；但對於攝影展示、高端電商產品圖、影視相關網站，AVIF 的色彩優勢相當顯著。

透明度支援

AVIF 和 WebP 都完整支援 Alpha 通道透明度。在透明圖形的壓縮效率上，AVIF 同樣佔有優勢——相同視覺品質下，AVIF 的透明背景圖通常比 WebP 更小。

瀏覽器相容性差距

這是目前選擇 AVIF 的最大障礙。截至 2024 年，各瀏覽器的支援狀況如下：

• Chrome：85 版起支援（2020 年 8 月）✓
• Firefox：93 版起支援（2021 年 10 月）✓
• Safari：16.4 版起支援（2023 年 3 月）✓（較晚加入）
• Edge：121 版起支援（2024 年 1 月）✓
• Internet Explorer：不支援 ✗

整體全球支援率約為 92–93%，低於 WebP 的 97%。特別是 Safari 直到 2023 年才開始支援，意味著使用 iOS 或較舊 macOS 的用戶可能看不到 AVIF 圖片。

另一個問題是編碼速度：AVIF 的編碼比 WebP 慢得多，這對需要即時生成或動態調整圖片的應用程式是一個實際挑戰。解碼速度也較慢，在低端設備上可能造成可察覺的延遲。

實際使用建議

考慮到相容性問題，最穩健的策略是同時提供多種格式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述文字">
</picture>

這樣的設定讓支援 AVIF 的瀏覽器獲得最佳體驗，不支援 AVIF 但支援 WebP 的瀏覽器退回 WebP，完全不支援現代格式的則使用 JPG 作為保底。

各使用場景的格式建議

• 高流量電商網站：值得投入資源同時生成 WebP 和 AVIF 版本，搭配 <picture> 元素分發
• 攝影和藝廊網站：AVIF 的高色彩深度和 HDR 支援使其特別有吸引力
• 一般部落格和內容網站：WebP 已足夠，AVIF 的邊際收益不一定值得增加工作流程複雜度
• 設計素材儲存：繼續使用 PNG，AVIF 在創意工具中的支援仍不穩定
• CDN 和圖片服務：Cloudflare、Fastly 等主要 CDN 已支援自動提供 AVIF，啟用成本很低

未來趨勢

從技術演進的角度看，AVIF 代表了靜態圖片格式的未來方向。隨著 Safari 在 2023 年完成支援，主要瀏覽器的相容性缺口已大幅縮小。編碼速度問題也在持續改善——新版 libavif 函式庫的速度已比早期版本快數倍。

預計在未來 2–3 年內，AVIF 的全球支援率將追上 WebP 目前的水準。現在開始在基礎設施中支援 AVIF，是具有前瞻性的投資。但在相容性完全成熟之前，WebP 仍是更安全的主力選擇。

值得一提的是，JPEG XL（JXL）也是另一個競爭格式，在某些指標上甚至超越 AVIF。但 Chrome 在 2022 年撤回了對 JXL 的支援，使其前景不明朗。目前，WebP + AVIF 的組合是最務實的策略。

總結

AVIF 在技術規格上全面領先 WebP，但相容性和工具鏈成熟度仍是制約因素。最佳策略是：以 WebP 作為廣泛相容的主力格式，在支援條件允許時疊加 AVIF。對於追求極致效能的網站，現在就可以開始部署 AVIF；對於一般應用，WebP 已是非常優秀的選擇。

在瀏覽器裡直接完成，檔案不會離開你的電腦：圖片格式轉換