執行 Lighthouse
這個錯誤很小,因此可以手動檢查圖片。不過,對於大多數網站而言,使用 Lighthouse 等工具自動執行這項作業是必要的。
- 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 。
- 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 確認已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
- 查看「適當大小的圖片」稽核結果。
Lighthouse 稽核顯示,這個網頁的兩張圖片都需要調整大小。
修正「flower_logo.png
」
從頁面頂端開始,修正標誌圖片。
- 在「開發人員工具」的「元素」面板中檢查
flower_logo.png
。
以下是 flower_logo.png
的 CSS:
.logo {
width: 50px;
height: 50px;
}
此圖片的 CSS 寬度為 50 像素,因此應將 flower_logo.png
的大小調整為相符。您可以使用 ImageMagick 將圖片大小調整至適合的大小。ImageMagick 是用於圖片編輯的 CLI 工具,已預先安裝在程式碼研究室環境中。
- 按一下「Remix to Edit」,即可編輯專案。
- 按一下「Terminal」 (注意:如果沒有顯示「Terminal」按鈕,您可能需要使用「Fullscreen」選項)。
- 在控制台中輸入:
convert flower_logo.png -resize 50x50 flower_logo.png
修正 flower_photo.jpg
接下來,修正紫色花朵的相片。
- 在 DevTools 元素面板中檢查
flower_photo.jpg
。
此為 flower_photo.jpg
的 CSS:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw
將 flower_photo.jpg
的 CSS 寬度設為「瀏覽器寬度的一半」。(1vw 等於瀏覽器寬度的 1%)。
圖片的理想大小取決於使用者用來查看的裝置,因此請調整為適合大多數使用者的大小。您可以查看數據分析資料,瞭解使用者最常使用的螢幕解析度:
這項資料顯示,超過 95%的網站訪客使用螢幕解析度為 1920 像素寬或更小的螢幕。
有了這些資訊,我們就能計算圖片的寬度: (1920 像素寬) * (瀏覽器寬度的 50%) = 960 像素
如果解析度寬度超過 1920 像素,圖片會延伸至覆蓋整個區域。調整大小後的圖片仍是相當大的,因此效果不應該明顯。
- 使用 ImageMagick 將圖片大小調整為 960 像素寬。在終端機中輸入:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg
# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
重新執行 Lighthouse
- 重新執行 Lighthouse Performance 稽核,確認圖片大小已順利調整。
… 但失敗了!為什麼會這樣?
Lighthouse 會在 Nexus 5X 上執行測試。Nexus 5x 的螢幕解析度為 1080 x 1920。對於 Nexus 5x,flower_photo.jpg
的最佳大小為 540 像素寬 (1080 像素 * . 5)。這比我們重新調整大小的圖片小得多。
您是否應該將圖片大小調整得更小?應該是。不過,這類問題的答案不一定是明確的。
這裡的取捨是高解析度裝置的圖片品質與效能。使用者很容易高估自己會仔細檢查圖片,因此您可能需要縮小圖片大小。不過,有些用途的圖片品質確實比較重要。
好消息是,您可以使用回應式圖片來提供多種圖片大小,完全避免這種取捨。如要進一步瞭解這項功能,請參閱回應式圖片指南。