WebP、AVIF、JPEG 怎樣選？2026 年網站圖像格式指南

本文所稱 JPEG，是網頁上常見的基線循序 DCT 模式。JPEG 標準家族還包含其他模式，因此下表並不涵蓋整個 JPEG 家族的所有能力。

項目	JPEG	WebP	AVIF
推出年份	1992	2010	2019
標準組織或開發者	JPEG 委員會	Google	Alliance for Open Media
壓縮	廣泛使用的比較基準	在相近主觀質素下，通常比 JPEG 小	依圖像與設定不同，可能比 WebP 或 JPEG 更小
透明度	不支援	支援	支援
動畫	不支援	支援	支援
無損模式	不支援	支援	支援
瀏覽器支援	極為廣泛	目前主流瀏覽器	目前主流瀏覽器；舊版操作系統與瀏覽器仍須確認
編碼速度	通常很快	取決於設定	高壓縮設定可能耗費大量運算資源
解碼速度	取決於實現與圖像	取決於實現與圖像	取決於實現與圖像

全球使用率統計不能直接套用到自己的受眾。瀏覽器支援仍持續變化，Safari 的 AVIF 支援也曾因操作系統與瀏覽器版本組合而不同。請針對實際服務的環境，查閱目前的兼容性資料並檢視自家網站的量度結果。

AOMedia 規範將 AVIF 定義為：在 HEIF 檔案中儲存規範所指定的 AV1 位元流語法與語意子集的圖像格式。它不只是從影片擷取一個關鍵影格存成檔案；規範另行定義靜態圖像與圖像序列的結構及限制。

主要優點包括：

• 壓縮效率：依圖像與設定而異，在相近主觀質素下，AVIF 可能比 JPEG 或 WebP 更小
• 位元深度：設定檔可支援 10 位元及 12 位元圖像，包含 HDR 圖像的儲存
• 透明度與動畫：格式本身都能表示

相對的取捨包括：

• 編碼成本可能很高：結果取決於實現、設定與輸入。例如 Next.js 文件指出，AVIF 通常比 WebP 花更長時間編碼，可能影響首次伺服器轉換與靜態網站構建時間
• 極小圖像的節省有限：容器與元數據的額外負擔，可能讓微小 AVIF 比 JPEG 更大
• 舊環境兼容性：Safari 16 世代的支援曾因操作系統而不同，所以只寫「Safari 16 以上」並不夠精確

靜態 AVIF 與 AVIF 圖像序列也不一定同時獲得支援。若要提供動畫，應確認各目標瀏覽器是否能播放 AVIF 圖像序列，不能把一般的 image/avif 支援視為充分條件。

HTML 提供 <picture> 元素來處理這項工作。瀏覽器會依文件順序評估 <source> 元素，選取第一個符合條件的來源集合，再從該集合挑選圖像候選項。若沒有符合條件的 <source>，內層 <img> 就會提供後備來源。

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="630" />
</picture>

請留意三個細節：

• 通常應在 <img> 上設定 width 與 height，預留顯示比例以降低版面位移
• 提供適當的 alt 屬性
• 依照偏好的來源集合優先順序排列 <source>。「最新格式優先」不是 HTML 規則；瀏覽器會使用第一個符合條件的 <source>，再依適用的描述符與條件，從其 srcset 選取候選項

Next.js Image

目前 Next.js Image 元件預設只輸出 WebP。若也要啟用 AVIF，必須明確設定：

// next.config.js
images: {
  formats: ["image/avif", "image/webp"],
}

WordPress

WordPress 5.8 加入 WebP 支援，WordPress 6.5 則加入 AVIF 上傳與圖像處理。AVIF 處理仍要求主機的 Imagick 或 LibGD 安裝支援 AVIF。WordPress 核心也不會自動替每位訪客協商使用 AVIF 或 JPEG。轉換既有圖像，以及透過 CDN 安排格式協商，都需要另外設計。

Cloudflare Images 與 Cloudinary

自動選擇格式會使用各服務自己的語法。Cloudinary 提供 f_auto 轉換；Cloudflare URL 轉換則使用類似 /cdn-cgi/image/format=auto/... 的形式。並不存在通用的 ?format=auto API。快取鍵與 Accept 標頭的行為也應查閱各服務文件。

傳統上使用 JPEG 的照片

AVIF → WebP → JPEG 是很有力的候選順序。請在相近視覺質素下比較各格式，再把產生、快取與維護成本納入判斷。同時產生三種格式，未必是整體最小或最簡單的方案。

需要透明度的圖像

具有透明度的照片可測試 AVIF → WebP → PNG。具有銳利邊緣的標誌與 UI 素材，應比較無損 WebP、AVIF、PNG 與 SVG。若標誌可用幾何圖形表示，SVG 通常是更合適的選擇。

傳統上使用 GIF 的動畫

先比較是否能改用 MP4 或 WebM 等影片。若必須維持圖像行為，請在確認目標支援並實測檔案大小後，考慮動畫 WebP 或 AVIF 圖像序列。

圖示與極小型位圖

若圖示可用幾何圖形表示，SVG 通常更合適。必須使用位圖時，請實測 PNG、JPEG、WebP 與 AVIF；對很小的檔案而言，標頭與容器數據可能占總大小的可觀比例。

必須支援 IE11 等舊環境

無法理解 <picture> 的舊瀏覽器，仍可把內層 <img src="..."> 視為一般圖像。請選擇目標環境能顯示的後備格式，例如照片用 JPEG、透明圖像與圖表用 PNG。IE11 本身已停止支援，是否納入應是明確的項目需求。

以 AVIF 或 WebP 減少傳輸位元組數，可能有助於 LCP；但 LCP 也取決於伺服器回應時間、資源發現、優先順序、解碼與渲染延遲。只更換格式不能保證改善，因此應用實際用戶數據確認。

loading="lazy" 適合初始可視範圍之外的圖像。以下範例是非首屏圖像。不要延遲載入 LCP 候選項或其他一開始就看得到的圖像；適當時也應考慮其擷取優先順序。

<picture>
  <source srcset="/img.avif" type="image/avif" />
  <source srcset="/img.webp" type="image/webp" />
  <img
    src="/img.jpg"
    alt="..."
    width="800"
    height="600"
    loading="lazy"
    decoding="async"
  />
</picture>

不要對一開始可見的主視覺圖像或 LCP 候選項加入延遲載入。不過，其他視窗大小中的名義「主視覺」或隱藏投影片裡的圖像可能位於首屏之外，所以判斷應以實際顯示條件為準。延後 LCP 候選項可能讓指標惡化。

• AVIF → WebP → JPEG 是照片的有力選項，但必須用自己的圖像與編碼器設定比較
• AVIF 可能更小，但高壓縮設定也可能帶來可觀的產生成本
• 應依偏好的來源集合優先順序排列 <picture> 的 <source>，不能只看格式新舊
• 以 width 與 height 預留版面空間，且只對首屏之外的圖像延遲載入
• 小型圖示通常適合 SVG；點陣格式的數量應依實測效益與維護成本決定
• 請確認每個 CDN 各自的自動格式選擇語法與快取規則