Lighthouse 報表的「商機」部分會列出所有未經最佳化的圖片,可能節省 KiB 的儲存量。為這些圖片進行最佳化調整,加快網頁載入速度並減少數據用量:
Lighthouse 如何將圖片標記為可最佳化
Lighthouse 會收集網頁上的所有 JPEG 或 BMP 圖片,將每張圖片的壓縮等級設為 85,然後比較原始版本和經過壓縮的版本。如果可節省的大小為 4 KiB 以上,Lighthouse 會將圖片標示為可改善的項目。
如何最佳化圖片
您可以採取多種做法來最佳化圖片,包括:
使用 GUI 工具將圖片最佳化
另一種方法是透過安裝在電腦上並以 GUI 執行的最佳化工具,執行圖片。舉例來說,您可以使用 ImageOptim 將圖片拖曳至 UI,然後系統會自動壓縮圖片,且不會明顯影響圖片品質。如果您經營的是小型網站,且可以手動最佳化所有圖片,這個選項應該就足夠了。
Squoosh 是另一個選項。Squoosh 由 Google Web DevRel 團隊維護。
堆疊專屬指南
Drupal
建議你使用模組,自動最佳化及縮減透過網站上傳的圖片大小,並且不會影響畫質。此外,請務必使用 Drupal
提供的原生回應式圖片樣式,用於網站上呈現的所有圖片。
Joomla
建議你使用圖片最佳化外掛程式,壓縮圖片時不會影響到畫質。
Magento
WordPress
建議您使用圖片最佳化 WordPress 外掛程式壓縮圖片,同時維持品質。