提高圖片編碼效率

Lighthouse 報表的「商機」部分會列出所有未經最佳化的圖片,可能節省 KiB 的儲存量。為這些圖片進行最佳化調整,加快網頁載入速度並減少數據用量:

Lighthouse「提高圖片編碼效率」稽核項目的螢幕截圖

Lighthouse 如何將圖片標記為可最佳化

Lighthouse 會收集網頁上的所有 JPEG 或 BMP 圖片,將每張圖片的壓縮等級設為 85,然後比較原始版本和經過壓縮的版本。如果可節省的大小為 4 KiB 以上,Lighthouse 會將圖片標示為可改善的項目。

如何最佳化圖片

您可以採取多種做法來最佳化圖片,包括:

使用 GUI 工具將圖片最佳化

另一種方法是透過安裝在電腦上並以 GUI 執行的最佳化工具,執行圖片。舉例來說,您可以使用 ImageOptim 將圖片拖曳至 UI,然後系統會自動壓縮圖片,且不會明顯影響圖片品質。如果您經營的是小型網站,且可以手動最佳化所有圖片,這個選項應該就足夠了。

Squoosh 是另一個選項。Squoosh 由 Google Web DevRel 團隊維護。

堆疊專屬指南

Drupal

建議你使用模組,自動最佳化及縮減透過網站上傳的圖片大小,並且不會影響畫質。此外,請務必使用 Drupal 提供的原生回應式圖片樣式,用於網站上呈現的所有圖片。

Joomla

建議你使用圖片最佳化外掛程式,壓縮圖片時不會影響到畫質。

Magento

建議使用可改善圖片品質的第三方 Magento 擴充功能

WordPress

建議您使用圖片最佳化 WordPress 外掛程式壓縮圖片,同時維持品質。

資源