JPEG XL 全面支援，實測網頁圖片仍以 AVIF 為先
Jake Archibald · 2026-10-15
JPEG XL 已經落地所有主流瀏覽器，但 Jake Archibald 用自己寫的基準測試跑完後，結論是：網頁用的有損照片、截圖、插圖、透明圖，AVIF 檔案幾乎都比 JPEG XL 小，所以「瀏覽器支援了就換 JXL」並不成立。
測試使用 avifenc 1.4.2、libjxl 0.12.0、jixel 0.4.2（第二個 JPEG XL 編碼器）與 cwebp 1.6.0，腳本公開在 image-codec-bench，品質以 SSIMULACRA2 與 ColorVideoVDP 兩種指標對齊。
原本的問題
過去選圖片格式時，大家拿的多是各家廠商或社群的二手結論，作者在文中直接說這一塊有很多錯誤資訊，而且「AI 也會很樂意把這些錯誤資訊餵給你」。JXL 支援度補齊後，團隊會面臨要不要把 AVIF 管線換成 JXL的決定，但沒有人拿同一組圖、同品質指標、分別比較編碼器與 effort 設定。
這個差別很重要：同一種格式，換編碼器或 effort，檔案大小差距可以比格式之間的差距還大。作者的比較也因此把 libjxl 與 jixel 分開看。
實測結果
文章以 SSIMULACRA2 70（作者定義為高品質）為基準。下表整理文中給出的「JPEG XL 相對 AVIF 的檔案大小」：
| 情境 | 預設 effort | 最高 effort |
|---|---|---|
| 有損照片 | 大 15–25% | 大 6–20% |
| 截圖與插圖 | 大 30–90% | 大 20–70% |
| 透明圖（libjxl） | 大 31–44% | 大 61–70% |
透明圖的情況特別差：jixel 的 alpha 一律無損編碼，沒有 alpha 品質設定，檔案是 AVIF 的 2–3 倍。文中的透明圖範例中，AVIF 為 50.4 kB，libjxl 為 78.6 kB（+56%），jixel 為 119.1 kB（+136%）。
以 F1 賽車照片為例，AVIF 41.4 kB，libjxl 58.4 kB（+41%），jixel 46.6 kB（+12%）。作者的整體觀察是 jixel 在中高品質通常比 libjxl 小，但遇到細緻透明就反過來。
編碼與解碼成本
- 解碼：AVIF 較快。JPEG XL 在中等品質需要 2–3 倍時間，極高品質時差距縮小，Chrome 偶爾反而較快。
- 編碼：AVIF 在「同檔案大小」下較快、較省記憶體。F1 範例中，jixel 預設比 AVIF 快 12–36%，但檔案大 14–18%；要追平 AVIF 預設的大小，jixel 得開
extraslow，耗時是 AVIF 的 18–27 倍。 - effort 值不值得：AVIF 與 jixel 值得拉高，libjxl 不值得。libjxl 最高 effort 幾乎沒有進步，卻慢約 18 倍，截圖範例中甚至產生比預設更大的檔案。
- 4:2:0：AVIF 的色度子取樣幾乎不會讓檔案變小，還更難達到高品質，建議預設用 4:4:4。
JXL 真正占優的地方
JXL 並非全面落後。既有 JPEG 的無損轉碼可再縮小 9–20%，解碼速度相當或更快（小圖除外）。無損編碼也是 JXL 勝出：無損 WebP 比 JXL 大 9–17%（照片），無損 AVIF 大 30–120%。不過作者提醒，網頁幾乎不需要無損圖。
漸進式載入上，Firefox 與 Chrome 支援漸進式 JXL，Safari 只顯示最終影像。AVIF 的漸進式目前只有 Chrome 支援，Firefox 正在實作；作者認為 AVIF 的預覽可控性較高，檔案通常較小，解碼也快很多。
影響範圍
幾種人要看這篇的數字：
- 用
<picture>做格式 fallback 的前端：作者目前的預設是 AVIF 4:4:4 加上能忍受的最高 effort，若某張圖的 AVIF 異常地大，再用 jixel 試一次 JXL。 - 在伺服器端批次轉圖的後端或 CI：不要直接把 libjxl 開到最高 effort，費時換不到檔案大小。
- 處理 HDR 的團隊：JXL 格式本身支援 gain map，但瀏覽器解碼器不支援，編碼流程也偏實驗性，因此 HDR 目前是 AVIF 的優勢。
- 有大量舊 JPEG 的站：無損轉碼能省 9–20%，是 JXL 最容易兌現的收益。
限制也要說清楚：所有數字來自作者在 M4 Pro MacBook Pro 上，用少量自選圖片、寬度 1598 像素的測試，作者本人也建議用自己的圖片重測。作者也指出 AVIF 與 jixel 近期都有大幅進步，因此建議之後可能改變。