圖片格式:AVIF

AV1 圖片檔案格式 (AVIF) 是採用開放原始碼 AV1 影片轉碼器的編碼。AVIF 是較新的編碼,比 WebP 格式還低,自 2020 年起的 Firefox、2021 年的 Firefox 及 2022 年 Safari 僅支援 Chrome 和 Opera。和 WebP 一樣,AVIF 旨在處理網路上所有可偵測到的光柵圖片用途:類似 GIF 的動畫、類 PNG 的透明度,並改善小於 JPEG 或 WebP 的檔案大小的感知品質。

到目前為止,AVIF 展現出了承諾。由 Netflix 開發的測試架構。Netflix 是負責開發 AV1 轉碼器的團體 (Alliance for Open Media 的創始成員) 所開發的測試架構,與 JPEG 或 WebP 相比,可大幅減少檔案大小CloudinaryChrome 轉碼器團隊進行的研究更勝目前的編碼標準。

雖然工具相對有限,但建議您立即開始嘗試 AVIF,這是 Squoosh 提供的其中一種編碼方式:

顯示 AVIF 壓縮設定的 Squoosh 螢幕截圖。

瀏覽器支援

現在,如果您覺得在 AVIF 和 WebP 能否提供較高品質的結果及縮小檔案大小的情況下,我們花費大量時間討論 JPEG 的原因為何,這是因為這兩者以及任何新的圖片編碼,都具有重大擷取功能。所有瀏覽器都保證支援 GIF、PNG 和 JPEG,目前已是數十年。相對於這些舊版圖片格式,AVIF 是全新的,雖然在新版瀏覽器中對 WebP 的支援卓越,但並非所有網路都適用 WebP。

如同各位所想,為改善品質和傳輸大小,在開發新的圖片格式的過程中,投入了大量時間和精力。WebP、AVIF 和 JPEG XL (任何瀏覽器不支援) 等格式旨在成為網路光柵圖片的統一解決方案,因為 SVG 採用向量。其他屬性 (例如 JPEG 2000 (僅在 Safari 中僅支援) ) 旨在滿足與基準 JPEG 相同的用途,但改善壓縮方法,能夠提供外觀相似但更小的圖片。

雖然其中一些較新的格式有共用 JPEG 名稱,但其編碼基本上與 JavaScript 和 Java 的相似。如果瀏覽器不支援指定編碼,就無法剖析該圖片檔,這就像我指示您以自己不瞭解的語言填滿圖形紙像素格線。瀏覽器會要求圖片資料並嘗試剖析,失敗時就會捨棄圖片資料,完全不會顯示任何內容。如果圖片來源無法在新型瀏覽器外轉譯,將是我們的內容、大大小小的嚴重故障點,因為圖片毀損,頻寬浪費了全球大量使用者。您不應為了擁有更高效能的網路而犧牲擁有彈性。

長久以來,我們一個理念的朋友 <img> 突然難以使用任何新的圖片格式,可說是難上加難,提醒您,<img> 只支援單一來源檔案,且已經過超最佳化調整,可快速傳輸檔案。因此,實際上我們無法透過 JavaScript 攔截該要求。截至目前為止,唯一可行的選項是向所有使用者提供全新圖片類型,並在瀏覽器觸發錯誤時,要求其中一種「舊版」格式,在第一份檔案被淘汰後,發生第二次檔案傳輸。

基於上述原因,<img> 過去數十年來已有改變。在下一個單元「回應式圖片」中,您將瞭解 HTML 規格介紹的功能,以便解決這些問題,以及如何在日常工作中使用這些功能。