2026 年的圖片格式：AVIF 何時勝過 WebP，何時不是

2026 年圖片格式的現況

AVIF 被稱為「未來」已經夠久了，久到現在感覺它已經是當下。瀏覽器支援率在 2024 年底跨過全球 95% 覆蓋率，CDNs 加入了自動 AVIF 轉碼，而多數圖片最佳化工具現在也預設提供 AVIF。與此同時，WebP 已成為安全的備援格式——普及、編碼快速，且對大多數使用情境而言已經夠好。

問題不再是 AVIF 在理論上是否更好。它確實更好。問題是實務上的取捨——編碼時間、工具成熟度、邊緣案例行為——對你的特定工作負載而言是否值得切換。

本文會走過這棵決策樹。如果你提供的是數千張使用者上傳的圖片，答案會不同於你手動微調十幾張行銷主視覺圖片。如果你在意編碼速度，答案又會改變。

AVIF 明顯勝出的地方

AVIF 使用 AV1 影片編解碼器的畫面內壓縮，這表示它受益於多年來針對動態影片的最佳化。其結果是在相同感知品質下，檔案大小穩定地比 WebP 更小，尤其是在攝影內容上。

在多組不同圖片集的重複測試中，AVIF 檔案在相同 SSIM 分數下比 WebP 小 20-30%。對高解析度照片——產品照、編輯圖片、任何寬度超過 1200px 的圖片——這個差異會很快累積。一個 2MB 的 WebP 會變成 1.4MB 的 AVIF。把這個差異乘上一個頁面上的一百張圖片，節省下來的頻寬就相當可觀。

AVIF 處理平滑漸層與低對比區域的效果也比 WebP 更好。WebP 的 VP8 血統表示它可能會在天空、陰影與其他細微色調轉換中產生色帶。AVIF 更精密的轉換編碼可以避免這一點。如果你的圖片包含大量漸層——設計作品、插圖、夕陽——AVIF 會在更小的檔案大小下呈現更乾淨的效果。

瀏覽器支援現在已經足夠強，AVIF 可以成為多數網站的主要格式。Safari 在 16.4（2023 年 3 月）加入支援，這是最後一個主要尚未支援者。截至 2026 年初，全球支援率已超過 95%。剩下的缺口是較舊的 Android 裝置與舊版企業瀏覽器，這也是為什麼你仍然需要備援格式。

WebP 仍然合理的地方

編碼速度是最大的實務限制。視品質設定與編碼器實作而定，AVIF 編碼比 WebP 慢 5-10 倍。對使用者產生內容——個人檔案照片、論壇附件、任何即時上傳的內容——這個延遲很重要。一個需要 200ms 的 WebP 編碼，會變成 2 秒的 AVIF 編碼。如果你是同步處理上傳，這就是使用者會感受到的延遲。

解法是改成非同步編碼（上傳原始檔、提供預留畫面、在背景編碼），或是對使用者產生內容維持使用 WebP，並把 AVIF 保留給你能控制的精選素材。許多網站兩者都做：行銷圖片用 AVIF，使用者上傳用 WebP。

WebP 也有更成熟的工具生態。每個圖片函式庫、CMS 外掛與 CDN 都已支援 WebP 多年。AVIF 支援正在追上，但邊緣案例仍然存在。有些較舊的 ImageMagick 建置會產生品質不佳的 AVIF 輸出。有些 CDNs 會對 AVIF 轉碼額外收費。如果你在受限環境中工作——舊版 CMS、有限預算、緊迫時程——WebP 是阻力最小的路徑。

最後，WebP 在幾乎所有情況下仍然比 JPEG 更小，而且編碼速度足以應付即時使用。如果你目前的基準是 JPEG，且尚未遷移到現代格式，WebP 是更安全的第一步。你永遠可以稍後再加入 AVIF 作為漸進增強。

實務決策樹

以下是選擇方式：

• 精選行銷圖片、主視覺圖片、編輯照片：使用 AVIF 作為主要格式，WebP 作為第一備援，JPEG 作為最終備援。檔案大小節省足以合理化編碼成本，而且你能控制流程。
• 即時上傳的使用者產生內容：使用 WebP。編碼速度比最後 20% 的壓縮效率更重要，而且你承受不起多秒的延遲。
• 插圖、平面色塊圖形、螢幕截圖：AVIF 比 WebP 更好，但對於大片平面區域的簡單圖形，PNG 通常也有競爭力。兩者都測試看看。如果你的 PNG 已經很小且壓縮良好，格式遷移可能不值得。
• 縮圖與小圖片：WebP 通常就夠了。AVIF 節省的絕對位元組數很小（一個 10KB 的 WebP 變成 8KB 的 AVIF），而在大規模情境下編碼速度更重要。
• 舊版瀏覽器支援很關鍵：維持使用 WebP 作為主要現代格式。AVIF 的 95% 覆蓋率很出色，但如果你服務的使用者群有較舊裝置或企業環境，WebP 近乎普遍的支援更安全。

如果你不確定，最安全的模式是對支援 AVIF 的瀏覽器提供 AVIF，並以 WebP 作為備援、JPEG 作為最終備援。<picture> 元素讓這件事很直接：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

這種做法讓你兩全其美：為現代瀏覽器提供最大壓縮，並為較舊瀏覽器提供安全備援。

重要的編碼設定

如果你確實採用 AVIF，編碼設定對輸出品質的影響會比 WebP 更大。AVIF 的彈性表示產生糟糕結果的方式也更多。

最重要的兩個設定是 quality 與 speed。Quality 很直觀：數字越高表示圖片看起來越好，檔案也越大。對 AVIF 而言，75-85 的 quality 設定通常是攝影內容的甜蜜點。低於 70 時，你會開始看到明顯的瑕疵。高於 90 時，檔案大小會暴增，卻沒有實質的品質提升。

Speed 控制編碼器花多少時間最佳化輸出。較慢的編碼會產生更小的檔案，但報酬會很快遞減。多數編碼器使用 0-10 的尺度，其中 0 最慢、10 最快。6-8 的 speed 設定是很好的折衷：編碼速度足以用於批次處理，檔案大小也在理論最小值的 10-15% 以內。

如果你在伺服器上編碼 AVIF，請使用較新的 libavif 或 avifenc 版本。較舊的編碼器（2024 年以前）在相同檔案大小下會產生明顯較差的輸出。這個格式仍在成熟中，而編碼器的改進相當顯著。

JPEG XL 呢？

JPEG XL 在技術上優於 AVIF 與 WebP。它壓縮效果更好、編碼更快、支援無損壓縮，並且能處理更廣泛的圖片類型。它也是一個已死的格式。

Google 在 2022 年從 Chrome 移除 JPEG XL 支援，理由是採用率低與複雜度高。Apple 從未加入支援。截至 2026 年，JPEG XL 只在 Firefox 與 Safari Technology Preview 中受到支援，這表示它不適合用於正式環境。除非瀏覽器供應商改變方向——可能性不高——JPEG XL 仍會是愛好者與封存工作流程使用的格式，而不是網頁使用的格式。

遷移路徑

如果你要從 JPEG 移至現代格式，最安全的路徑是：

1. 稽核你目前的圖片流程。確認圖片來源（CMS、使用者上傳、CDN）、它們如何被處理，以及你目前提供哪些格式。為什麼在瀏覽器中處理圖片是隱私上的勝利 涵蓋了圖片處理發生位置的一些取捨。
2. 從 WebP 開始。它編碼快速、支援廣泛，並能立即降低檔案大小。這是低風險的第一步。
3. 為精選內容加入 AVIF。一旦 WebP 穩定運作，便為檔案大小最重要的高價值圖片加入 AVIF。測試編碼時間，並確認你的 CDN 或圖片服務支援它。
4. 監控瀏覽器支援。AVIF 目前覆蓋率很出色，但如果你的分析顯示有相當比例的使用者使用較舊瀏覽器，請保留 WebP 作為主要格式。
5. 衡量影響。使用真實使用者監控來追蹤遷移前後的頁面載入時間與 Largest Contentful Paint。如何閱讀 Lighthouse 報告而不恐慌 是解讀效能指標的實用指南。

目標不是因為某個格式新就使用它。目標是在不犧牲品質的情況下提供更小的圖片，進而改善頁面速度並降低頻寬成本。AVIF 在多數情況下比 WebP 更能做到這一點，但實務限制——編碼速度、工具、瀏覽器支援——表示 WebP 對某些工作負載而言仍然是正確選擇。

重點摘要

• 在相同品質下，AVIF 比 WebP 小 20-30%，尤其適用於攝影內容與帶有漸層的圖片。
• AVIF 編碼比 WebP 慢 5-10 倍，除非你進行非同步編碼，否則它不適合即時使用者上傳。
• AVIF 的全球瀏覽器支援率超過 95%，但 WebP 近乎普遍的支援使它成為更安全的備援。
• 對精選行銷圖片，使用 AVIF 作為主要格式，並搭配 WebP 與 JPEG 備援。對使用者產生內容，維持使用 WebP。
• JPEG XL 在技術上更優秀，但沒有可行的瀏覽器支援，不應用於正式網站。

FAQ

Q: 我可以在沒有備援的情況下提供 AVIF 嗎？

A: 還不行。AVIF 支援率超過 95%，但這仍然留下數百萬使用者使用較舊瀏覽器。請一律使用 <picture> 元素加入 WebP 或 JPEG 備援。瀏覽器會自動選擇它支援的最佳格式。

Q: AVIF 支援透明度嗎？

A: 支援。AVIF 支援 alpha channel，因此在需要透明度的情況下，它是 PNG 的可行替代品。檔案大小通常比 PNG 更小，不過編碼較慢。

Q: 我應該把所有現有圖片重新編碼成 AVIF 嗎？

A: 只有在節省的頻寬足以合理化投入時才需要。從高流量頁面與大型圖片開始，因為那裡的影響最明顯。對低流量頁面或小圖片而言，ROI 很低。先專注於新內容，然後再有選擇地回填。

Q: 批次編碼 AVIF 的最佳工具是什麼？

A: avifenc（libavif 的一部分）是最廣泛使用的命令列工具。GUI 工具方面，Squoosh（網頁版）與 ImageOptim（Mac）都支援 AVIF。多數現代 CDNs 與圖片服務（Cloudflare、Cloudinary、imgix）都能自動轉碼為 AVIF。

Q: AVIF 能搭配 responsive images 與 srcset 使用嗎？

A: 可以。使用 <picture> 元素搭配多個 <source> 元素作為格式備援，並在每個 <source> 內使用 srcset 進行 responsive sizing。瀏覽器會根據支援情況與 viewport 寬度選擇最佳格式與尺寸。

<!-- tool-cta:start -->

💡 試試這個： 使用 Image Converter 在你自己的素材上比較這兩種格式，它可以同時輸出 AVIF 和 WebP，方便你衡量真實情境中的大小與品質。

<!-- tool-cta:end -->

Sources

• AVIF vs WebP：完整比較 — 針對不同圖片類型的壓縮效率與品質設定進行詳細分析。
• Can I use AVIF? — AVIF 圖片格式的目前瀏覽器支援資料。
• libavif GitHub repository — AVIF 的參考編碼器實作與文件。
• Web Almanac: Images — 關於網路上圖片格式採用與效能的年度報告。