Lighthouse 報告的「商機」部分會列出所有尚未最佳化的圖片,可望節省的 KB 數 (KiB) 數。請將這些圖片最佳化,加快網頁載入速度並減少數據用量:
Lighthouse 如何將圖像標記為可最佳化
Lighthouse 會收集網頁上的所有 JPEG 或 BMP 圖片,將每個圖片的壓縮等級設為 85,然後將原始版本與壓縮版本進行比較。如果可以省下的成本為 4KiB 以上,Lighthouse 會將圖片標記為可最佳化。
如何最佳化圖片
您可以採取多個步驟將圖片最佳化,包括:
使用 GUI 工具最佳化圖片
另一種做法是透過安裝至電腦的最佳化器執行映像檔,然後以 GUI 的形式執行。舉例來說,只要使用 ImageOptim,就能將圖片拖曳到 UI 中,接著在不明顯影響畫質的情況下壓縮圖片。如果您經營的是小型網站,且可手動處理所有圖片的最佳化作業,則這個選項可能就足夠了。
「Squoosh」是另一個選項。Squoosh 是由 Google Web DevRel 團隊負責維護。
堆疊專屬指南
Drupal
建議您使用可自動最佳化及縮減透過網站上傳圖片的模組,同時保留品質。此外,請確保在網站上所有轉譯的圖片都使用 Drupal 內建的回應式圖片樣式 (Drupal 8 及以上版本使用)。
Joomla
建議您使用壓縮圖片並保留畫質的圖片最佳化外掛程式。
Magento
請考慮使用將圖片最佳化的第三方 Magento 擴充功能。
WordPress
建議您使用圖片最佳化 WordPress 外掛程式來壓縮圖片,同時保留品質。