網站效能的重要提示

使用 srcset 自動選擇正確的圖片大小。

Sam Dutton

根據 HTTP Archive 的資料，一般行動版網頁的大小超過 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 的運作情形。如果使用筆電或電腦，請變更瀏覽器視窗大小，然後重新開啟這個頁面。接著，使用瀏覽器工具的「Network」面板，查看系統使用了哪些圖片。(您必須在無痕式視窗或私人視窗中執行這項操作，否則系統會快取原始圖片檔案)。

如何建立多種圖片大小？

您必須為每張要與 srcset 搭配使用的圖片提供多種尺寸。

對於主圖片等一次性圖片，您可以手動儲存不同大小的圖片。如果您有大量圖片 (例如產品相片)，就需要自動化處理。這有兩種做法。

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

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

使用圖片服務

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

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

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

如果圖片在不同大小的情況下無法呈現最佳效果，該怎麼辦？

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

像素密度又是什麼？

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

這可能會影響圖片的儲存大小。我們不會在此深入探討細節，但您可以參閱「使用密度描述項」程式碼研究室，進一步瞭解相關資訊。

圖片的顯示大小如何？

您可以使用 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 的「Optimize your images」一節，進一步瞭解圖片最佳化。如需更詳細的操作說明，不妨試試 Udacity 提供的免費「回應式圖片」課程。