提供尺寸正確的圖片

Katie Hempenius
Katie Hempenius

這個錯誤很小,因此可以手動檢查圖片。不過,對於大多數網站而言,使用 Lighthouse 等工具自動執行這項作業是必要的。

  1. 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕
  2. 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
  3. 按一下「Lighthouse」分頁標籤。
  4. 確認已在「類別」清單中勾選「成效」核取方塊。
  5. 按一下「產生報表」按鈕。
  6. 查看「適當大小的圖片」稽核結果。

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 工具,已預先安裝在程式碼研究室環境中。

  1. 按一下「Remix to Edit」,即可編輯專案。
  2. 按一下「Terminal」 (注意:如果沒有顯示「Terminal」按鈕,您可能需要使用「Fullscreen」選項)。
  3. 在控制台中輸入:
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;
}

50vwflower_photo.jpg 的 CSS 寬度設為「瀏覽器寬度的一半」。(1vw 等於瀏覽器寬度的 1%)。

圖片的理想大小取決於使用者用來查看的裝置,因此請調整為適合大多數使用者的大小。您可以查看數據分析資料,瞭解使用者最常使用的螢幕解析度:

螢幕解析度的 Google 分析。

這項資料顯示,超過 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 的圖片大小稽核。

… 但失敗了!為什麼會這樣?

Lighthouse 會在 Nexus 5X 上執行測試。Nexus 5x 的螢幕解析度為 1080 x 1920。對於 Nexus 5x,flower_photo.jpg 的最佳大小為 540 像素寬 (1080 像素 * . 5)。這比我們重新調整大小的圖片小得多。

您是否應該將圖片大小調整得更小?應該是。不過,這類問題的答案不一定是明確的。

這裡的取捨是高解析度裝置的圖片品質與效能。使用者很容易高估自己會仔細檢查圖片,因此您可能需要縮小圖片大小。不過,有些用途的圖片品質確實比較重要。

好消息是,您可以使用回應式圖片來提供多種圖片大小,完全避免這種取捨。如要進一步瞭解這項功能,請參閱回應式圖片指南