Google uses AI technology to translate content into your preferred language. AI translations can contain errors.
提高圖片編碼效率
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Lighthouse 報表的「機會」部分會列出所有未經過最佳化的圖片,以及可節省的 KiB。請對這些圖片進行最佳化,加快網頁載入速度並減少數據用量:
Lighthouse 如何將圖片標示為可最佳化
Lighthouse 會收集網頁上的所有 JPEG 或 BMP 圖片,
將每張圖片的壓縮等級設為 85,
然後比較原始版本和壓縮版本。
如果可節省 4 KiB 以上,Lighthouse 就會將圖片標示為可最佳化。
如何最佳化圖片
您可以採取許多步驟來最佳化圖片,包括:
另一種做法是透過安裝在電腦上並以 GUI 執行的最佳化工具處理圖片。舉例來說,使用 ImageOptim 時,只要將圖片拖曳到使用者介面,系統就會自動壓縮圖片,且品質不會明顯降低。如果您經營的是小型網站,且可以手動處理所有圖片的優化作業,這個選項應該就夠用了。
您也可以使用 Squoosh。
Squoosh 由 Google Web DevRel 團隊維護。
堆疊專屬指南
Drupal
建議你使用可自動最佳化及縮減透過網站上傳的圖片大小,並且不會影響畫質的模組。此外,請確保網站上所有轉譯的圖片都採用 Drupal 內建的回應式圖片樣式。
Joomla
建議你使用圖片最佳化外掛程式,壓縮圖片時不會影響到畫質。
Magento
建議使用可最佳化圖片的第三方 Magento 擴充功能。
WordPress
建議你使用圖片最佳化 WordPress 外掛程式壓縮圖片,這樣可以保持原始畫質。
資源
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2019-05-02 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2019-05-02 (世界標準時間)。"],[],[]]