WebP 與 AVIF：2026 年該用哪種圖片格式？
@SoNiceInfo 發布於 2026年9月22日 (更新：2026年9月24日)
WebP 與 AVIF 之爭，簡短的答案是兩種都輸出，再用 <picture> 元素提供。 把 AVIF 列在第一、WebP 第二，最後以 JPEG 或 PNG 作為備援：支援的瀏覽器會拿到最小的檔案，其他瀏覽器也照樣能顯示正常的圖片。 如果只能提供一種格式，重視相容性與編碼速度就選 WebP，想要最大幅度縮小檔案、或需要 HDR 與 10/12 位元色彩深度就選 AVIF。
WebP 與 AVIF 比較表
WebP 是 Google 以 VP8 視訊編解碼器為基礎的圖片格式；AVIF 則是以 AV1 視訊編解碼器為基礎的圖片格式。 兩者都支援有損與無損壓縮、透明與動畫，差別在於壓縮效率、位元深度與編碼速度。
| 特性 | JPEG | WebP | AVIF |
|---|---|---|---|
| 壓縮率（有損、相同畫質） | 基準 | 約小 25～35% | 約小 50% |
| 無損壓縮 | 不支援 | 支援（比 PNG 小約 26%） | 支援 |
| 透明／動畫 | 不支援 | 支援 | 支援 |
| 10 位元／12 位元色彩深度 | 不支援 | 不支援（8 位元） | 支援 |
| HDR／廣色域 | 不支援 | 有限 | 完整支援 |
| 編碼速度 | 快 | 快 | 明顯較慢 |
| 最大尺寸 | 65,535 × 65,535 px | 16,383 × 16,383 px | 能處理比 WebP 更大的圖片 |
| 漸進式顯示 | 支援 | 不支援 | 不支援 |
| 瀏覽器支援 | 全部 | 所有主要瀏覽器（Safari 為 macOS 11／iOS 14 以後） | 所有主要瀏覽器（Safari 為 macOS 13／iOS 16 以後） |
壓縮率的數字是根據已發表的比較研究得出的概略值，會因圖片內容與編碼器設定而異。
實測範例：把一張 JPEG 轉成 WebP 和 AVIF
以下是我在 Mac 上用指令列編碼器，轉換一張 1600×1064 px 的 JPEG 照片（230 KB）的結果。
# WebP (cwebp 1.6.0)
cwebp -q 80 in.jpg -o out.webp # 230 KB -> 112 KB
# AVIF (avifenc 1.4.2)
avifenc -q 60 -s 6 in.jpg out.avif # 230 KB -> 108 KB兩者都縮小到原始 JPEG 的一半以下。 但請記得，這只是一張圖片的結果，而且兩邊的品質設定並沒有以視覺畫質對齊。 品質數值在不同編碼器中的意義各不相同，因此用在實際網站上時，可靠的做法是親眼比較轉換後的圖片，再決定設定。
什麼時候該選 WebP
- 需要支援舊版瀏覽器與作業系統——Safari 從 macOS 11／iOS 14 起就能顯示 WebP，範圍比 AVIF 更廣。
- 經常轉換大量圖片——編碼速度快，能縮短建置與上傳的時間。
- 想讓無損的標誌、螢幕截圖與線條圖更小——無損 WebP 比 PNG 小約 26%。
- 要取代動畫 GIF——動畫 WebP 支援全彩，而且廣受支援。
要在 Mac 上把整個資料夾的 PNG、JPG、HEIC 或 GIF 檔案轉成 WebP，Mac 用的 WebP 批次轉換 App「WebP Converter.」可免費開始使用。
什麼時候該選 AVIF
- 想把傳輸量降到最低——在照片很多的頁面上，畫質相近時比 JPEG 小約 50% 是合理的預期。
- 要提供 HDR 或廣色域照片——10 位元與 12 位元色彩深度，能避免 8 位元的 WebP 在平滑漸層中出現的色階斷層。
- 重視低位元率下的畫質——高度壓縮時產生的區塊雜訊較少。
- 只需事先轉換一次——編碼速度慢就不那麼要緊了。
要大量把 PNG、JPG 和 HEIC 檔案轉成 AVIF，可以試試 Mac 用的 AVIF 批次轉換 App「AVIF Converter.」，同樣可免費開始使用。
用 picture 元素同時提供 AVIF 與 WebP
在 <picture> 中由上而下列出 <source> 元素，瀏覽器就會選擇第一個它支援的格式。 最後的 <img> 是備援，所以在任何環境中都會顯示圖片。
<picture>
<source type="image/avif" srcset="/images/photo.avif" />
<source type="image/webp" srcset="/images/photo.webp" />
<img src="/images/photo.jpg" alt="Describe the photo" width="1600" height="1064" loading="lazy" />
</picture>設定 width 和 height，可以避免圖片載入時發生版面位移（CLS）。 位於首屏、作為 LCP 元素的圖片，請不要加上 loading="lazy"。
WordPress 的支援情況
WordPress 從 5.8 版起接受上傳 WebP，從 6.5 版起接受上傳 AVIF。 先前以 JPEG 或 PNG 上傳的圖片不會自動被取代，所以現有的素材仍需轉換後再替換。 處理 AVIF 時，伺服器的影像函式庫也必須支援 AVIF。
如何在 Mac 上轉換成 WebP 和 AVIF
最快的途徑是 GUI App。把圖片或整個資料夾拖放進去就能大量轉換，輸出前還能親眼確認轉換前後的畫質。 這 3 款 App 都在 Mac 上進行轉換，不必上傳任何東西。
- 想要 WebP——Mac 用的 WebP 批次轉換 App「WebP Converter.」
- 想要 AVIF——Mac 用的 AVIF 批次轉換 App「AVIF Converter.」
- 想一次同時得到 WebP 和 AVIF——Mac 用的圖片批次轉換 App「Image Tool+」，能一次輸出多種格式
在指令列中，用 Homebrew 安裝 cwebp 和 avifenc。
brew install webp libavif詳細的操作步驟請參考另外的文章。
所有轉換都在 Mac 上進行
依用途推薦
- 攝影師與作品集網站——把 AVIF 放在第一。對於平滑漸層與 HDR 或廣色域照片，AVIF 的 10 位元／12 位元色彩深度能抑制色階斷層。再提供 WebP 作為備援。
- 部落格與企業網站——WebP 是穩妥的預設選擇：支援範圍更廣，編碼也快。只為首屏的大圖額外加上 AVIF，就能進一步減少傳輸量。
- 電商網站——用
<picture>元素同時提供兩種格式。商品數量多時，AVIF 的編碼時間會逐漸累積，因此實際的分工方式是：大部分商品圖用 WebP，主視覺與精選圖片用 AVIF。 - 標誌、螢幕截圖與線條圖——使用無損 WebP（比 PNG 小約 26%），或維持 PNG。
常見問題
Q. 該用 WebP 還是 AVIF？
兩種都輸出，再用 picture 元素提供：AVIF 第一、WebP 第二，最後以 JPEG 或 PNG 作為備援。 如果只能選一種，重視相容性與編碼速度就選 WebP，想要最大幅度縮小檔案、或需要 HDR 與 10/12 位元色彩深度就選 AVIF。
Q. AVIF 比 WebP 小多少？
概略來說，在畫質相近的情況下，WebP 比 JPEG 小約 25～35%，AVIF 則比 JPEG 小約 50%。 實際的差距很大程度取決於圖片與編碼器的設定。AVIF 在照片和平滑漸層上通常較佔優勢，而小圖示和簡單的圖形可能幾乎沒有差別。
Q. 不支援 AVIF 的瀏覽器會怎麼樣？
只指向 AVIF 檔案的 img 標籤，在不支援 AVIF 的瀏覽器中什麼都不會顯示。 如果使用 picture 元素，依序列出 AVIF、WebP、JPEG 的來源，瀏覽器就會選擇第一個它支援的格式，所以每位訪客都能看到圖片。
Q. AVIF 有哪些缺點？
編碼速度明顯比 WebP 或 JPEG 慢、不支援漸進式顯示，而且舊版的作業系統和 App 可能無法打開檔案。 在每次建置都要轉換大量圖片的工作流程中，編碼時間會變得相當明顯。
Q. 要怎麼在 Mac 上把圖片轉成 WebP 或 AVIF？
在指令列中，WebP 用 cwebp、AVIF 用 avifenc，兩者都能透過 Homebrew 安裝。 想在 GUI 中批次轉換、又不必上傳任何東西，WebP Converter. 和 AVIF Converter. 各自處理一種格式，Image Tool+ 則能用一個 App 輸出兩種格式。
總結
- 預設使用
<picture>元素，依 AVIF → WebP → JPEG/PNG 的順序排列。 - 如果只提供一種：重視相容性與編碼速度選 WebP，重視檔案大小與 HDR／10～12 位元色彩深度選 AVIF。
- 縮小幅度因圖片而異，請先確認轉換後的畫質與檔案大小，再決定設定。