如今有兩種次世代圖片格式主導著關於網頁效能的討論：AVIF（AV1 影像檔案格式）與 WebP（Google 2010 年推出、現已至 v2）。兩者都明顯勝過 JPEG，但在壓縮率、畫質、編碼速度和瀏覽器支援上各有非常不同的取捨。
<picture> 兩者都用。先為支援的瀏覽器提供 AVIF；回退到 WebP；再回退到 JPEG。你能為每位訪客獲得最優壓縮，又不犧牲相容性。| 格式 | 相比 JPEG 體積 | 編碼速度 | 瀏覽器支援 | 無損 | 動畫 |
|---|---|---|---|---|---|
| AVIF | 小 40–50% | 慢（5–20×） | 約 85% | ✓ | ✓ |
| WebP | 小 25–34% | 快（1–3×） | 97%+ | ✓ | ✓ |
| JPEG | 基準 | 非常快 | 通用 | ✗ | ✗ |
| PNG | 大 3–5 倍 | 快 | 通用 | ✓ | ✗ |
AVIF 源自 AV1 影片編解碼器（Netflix 和 YouTube 最高效流媒體背後的同一技術）。它的壓縮確實出色 — 在同等視覺質量下，AVIF 檔案通常比 JPEG 小 40–50%，比 WebP 小 20–30%。
AVIF 尤其擅長：
主要弱點是編碼速度。從 JPEG 生成一張 AVIF 可能比生成 WebP 慢 5–20 倍。對於一個含 5 萬張商品圖的大型電商目錄，這會成為顯著的構建時間問題。
自 2010 年起 WebP 就是 Google 推薦的格式，並在 2022 年 Safari 加入完整支援後真正實現全平臺支援。它的優勢：
WebP 的主要弱點是在純壓縮效率上略遜於 AVIF，尤其對極高質量或 HDR 影像。
| 瀏覽器 | WebP | AVIF |
|---|---|---|
| Chrome 85+ | ✅ 完整 | ✅ 完整（自 Chrome 85） |
| Firefox 65+ | ✅ 完整 | ✅ 完整（自 Firefox 93） |
| Safari 14+ | ✅ 完整 | ✅ 完整（自 Safari 16，2022 年 9 月） |
| Edge 18+ | ✅ 完整 | ✅ 完整（基於 Chromium） |
| iOS Safari 14+ | ✅ 完整 | ✅ 完整（iOS 16+） |
| iOS Safari 15 及以下 | ✅ 完整 | ❌ 不支援 |
| Internet Explorer | ❌ 不支援 | ❌ 不支援 |
<picture> 元素，否則這些使用者會看到損壞的 AVIF 圖片。請始終包含回退。最佳實踐是在支援時提供 AVIF，並以 WebP 或 JPEG 作為回退。<picture> 元素會自動處理這一切：
瀏覽器按順序嘗試每個 <source>，使用第一個它支援的。Chrome 使用者得到 AVIF。Safari 15 使用者得到 WebP。IE11 使用者（如果還有）得到 JPEG。
對大多數網站：以 WebP 為主格式，配 JPEG 回退。這覆蓋 97%+ 的瀏覽器，兼具出色壓縮與快速編碼。
對效能關鍵、圖片密集的頁面（電商、攝影作品集、新聞網站）：通過 <picture> 把 AVIF 作為首選來源加入。多省下的 20–30% 體積能切實改善 LCP，並在規模上降低頻寬成本。
徹底避免 GIF。改用動態 WebP 或 <video autoplay loop muted playsinline>。
在同等視覺質量下，AVIF 的壓縮率比 WebP 高 20–40%。但 WebP 編碼快 5–10 倍，且瀏覽器支援近乎全平臺（97%+），而 AVIF 約 85%。對大多數站點，WebP 是更穩妥的預設；可通過 <picture> 把 AVIF 作為可選增強加入。
支援，自 Safari 16 起（2022 年 9 月，隨 iOS 16 與 macOS Ventura）。截至 2026 年，所有主流現代瀏覽器都支援 AVIF，但 Safari 15 及以下的較舊 iOS 裝置不支援。請始終包含 WebP 或 JPEG 回退。
通過 <picture> 元素兩者都用：AVIF 優先，WebP 其次，JPEG 作為最終回退。這能為每位訪客提供最優格式，又不犧牲相容性。
最後更新：2026 年 4 月。瀏覽器支援資料來自 caniuse.com。壓縮率為一組混合測試集的代表性平均值。