提供適當的圖片大小
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Lighthouse 報告的「商機」部分會列出網頁上尺寸不正確的所有圖片,並可能以 KB (KiB) 為單位節省的費用。建議您調整這些圖片的大小,以便節省數據用量並縮短網頁載入時間:
Lighthouse 如何計算超大型圖片
Lighthouse 會針對網頁上的每張圖片,比較算繪出的圖片大小與實際圖片的大小。算繪後的大小也會反映裝置像素的比率。如果轉譯後的大小至少小於實際大小 4KiB,表示映像檔會失敗。
適當調整圖片大小的策略
在理想情況下,網頁提供的圖片不得大於使用者螢幕上顯示的版本。所有大於上述大小的項目都會浪費位元組,並拖慢網頁載入時間。
放送大小適當圖片的主要策略稱為「回應式圖片」。使用回應式圖片時,您可以產生每張圖片的多個版本,然後透過媒體查詢和可視區域尺寸等條件,指定要在 HTML 或 CSS 中使用的版本。此外,RespImageLint 是實用的書籤小程式,可協助您為圖片找出最佳 srcset
和 sizes
值。如要進一步瞭解這些屬性,請參閱「提供回應式圖片」。
圖片 CDN 是提供大小適當圖片的另一個主要策略。您可以將圖片 CDN 視為網路服務 API 等來轉換圖片。
另一個策略是使用向量圖片格式,例如 SVG。只要利用少量程式碼,SVG 圖片就能調整為任何尺寸。詳情請參閱「使用 SVG 取代複雜圖示」。
gulp-responsive 或 Responsive-images-generator 等工具可協助您自動將圖片轉換成多種格式的程序。此外,您也可以在上傳圖片或從網頁要求圖片時,使用圖片 CDN 產生多個版本。
堆疊專屬指南
AMP
請使用 amp-img
元件對 srcset
的支援,根據螢幕大小指定要使用的圖片素材資源。另請參閱「包含 srcset、大小和高度的回應式圖片」。
Angular
建議您使用元件開發套件 (CDK) 中的 BreakpointObserver
公用程式來管理圖片中斷點。
Drupal
透過檢視模式、檢視畫面或透過 WYSIWYG 編輯器上傳的圖片算繪圖片欄位時,請使用內建的回應式圖片樣式功能 (Drupal 8 及以上版本提供)。
加斯比
使用 gatsby-image 外掛程式,即可為智慧型手機和平板電腦產生多個較小的圖片。也可以建立 SVG 圖片預留位置,提升延遲載入效率。
Joomla
建議你使用回應式圖片外掛程式。
WordPress
直接透過媒體庫上傳圖片,確保你可以取得所需的圖片大小,然後透過媒體程式庫插入圖片,或使用圖片小工具確保使用最佳圖片大小 (包括回應式中斷點適用的圖片大小)。除非尺寸符合使用需求,否則請避免使用 Full Size
圖片。請參閱在貼文和網頁中插入圖片。
資源
除非另有註明,否則本頁面中的內容是採用創用 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 (世界標準時間)。"],[],[]]