提供尺寸正確的圖片

Katie Hempenius

如要按照本程式碼研究室的說明操作，請在第二個分頁中開啟這個 Glitch。

執行 Lighthouse

這個 Glitch 小到夠小，因此可以手動檢查圖像。但對大多數網站來說，使用 Lighthouse 等工具自動執行這項作業至關重要。

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

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. 按一下「終端機」 (注意：如果「終端機」按鈕未顯示，您可能需要使用「全螢幕」選項)。
3. 在控制台中輸入：

convert flower_logo.png -resize 50x50 flower_logo.png

修正 flower_photo.jpg

接下來，修正紫色花朵的相片。

• 在開發人員工具元素面板中檢查 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

注意： 960x 並非錯字，它指定了寬度而非高度。圖片高度將按照寬度比例縮放。當您只關注單一方向的圖片尺寸時，這種方法就很實用。

重新執行 Lighthouse

• 重新執行 Lighthouse 效能稽核，確認您已成功調整映像檔大小。

...而且失敗了！為什麼會這樣？

Lighthouse 會在 Nexus 5x 上執行測試。Nexus 5x 具有 1080 x 1920 的螢幕。如果是 Nexus 5x，flower_photo.jpg 的最佳尺寸為 540 像素寬 (1080 像素 * . 5)。這比重新調整大小的圖片小得多。

是否應該將圖片調整為更小？有可能。不過，這個答案不一定總是清楚明瞭。

權衡的是，在高解析度裝置上則需兼顧圖片品質。要高估使用者的檢查圖片品質並不容易，因此建議縮小圖片範圍，但在某些情況下，圖片品質更重要。

好消息是，您可以使用回應式圖片放送多種大小的圖片，完全不必做出取捨。詳情請參閱回應式圖片指南。