提供尺寸正確的圖片

Katie Hempenius
Katie Hempenius

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

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

Lighthouse 中的適當圖片大小稽核失敗。

Lighthouse 稽核顯示,這個網頁的兩張圖片都需要調整大小。

修正 flower_logo.png

從頁面頂端開始,修正標誌圖片。

  • 在 DevTools「元素」面板中檢查 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 成效稽核,確認您已成功調整圖片大小。

Lighthouse 的圖片大小稽核。

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

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

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

這裡的取捨是高解析度裝置的圖片品質與效能。使用者很容易高估自己會仔細檢查圖片,因此您可能需要縮小圖片大小,但在某些情況下,圖片品質確實更為重要。

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