「提供 next-gen 格式的圖片」是什麼意思

如果你在改善網站速度，對這句話想必一定很眼熟（沒錯，就是 PageSpeed Insights），但到底什麼是 next-gen？簡單來說就是 WebP、AVIF、JPEG2000、JPEG XR 等格式的圖片。

WebP

WebP 目前是這四種格式中支援度最廣的格式，且支援去背和透明度。

它除了 IE11 之外，基本上都支援；而 safari 則要看版本夠不夠新（macOS 11）。

另外，它有一個很像的名詞叫 WebM 影片格式：

WebM 是一個由 Google 資助的專案（WebP 也和 Google 有關），目標是構建一個開放的、免著作權費用的影片格式檔。該影片格式能提供高品質的影片壓縮以配合 HTML5 使用。（wiki）用途基本上一樣是為了改善網頁載入速度。

Netflix 聲稱 AVIF 將會是下一代的圖像編碼演算法，並稱它對於他們的影音串流媒體網站而言，是取代 JPEG 格式的最佳選擇。

不過，相較於 2010 年就出現的 WebP，2019 年才誕生的 AVIF 支援度在2023年之後才追趕上來。

JPEG 2000 比前兩者更早出現，副檔名是 .jp2 或 .j2c，跟 AVIF 一樣在當年被吹捧成下一代圖像的壓縮標準，但至今幾乎沒有網站在用，也只有 safari 有支援，其它瀏覽器完全不想理它。

JPEG2000 的瀏覽器支援度

JPEG XR（JPEG extended range）是基於由 Microsoft 所開發的 HD Photo 的圖像格式，所以……基本上只有 IE9~IE11 和舊版本的 Edge 支援。

IE 專屬的 JPEG XR

JPEG XL 則發表於 2017 年，但就目前為止的支援度是慘不忍賭，完全沒有瀏覽器支援。

基本上，還是要靠 HTML 的 picture 來使用最安全，或者是寫程式判斷瀏覽器支援度，然後載入相對應的圖片格式。個人認為，目前使用 WebP + jpg/png/gif 的應對方式就夠了，頂多再加個 AVIF，但效益如何就自己判斷了。

再來就是 server 端有沒有設定宣告的問題。舉例來說，如果你是用 web.config 設定網站的話，記得要宣告 WebP 或 AVIF 是圖片檔：


<staticContent>
  <mimeMap fileExtension=".webp" mimeType="image/webp" />
  <mimeMap fileExtension=".avif" mimeType="image/avif" />
</staticContent>

忘記宣告的話，使用者的瀏覽器就算支援該格式也看不到圖片，呈現出來的畫面跟找不到圖片一樣。

最後，除非有什麼重大錯誤，要不然不要對 PageSpeed Insights 的分數太認真，要不要用 next-gen 格式的圖片也是網站管理員或開發團隊自己決定就好。雖然看到綠色的分數很爽，但若一心追求分數而把使用者需求和開發維護網站的效率拋在腦後，豈不是本未倒置了嗎？