網站效能的重要提示

使用 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 倍以上。

儲存寬度 1000 像素，檔案大小為 184 KB

儲存寬度 300 像素，檔案大小為 16 KB

第一張圖片在儲存時大於顯示尺寸，因此檔案要大很多。兩張圖片的固定寬度為 300 像素，因此使用相同大小儲存的圖片會很合理。

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

不過，如果顯示比例不同，該怎麼辦？

在多裝置時代，圖片不一定會以單一固定尺寸顯示。

圖片元素可能具有百分比寬度，或者屬於回應式版面配置，能根據螢幕大小變更圖片顯示大小。

...以及 Retina 等 Pixel 飢餓裝置呢？

協助瀏覽器選擇正確的圖片大小

如果您可以呈現不同尺寸的圖片，再讓瀏覽器選擇最適合裝置和螢幕大小的尺寸，那該有多好？很可惜的是，還有 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 會向瀏覽器提供每個圖片檔儲存寬度的相關資訊。這項操作「不會」指定顯示圖片的顯示大小，您仍需要使用 CSS！

您會看到 srcset 對下圖的運作情形。如果使用筆記型電腦或桌上型電腦，請變更瀏覽器視窗大小，然後重新開啟這個頁面。然後使用瀏覽器工具的「網路」面板查看所用圖片。 (您必須在無痕或私密視窗中進行操作，否則系統會快取原始圖片檔)。

如何建立多種大小的圖片？

您必須針對要與 srcset 搭配使用的每個圖片，提供多種尺寸。

如果是一次性圖片 (例如主頁橫幅)，您可以手動儲存不同大小的圖片。如果您有大量圖片 (例如產品相片)，就需要自動進行處理。解決方法有兩種

將圖片處理功能納入建構程序

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

使用圖片服務

使用 Cloudinary 等商業服務，或是您自行安裝並執行的 Thumbor 等開放原始碼軟體，即可自動建立及傳送映像檔。

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

圖片服務還有其他進階功能，例如可以針對不同圖片大小自動進行「智慧裁剪」，以及自動向支援此格式 (而非 JPEG) 的瀏覽器傳送 WebP 圖片，而無須變更副檔名。

注意： 你可以使用瀏覽器工具檢查提交的格式。就上述圖片網址而言，系統會自動將 WebP 檔案傳送給支援 WebP 的瀏覽器，且不會變更 .jpg 副檔名。

如果圖片繪製成不同大小，該怎麼辦？

在這種情況下，您必須使用 <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 和「指定多個版位寬度」程式碼研究室中瞭解實際運作情形。

注意： sizes 會提供瀏覽器圖片元素的顯示寬度相關資訊。和 srcset 一樣，系統「不會」指定顯示圖片的顯示大小，需要使用 CSS。

瀏覽器是否支援？

全球超過 90% 的瀏覽器支援 srcset 和 sizes。

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

這會讓 srcset 和 sizes 有出色的進展！

瞭解詳情

請查看 web.dev 的「將圖片最佳化」一節，深入瞭解圖片最佳化作業。如需更多引導式體驗，請考慮使用 Udacity 提供的免費「回應式圖片」(回應式圖片) 課程。

注意： 這篇文章隨附網站效能相關實用提示：這系列影片總結，說明改善網站速度的簡單技巧。