提高圖片編碼效率
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Lighthouse 報告的「商機」部分會列出所有尚未最佳化的圖片,可望節省的 KB 數 (KiB) 數。請將這些圖片最佳化,加快網頁載入速度並減少數據用量:
Lighthouse 如何將圖像標記為可最佳化
Lighthouse 會收集網頁上的所有 JPEG 或 BMP 圖片,將每個圖片的壓縮等級設為 85,然後將原始版本與壓縮版本進行比較。如果可以省下的成本為 4KiB 以上,Lighthouse 會將圖片標記為可最佳化。
如何最佳化圖片
您可以採取多個步驟將圖片最佳化,包括:
另一種做法是透過安裝至電腦的最佳化器執行映像檔,然後以 GUI 的形式執行。舉例來說,只要使用 ImageOptim,就能將圖片拖曳到 UI 中,接著在不明顯影響畫質的情況下壓縮圖片。如果您經營的是小型網站,且可手動處理所有圖片的最佳化作業,則這個選項可能就足夠了。
「Squoosh」是另一個選項。Squoosh 是由 Google Web DevRel 團隊負責維護。
堆疊專屬指南
Drupal
建議您使用可自動最佳化及縮減透過網站上傳圖片的模組,同時保留品質。此外,請確保在網站上所有轉譯的圖片都使用 Drupal 內建的回應式圖片樣式 (Drupal 8 及以上版本使用)。
Joomla
建議您使用壓縮圖片並保留畫質的圖片最佳化外掛程式。
Magento
請考慮使用將圖片最佳化的第三方 Magento 擴充功能。
WordPress
建議您使用圖片最佳化 WordPress 外掛程式來壓縮圖片,同時保留品質。
資源
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2019-05-02 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2019-05-02 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","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 (世界標準時間)。"],[],[]]