以新型格式放送圖片

Lighthouse 報告的「機會」部分會列出所有採用舊版圖片格式的圖片,並顯示提供這些圖片的 AVIF 版本後,可節省的潛在資料量:

Lighthouse「提供新一代格式的圖片」稽核的螢幕截圖

為什麼要以 AVIF 或 WebP 格式提供圖片?

AVIF 和 WebP 圖片格式的壓縮和品質特性,都優於舊版 JPEG 和 PNG。以這些格式編碼圖片,載入速度會比 JPEG 或 PNG 快,行動數據用量也較少。

Chrome、Firefox 和 Opera 均支援 AVIF,且與其他格式相比,在相同品質設定下,AVIF 的檔案大小較小。 如要進一步瞭解 AVIF,請參閱提供 AVIF 圖片程式碼研究室

最新版的 Chrome、Firefox、Safari、Edge 和 Opera 均支援 WebP,可為網路圖片提供更出色的有損和無損壓縮效果。 如要進一步瞭解 WebP,請參閱「網路適用的新圖片格式」。

Lighthouse 如何計算可省下的費用

Lighthouse 會收集網頁上的每個 BMP、JPEG 和 PNG 圖片,將每個圖片轉換為 WebP,並估算 AVIF 檔案大小,然後根據轉換數據回報潛在節省量。

瀏覽器相容性

最新版的 Chrome、Firefox、Safari、Edge 和 Opera 都支援 WebP,但支援 AVIF 的瀏覽器較少。 建議您準備備用的 PNG 或 JPEG 圖片,以便用於舊版瀏覽器。如要瞭解備援技術,請參閱「如何偵測瀏覽器是否支援 WebP?」,如要瞭解瀏覽器支援的圖片格式,請參閱下表。

如要查看各個新式格式目前支援的瀏覽器,請參閱下列項目:

堆疊專屬指南

AMP

建議你以 WebP 格式顯示所有 amp-img 元件,同時為其他瀏覽器指定適當的備用格式

Drupal

建議你在網站中安裝並設定模組以採用 WebP 圖片格式。這類模組會為你上傳的圖片自動產生 WebP 版本,以最佳化載入時間。

Joomla

建議使用會自動將上傳圖片轉換成最佳格式的 外掛程式 或服務。

Magento

建議你在 Magento Marketplace 搜尋多種第三方擴充功能,以運用較新的圖片格式。

iPhone

請注意,webp 和 avif 圖片以及 webm 影片無法在 iOS 16 以下版本的 iPhone 上運作。

WordPress

建議使用會自動將上傳圖片轉換成最佳格式的外掛程式或服務。

資源