提升網站效能的最佳訣竅

使用 srcset 自動選擇合適的圖片大小。

Sam Dutton

根據 HTTP 封存資料，一般行動版網頁的大小超過 2.6 MB，其中有超過三分之二是圖片。這就是最佳化廣告空間的大好機會！

摘要

• 請勿儲存大於顯示大小的圖片。
• 為每張圖片儲存多種大小，並使用 srcset 屬性，讓瀏覽器選擇最小的圖片。w 值會告知瀏覽器每個版本的寬度：

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

儲存大小合適的圖片

使用與顯示大小相符的圖片尺寸，可加快網站速度並減少資料用量。換句話說，儲存圖片時，請提供正確的寬度和高度。

請參閱下圖。

這兩張圖片看起來幾乎一模一樣，但其中一張的檔案大小是另一張的 10 倍以上。

第一個圖片的檔案大小大得多，因為儲存時的尺寸遠大於螢幕大小。兩張圖片的寬度都固定為 300 像素，因此使用以相同大小儲存的圖片最合適。

如要使用固定寬度，請使用與顯示大小相同尺寸的圖片。

但如果螢幕大小各異呢？

在多裝置環境中，圖片不一定會以單一固定大小顯示。

圖片元素可能具有百分比寬度，或是回應式版面配置的一部分，其中圖片顯示大小會變更以配合螢幕大小。

如果是 Retina 顯示器等需要大量像素的裝置呢？

協助瀏覽器選擇合適的圖片大小

如果能提供不同大小的圖片，然後讓瀏覽器根據裝置和螢幕大小選擇最合適的圖片，不是很好嗎？很遺憾，在判斷哪張圖片最合適時，會遇到catch-22。瀏覽器應使用最小的圖片，但必須先下載圖片才能檢查寬度。

這時 srcset 就能派上用場。儲存不同大小的圖片，然後告知瀏覽器每個版本的寬度：

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

w 值會以像素為單位顯示每張圖片的寬度。舉例來說，small.jpg 500w 會告知瀏覽器 small.jpg 的寬度為 500 像素。這樣一來，瀏覽器就能根據螢幕類型和可視區域大小，選擇最小的圖片，而不必下載圖片來檢查大小。

下圖顯示 srcset 的實際效果。如果使用筆電或桌上型電腦，請變更瀏覽器視窗大小，然後重新開啟這個頁面。然後使用瀏覽器工具的「網路」面板，檢查使用的圖片。 (您必須在無痕或私密視窗中執行這項操作，否則系統會快取原始圖片檔案)。

如何建立多種尺寸的圖片？

如要搭配 srcset 使用圖片，必須提供多種尺寸。

如果是主頁橫幅等一次性圖片，您可以手動儲存不同大小的圖片。如果圖片數量眾多 (例如產品相片)，則需要自動化處理。方法有兩種。

在建構程序中加入圖片處理作業

在建構程序中，您可以新增步驟來建立不同大小的圖片版本。詳情請參閱「使用 Imagemin 壓縮圖片」。

使用圖片服務

您可以使用 Cloudinary 等商業服務，或 Thumbor 等開放原始碼同等服務 (自行安裝及執行)，自動建立及傳送圖片。

您上傳高解析度圖片後，圖片服務會根據網址參數，自動建立及提供不同格式和大小的圖片。舉例來說，請在 Cloudinary 上開啟這張範例圖片，然後嘗試變更網址列中的 w 值或副檔名。

圖片服務也提供更進階的功能，例如自動為不同圖片大小「智慧裁剪」，以及自動將 WebP 圖片傳送至支援該格式的瀏覽器，而非 JPEG，且不會變更副檔名。

如果圖片在不同大小的螢幕上無法正常顯示，該怎麼辦？

在這種情況下，您需要使用 <picture> 元素進行「藝術指導」：在不同大小提供不同的圖片或圖片裁剪。如要瞭解詳情，請參閱「Art direction」程式碼研究室。

像素密度呢？

高階裝置的實體像素較小 (密度較高)，舉例來說，高階手機每列的像素數量，可能是較便宜裝置的兩到三倍。

這可能會影響儲存圖片所需的大小。我們不會在此深入探討這些細節，但您可以參閱「使用密度描述元」程式碼研究室瞭解詳情。

圖片的顯示大小呢？

你可以使用 sizes，讓 srcset 運作得更順暢。

如果沒有這個屬性，瀏覽器會使用可視區域的完整寬度，從 srcset 中選擇圖片。sizes 屬性會告知瀏覽器圖片元素顯示的寬度，因此瀏覽器可以在進行任何版面配置計算前，選擇最小的圖片檔案。

在下方範例中，sizes="50vw" 會告知瀏覽器，這張圖片將以檢視區塊寬度的 50% 顯示。

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

如要查看實際運作情形，請前往 simpl.info/sizes 和「指定多個廣告空間寬度」程式碼研究室。

瀏覽器支援情形如何？

srcset 和 sizes在全球超過 90% 的瀏覽器中都受到支援。

如果瀏覽器不支援 srcset 或 sizes，系統會改為使用 src 屬性。

這讓 srcset 和 sizes 成為絕佳的漸進式強化功能！

瞭解詳情

如要深入瞭解圖片最佳化，請參閱 web.dev 的「最佳化圖片」一節。如要取得更多指引，建議您試試 Udacity 提供的免費「回應式圖片」課程。