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 圖片。請參閱在貼文和網頁中插入圖片。