預先載入回應式圖片

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

您可以預先載入回應式圖片，協助瀏覽器在轉譯 img 標記之前從 srcset 識別正確的圖片，大幅加快圖片載入速度。

回應式圖片總覽

瀏覽器支援

  • 73
  • 79
  • 78
  • 17.2

假設您瀏覽網頁時螢幕寬度為 300 像素，而網頁要求的圖片寬度為 1500 像素。該頁面會導致大量的行動數據流量，因為螢幕不支援其他額外解析度。在理想情況下，瀏覽器會擷取圖片版本，比起螢幕尺寸略微更寬 (例如 325 像素)。這可確保高解析度圖片不會浪費資料，並加快圖片載入速度。

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

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

預先載入總覽

瀏覽器支援

  • 50
  • ≤79
  • 85
  • 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」。
  5. 停用「停用快取」核取方塊。
  6. 重新載入網頁。
Chrome 開發人員工具「Network」面板的螢幕截圖。
如未預先載入，瀏覽器執行指令碼後，圖片就會開始載入。第一張圖片不需要延遲。

在這裡使用 preload 可提前開始載入圖片，以便在瀏覽器需要顯示圖片時準備好顯示。

Chrome 開發人員工具「Network」面板的螢幕截圖。
預先載入第一張圖片可讓系統同時開始載入指令碼。

如要瞭解預先載入功能帶來的差別，請檢查同一個動態載入的圖片庫，但是已預先載入第一個圖片，步驟則按照第一個範例的步驟。

使用圖片集預先載入背景圖片

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

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

CSS 背景圖片的問題在於，瀏覽器必須先下載並處理頁面 <head> 中的所有 CSS 之後，才會發現這些圖片。

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

Chrome 開發人員工具「Network」面板的螢幕截圖。
在這個例子中，系統會在 CSS 下載完成之後，才開始下載圖片，導致圖片顯示不必要的延遲。

回應式圖片預先載入功能可加快圖片載入速度。

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

省略 href 屬性可確保瀏覽器不支援 <link> 元素的 imagesrcset，但支援 CSS 中的 image-set，可下載正確的來源。不過，在這種情況下，預先載入功能並不會受益。

您可以透過回應式背景預先載入示範，查看上一個範例使用預先載入的回應式背景圖片的行為。

Chrome 開發人員工具「Network」面板的螢幕截圖。
這張圖片和 CSS 會同時開始下載圖片，加快圖片載入速度。

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

預先載入回應式圖片可以在理論上加快速度，但實際上該怎麼做？

為了回答這個問題，我建立了兩個示範版 PWA 商店的副本：一個不會預先載入圖片和預先載入部分圖片。網站延遲載入會使用 JavaScript 載入圖片，因此建議您預先載入初始可視區域中顯示的圖片。

這會針對不預先載入和映像檔預先載入產生下列結果：

顯示預先載入圖片的 WebPageTest 幻燈片比較結果螢幕截圖，顯示速度快了 1.5 秒。
預先載入圖片時，圖片顯示速度會大幅加快，大幅提升使用者體驗。

預先載入並<picture>

網路效能工作小組正在討論為 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。