Chrome 155 支援 JPEG XL：用 picture 保留圖片回退與驗收

JPEG XL 適合進入評估，節省多少要用自己的素材測#

Chrome 的 10 月 6 日公告列出高保真照片、無損壓縮與漸進解碼等應用，也建議比較 AVIF 和 JPEG XL。公告的壓縮收益不能直接套到你的照片、截圖或已壓縮 WebP；編碼品質、尺寸與原始素材都會影響結果。

MDN 的格式指南列出的 MIME type 是 image/jxl，並提醒瀏覽器支援尚未普及。其相容性段落仍有 Chrome flag 時期的資訊；Chrome 155 的出貨主張以較新的 Chrome 公告為依據，不把這份公告延伸成其他瀏覽器已全面支援。

用 picture 加候選，不必一次換掉整站#

先挑一張非關鍵照片，從同一份原圖輸出相同尺寸的 JXL 與 JPEG：

1
<picture>
2
  <source srcset="/images/sample-1200.jxl" type="image/jxl">
3
  <img id="sample-photo"
4
       src="/images/sample-1200.jpg"
5
       width="1200" height="800"
6
       alt="桌面上的筆記本與相機"
7
       loading="lazy">
8
</picture>

這是非首屏範例，實際文字與尺寸要符合素材。首屏主視覺不要直接沿用 loading="lazy"。需要控制圖片比例時，可搭配 aspect-ratio 與圖片比例設定。

MDN 的 picture 文件說明瀏覽器會依 source 的條件與格式選擇候選，不支援該格式時可略過它。伺服器則應為 JXL 回傳正確的 Content-Type: image/jxl；只改副檔名或回傳 SPA 的 HTML fallback 都不算有效圖片。

初次驗收只放一個新格式，方便確認選擇結果。等素材與支援範圍測完，再決定要不要加入 AVIF／WebP 候選；順序代表偏好，瀏覽器不會替你比較所有檔案大小後選最小者。

格式回退不等於 404 後自動改載 JPEG#

type 用來挑選瀏覽器能處理的格式。已選中的 JXL 若回傳 404 或內容損壞，不應期待 <picture> 自動重試下面的 JPEG。 HTML 圖片載入流程會進入錯誤處理；格式候選選擇與網路錯誤是不同階段。

本次維護在 macOS Chrome 的本機頁面實際檢查了兩個條件：虛構且不支援的 image/x-zeroone-unsupported 來源被略過，成功載入回退 PNG；支援的 image/png 來源回傳 404 時，currentSrc 仍指向失敗來源，complete 為 true、naturalWidth 為 0，沒有改載下方有效 PNG。這只驗證候選選擇與載入失敗的差別，沒有驗證 JXL 解碼。

因此部署時要一起驗證新檔案可公開讀取，不能只看本機預覽。若另外實作 error handler，須處理 source 的影響與重試上限；只在錯誤時改 img.src，仍可能受到 <source> 候選選擇影響。本文不提供未驗證的通用重試修補。

驗收要看選中的來源與解碼結果#

把圖片載完後，在 Console 執行以下觀測程式；這段只讀取 DOM，不更換來源：

1
const image = document.querySelector('#sample-photo');
2
if (!(image instanceof HTMLImageElement)) {
3
  throw new Error('找不到測試圖片');
4
}
5
console.table({
6
  source: image.currentSrc,
7
  complete: image.complete,
8
  width: image.naturalWidth,
9
  height: image.naturalHeight,
10
});

complete 在失敗時也可能為 true，因此要一起看 naturalWidth > 0 與 Network 的狀態、MIME type。currentSrc 指出選中的 URL，無法單獨證明它成功解碼。

驗收至少涵蓋支援 JXL 的目標瀏覽器、會略過 JXL 的瀏覽器，以及選中檔案不存在的情境。再用同一份原圖、相同輸出尺寸與可接受的視覺品質，比較傳輸大小、載入與解碼；包含照片細節、文字邊緣或透明度時，各自挑代表素材。

這些步驟是實際網站的驗收建議，本文尚未量測 JXL 的大小、速度、HDR 或漸進顯示。只有素材與回退路徑都驗收通過，才擴大到其他圖片；不要用「瀏覽器宣布支援」替代網站自己的導入檢查。

參考資料：

Chrome for Developers：Shipping JPEG XL in Chrome

MDN：Image file type and format guide

MDN：picture 元素

WHATWG：HTML 圖片載入流程

MDN：HTMLImageElement.complete