想必大家都碰過這種狀況：忘記先縮小圖片，就將圖片新增至網頁。圖片看起來沒問題，但會浪費使用者流量，並影響網頁效能。
找出大小不正確的圖片
Lighthouse 可輕鬆找出大小不正確的圖片。執行「成效稽核」(依序點選「Lighthouse」>「選項」>「成效」)，然後查看「圖片大小適當」稽核結果。稽核會列出所有需要調整大小的圖片。
判斷正確的圖片大小
圖片大小可能比想像中複雜。因此，我們提供兩種方法：「良好」和「更佳」。這兩種做法都能提升成效，但「更佳」做法可能需要較長的時間才能瞭解及實作。但也會帶來更大的效能提升。最適合您的選項，就是您覺得最容易實作的選項。
CSS 單位簡介
有兩種 CSS 單位可用於指定 HTML 元素 (包括圖片) 的大小：
- 絕對單位：無論裝置為何，使用絕對單位設定樣式的元素一律會以相同大小顯示。有效絕對 CSS 單位範例：px、cm、mm、in。
- 相對單位：使用相對單位設定樣式的元素會以不同大小顯示，取決於指定的相對長度。有效相對 CSS 單位範例：%、vw (1vw = 視埠寬度的 1%)、em (1.5 em = 字型大小的 1.5 倍)。
「良好」做法
圖片大小依據…
- 相對單位：將圖片大小調整為適用於所有裝置。
建議您查看 Analytics 資料 (例如 Google Analytics)，瞭解使用者常用的螢幕尺寸。或者，您也可以使用 screensiz.es 網站，查看許多常見裝置的螢幕資訊。- 絕對單位：將圖片大小調整為顯示大小。
您可以使用開發人員工具的「元素」面板，判斷圖片顯示的大小。
「更佳」做法
如果圖片同時具有絕對和相對大小，請使用 srcset 和 sizes 屬性，為不同顯示密度提供不同圖片。請參閱回應式圖片指南。
「顯示密度」是指不同螢幕的像素密度不同。在其他條件相同的情況下，高像素密度螢幕的畫質會比低像素密度螢幕更清晰。
因此，如要讓使用者在任何像素密度的裝置上，都能看到最清晰的圖片，就必須提供多個圖片版本。
回應式圖片技術可讓您列出多個圖片版本，並讓裝置選擇最適合的圖片，進而實現這個目標。
適用於所有裝置的圖片對於較小的裝置而言會過大。回應式圖片技術 (特別是 srcset 和 sizes) 可讓您指定多個圖片版本，並讓裝置選擇最適合的大小。
調整圖片大小
無論選擇哪種方法，你可能會發現使用 ImageMagick 調整圖片大小很有幫助。ImageMagick 是最熱門的指令列工具，可用於建立及編輯圖片。相較於使用以 GUI 為基礎的圖片編輯器，大多數人都能透過 CLI 更快速地調整圖片大小。
將圖片大小調整為原始大小的 25%：
convert flower.jpg -resize 25% flower_small.jpg
將圖片縮放至「寬 200 像素，高 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，確認沒有遺漏任何項目。