以新型格式放送圖片

Lighthouse 報告的「Opportunity」部分會列出採用舊版圖片格式的所有圖片,顯示提供這些映像檔的 AVIF 版本可能節省的成本:

以現代化格式稽核的 Lighthouse Serve 圖片螢幕截圖

為什麼要放送 AVIF 或 WebP 格式的圖片?

AVIF 和 WebP 是圖片格式的圖片格式,壓縮效果和品質都優於其他類的 JPEG 和 PNG。建議你使用這些格式 (而非 JPEG 或 PNG 格式) 為圖片編碼,藉此加快圖片載入速度,並減少行動數據用量。

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

WebP 支援最新版的 Chrome、Firefox、Safari、Edge 和 Opera,能為網路上的圖片提供更好的有損和無損壓縮。如要進一步瞭解 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

建議您使用可自動將上傳圖片轉換成最佳格式的plugin或服務。

Magento

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

iPhone

請注意,Webp、avif 圖片和 WebM 影片不支援 iOS 16 以下版本的 iPhone。

WordPress

建議您使用可自動將上傳圖片轉換成最佳格式的plugin或服務。

資源