提高圖片編碼效率

Lighthouse 報表的「機會」部分會列出所有未經過最佳化的圖片,以及可節省的 KiB。請對這些圖片進行最佳化,加快網頁載入速度並減少數據用量:

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

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

Lighthouse 會收集網頁上的所有 JPEG 或 BMP 圖片, 將每張圖片的壓縮等級設為 85, 然後比較原始版本和壓縮版本。 如果可節省 4 KiB 以上,Lighthouse 就會將圖片標示為可最佳化。

如何最佳化圖片

您可以採取許多步驟來最佳化圖片,包括:

使用 GUI 工具將圖片最佳化

另一種做法是透過安裝在電腦上並以 GUI 執行的最佳化工具處理圖片。舉例來說,使用 ImageOptim 時,只要將圖片拖曳到使用者介面,系統就會自動壓縮圖片,且品質不會明顯降低。如果您經營的是小型網站,且可以手動處理所有圖片的優化作業,這個選項應該就夠用了。

您也可以使用 Squoosh。 Squoosh 由 Google Web DevRel 團隊維護。

堆疊專屬指南

Drupal

建議你使用可自動最佳化及縮減透過網站上傳的圖片大小,並且不會影響畫質的模組。此外,請確保網站上所有轉譯的圖片都採用 Drupal 內建的回應式圖片樣式

Joomla

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

Magento

建議使用可最佳化圖片的第三方 Magento 擴充功能

WordPress

建議你使用圖片最佳化 WordPress 外掛程式壓縮圖片,這樣可以保持原始畫質。

資源