就到這裡了：您忘了縮小圖片，再將圖片新增至 頁面。圖片看起來沒問題，但卻造成使用者浪費資料與損害頁面 才需進行
找出大小有誤的圖片
Lighthouse 可讓您輕鬆辨識大小不正確的圖片。執行 Performance Audit (Lighthouse > 選項 > 效能)，然後找出 適當大小的圖片稽核結果。稽核工作會列出所有符合以下條件的映像檔： 必須調整大小
決定正確的圖片大小
圖片大小調整過程有時很複雜。因此我們提供 「好」和「比較好」兩者都能改善成效，但 「better」可能需要更長的時間才能理解及實行。不過 效能大幅提升針對 值得您放心導入
CSS 單位注意事項
CSS 單位有兩種類型 可指定 HTML 元素大小 包括圖片：
- 絕對單位：使用絕對單位設定樣式的元素一律會 無論使用何種裝置，大小都相同。有效、 絕對 CSS 單位：px、cm、mm、in。
- 相對單元：使用相對單位設定樣式的元素會顯示在 會因指定的相對長度而異。優先放送示例 有效、相對 CSS 單位：%、vw (1vw = 可視區域寬度的 1%)， em (1.5 em = 1.5 倍字型大小)。
「佳」做法
如果圖片是根據以下條件調整大小，請特別留意：
- 相對單元：將圖片調整成適合所有裝置的大小。
建議檢查 Analytics 資料 (例如 Google Analytics)，查看使用者常用的顯示大小。 或者，screensiz.es 可提供許多常見裝置的顯示資訊。 - 絕對單位：將圖片大小調整至與其顯示的大小。
開發人員工具元素面板可用來判斷圖片大小 顯示在畫面上
「Better」方法
針對絕對大小和相對尺寸的圖片，請使用 srcset
和 sizes
屬性來針對不同的顯示密度提供不同圖片。
參閱回應式圖片指南。
「顯示密度」是指不同的螢幕 像素密度。其他條件均相同時，像素密度高 螢幕會比低像素密度螢幕顯得更清晰。
因此，如果要讓使用者 無論圖片的像素密度為何， 他們的裝置。
有了回應式圖片技術 多個映像檔版本，供裝置自行選擇 並以最有利的方式使用。
要在各種裝置上瀏覽的圖片 會變得非常重要 小裝置。回應式圖片技術，特別是 srcset 尺寸可讓您指定多個映像檔版本，並讓裝置自行選擇 然後找出最適合的大小
調整圖片大小
無論您選擇哪種方法，在處理過程中會很有幫助 ImageMagick 用於調整圖片大小。 ImageMagick 是最熱門的 用於建立及編輯映像檔的指令列工具大多數使用者可以調整圖片大小 相較於使用 GUI 型圖片編輯器，使用 CLI 可加快的速度。
將圖片調整至原始大小的 25%：
convert flower.jpg -resize 25% flower_small.jpg
將圖片縮放至「200 像素寬 x 100 像素高」：
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
如要調整多張圖片的大小，建議您使用 自動執行程序想進一步瞭解這項功能，請前往 回應式圖片指南。
指定尺寸即可避免版面配置位移
本指南探討圖片尺寸時，將非必要的位元組數量減少納入考量，但請注意，在版面配置中保留正確的圖片空間，是盡可能減少網頁的「累計版面配置位移」指標的重要因素。在 HTML 中提供圖片時，請務必使用正確的 width 和 height 屬性，讓瀏覽器知道要在圖片的版面配置中分配多少空間：
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
如果沒有這些屬性或對應的 CSS 尺寸，瀏覽器在載入圖片前，無法得知圖片會佔用多少空間。這會導致文件中的版面配置位移，如果使用者開始閱讀內容後才移動，可能會感到不快。導致使用者在閱讀時失去居住地，或發生「失誤」情形他想要的命中目標，最後點擊了他們無意間在網頁載入期間發生的其他點擊。
除了明確提供寬度和高度，另一種方法是在圖片上使用 CSS aspect-ratio 屬性。這對於元素大小的影響也很類似，就像容器會維持一致的顯示比例一樣；width 和 height 屬性就是如此。不過差別在於，這可能會導致使用的圖片長寬比與提供的圖片不同，因此建議您使用 object-fit 設定，確保圖片不會以這張 16/9 的明確畫面扭曲：
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
驗證
調整所有圖片大小後，請再次執行 Lighthouse，確認您並未進行提交。 錯過任何資訊