預先載入回應式圖片

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

您可以預先載入回應式圖片，這樣一來，瀏覽器就能在算繪 img 標記之前，從 srcset 找出正確的圖片，讓圖片載入速度大幅提升。

回應式圖片總覽

瀏覽器支援

  • Chrome：73。
  • Edge：79。
  • Firefox：78。
  • Safari：17.2。

假設您使用寬度為 300 像素的螢幕瀏覽網頁，而網頁要求的圖片寬度為 1500 像素。這個網頁會浪費大量行動裝置資料，因為您的螢幕無法使用所有額外的解析度。理想情況下，瀏覽器會擷取比螢幕尺寸「略寬」的圖片版本，例如 325 像素。這樣一來，您就能確保圖片解析度高且不浪費資料，同時加快圖片載入速度。

回應式圖片可讓瀏覽器為不同裝置擷取不同的圖片資源。如果您不使用圖片 CDN，請為每張圖片儲存多個維度，並在 srcset 屬性中指定這些維度。w 值會告知瀏覽器每個版本的寬度，讓瀏覽器為任何裝置選擇適當的版本：

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

預先載入功能總覽

瀏覽器支援

  • Chrome：50。
  • Edge：≤79。
  • Firefox：85。
  • Safari：11.1。

資料來源

預先載入功能可讓您在 HTML 中發現重要資源之前，先告知瀏覽器盡快載入這些資源。這項功能特別適合用來探索不易發現的資源，例如樣式表中包含的字型、背景圖片，或是從指令碼載入的資源。

<link rel="preload" as="image" href="important.png">

imagesrcset和imagesizes

<link> 元素會使用 imagesrcset 和 imagesizes 屬性來預先載入回應式圖片。請搭配 <link rel="preload"> 使用，並在 <img> 元素中使用 srcset 和 sizes 語法。

舉例來說，如果您想預先載入指定的回應式圖片，請使用以下方式：

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

方法是在 HTML 的 <head> 中加入以下內容：

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

這會使用 srcset 和 sizes 使用的相同資源選取邏輯，啟動要求。

用途

以下是預先載入回應式圖片的幾種用途。

預先載入動態插入的回應式圖片

假設您要動態載入主頁橫幅圖片做為投影片單的一部分，且知道哪張圖片會優先顯示。在這種情況下，您可能會想盡快顯示該圖片，而非等待幻燈片指令碼載入圖片。

您可以在網站上檢查這個問題，該網站必須使用動態載入的圖片庫：

  1. 在新分頁中開啟這個幻燈片示範。
  2. 按下 Control+Shift+J (在 Mac 上為 Command+Option+J) 開啟開發人員工具。
  3. 按一下 [網路] 分頁標籤。
  4. 在「Throttling」(節流) 下拉式清單中，選取「Fast 3G」(快速 3G)。
  5. 停用「Disable cache」核取方塊。
  6. 請重新載入頁面。
Chrome 開發人員工具「網路」面板顯示的瀑布圖，其中 JPEG 資源只有在某些 JavaScript 後才開始下載。
如果未預先載入，圖片會在瀏覽器執行完指令碼後才開始載入。對於第一張圖片，則不需要延遲。

在此使用 preload 可讓圖片提前開始載入，以便在瀏覽器需要顯示圖片時，圖片已準備就緒。

Chrome 開發人員工具「網路」面板顯示瀑布圖，其中 JPEG 資源與部分 JavaScript 並行下載。
預先載入第一個圖片，可讓圖片與指令碼同時開始載入。

如要查看預先載入的差異，請按照第一個範例中的步驟，檢查相同的動態載入圖片庫，但預先載入第一張圖片。

使用 image-set 預先載入背景圖片

如果您為不同螢幕密度提供不同的背景圖片，可以使用 image-set 語法在 CSS 中指定這些圖片。瀏覽器接著可根據螢幕的 DPR 選擇要顯示哪一個。

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

CSS 背景圖片的問題是，瀏覽器必須先下載並處理網頁 <head> 中的所有 CSS，才能發現這些圖片。

您可以在含有回應式背景圖片的示例網站上檢查這個問題。

Chrome 開發人員工具「網路」面板顯示的瀑布圖，其中 JPEG 資源只有在某些 CSS 後才開始下載。
在這個範例中，CSS 必須完全下載完畢，圖片下載作業才會開始，導致圖片顯示出現不必要的延遲。

回應式圖片預先載入功能可讓您更快載入這些圖片。

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

若省略 href 屬性，您就能確保瀏覽器不會在 <link> 元素上支援 imagesrcset，但會在 CSS 中支援 image-set，並下載正確的來源。但在這種情況下，他們不會從預先載入作業中獲得任何好處。

您可以在回應式背景預先載入示範中，查看上述範例在使用預先載入的回應式背景圖片時的行為。

Chrome 開發人員工具「網路」面板顯示瀑布圖，其中 JPEG 資源與部分 CSS 並行下載。
這裡的圖片和 CSS 會同時開始下載，讓圖片載入速度加快。

預先載入回應式圖片的實際效果

理論上，預先載入回應式圖片可以加快圖片載入速度，但實際上會如何呢？

為回答這個問題，我建立了兩個示範 PWA 商店的副本：一個不預先載入圖片，另一個則預先載入部分圖片。由於網站會使用 JavaScript 延遲載入圖片，因此預先載入在初始可視區域中顯示的圖片，可能會帶來好處。

針對不預先載入和圖片預先載入，這項測試產生了以下結果：

WebPageTest 膠卷比較顯示預先載入的圖片比一般方式快約 1.5 秒。
預先載入圖片可大幅縮短圖片傳送時間，大幅改善使用者體驗。

預先載入和 <picture>

Web Performance Working Group 正在討論為 srcset 和 sizes 新增等效的預先載入功能，但不會為處理「藝術方向」用例的 <picture> 元素新增此功能。

預先載入 <picture> 時仍有許多技術問題需要解決，但在此期間，您可以使用下列暫時解決方法：

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

<picture> 元素的圖片來源選取邏輯會依序檢查 <source> 元素的 media 屬性，找出第一個相符的屬性，然後使用附加的資源。

由於回應式預先載入沒有「順序」或「首次比對」的概念，因此您需要將中斷點轉譯為類似以下的內容：

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

預先載入和 type

<picture> 元素也支援在第一個 type 上進行比對，讓您提供不同的圖片格式，讓瀏覽器選擇支援的第一個圖片格式。預先載入不支援此用途。

如果網站使用類型比對功能，建議不要使用預先載入功能，而是改用預先載入掃描器從 <picture> 和 <source> 元素中挑選圖片。這也是最佳做法，特別是在使用擷取優先順序時，可協助將適當圖片設為優先。

對最大內容繪製 (LCP) 的影響

由於圖片可能會成為最大內容繪製 (LCP) 候選項目，因此預先載入圖片可改善網站的 LCP。

無論您預先載入的圖片是否為回應式，如果在初始標記酬載中無法偵測到圖片資源，預先載入功能的運作效果會最佳。在用戶端端顯示標記的網站，LCP 改善幅度會比在伺服器端傳送完整標記的網站更大。