預先載入回應式圖片

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

發布日期：2019 年 9 月 30 日，上次更新日期：2026 年 7 月 10 日

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

回應式圖片總覽

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

假設您在寬度為 300 像素的螢幕上瀏覽網頁，而網頁要求寬度為 1500 像素的圖片。由於螢幕無法處理所有額外的解析度，因此該網頁浪費了大量行動數據。理想情況下，瀏覽器會擷取比螢幕尺寸稍寬的圖片版本，例如 325 像素。這樣一來，系統就能確保圖片解析度高，不會浪費資料，而且圖片載入速度更快。

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

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

預先載入總覽

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

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

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

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" fetchpriority="high">

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

用途

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

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

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

您可以在動態載入圖片庫的網站上檢查這個問題：

  1. 在新分頁中開啟這個投影片示範。
  2. 按下 Control+Shift+J 鍵 (Mac 則為 Command+Option+J 鍵)，開啟開發人員工具。
  3. 按一下 [網路] 分頁標籤。
  4. 在「Throttling」下拉式選單中，選取「Fast 3G」。
  5. 取消勾選「停用快取」核取方塊。
  6. 請重新載入頁面。
Chrome 開發人員工具的「Network」(網路) 面板顯示瀑布圖，其中 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" fetchpriority="high">

省略 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)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

預先載入和type

<picture> 元素也支援比對第一個 type，讓您提供不同的圖片格式，以便瀏覽器挑選支援的第一個圖片格式。

預先載入功能僅部分支援這個用途：瀏覽器應只下載支援類型的預先載入內容。因此，您可以在預先載入中加入這項屬性，防止瀏覽器預先載入不支援的 MIME 類型：

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

不過，與 <picture> 不同的是，它不會在第一個支援的類型停止。因此，如果為多種類型加入多個預先載入項目，系統會預先載入所有圖片：

錯誤做法 - 預先載入多種類型：

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

建議做法：預先載入最偏好的類型：

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

預先載入最新格式 (在本例中為 AVIF) 可做為漸進增強功能，支援該類型的瀏覽器會受益，其他瀏覽器則不會受益。

如果網站的 HTML 很快就能找到圖片，建議不要預先載入，而是讓預先載入掃描器從 <picture> 和 <source> 元素中擷取圖片。無論如何，這都是最佳做法，尤其是在使用擷取優先順序協助排定適當圖片的優先順序時，因為這可讓系統根據瀏覽器支援預先載入確切圖片。此外，當圖片或網頁變更時，預先載入的內容也不會與主要標記不一致。

對 Largest Contentful Paint (LCP) 的影響

由於圖片可能是 Largest Contentful Paint (LCP) 候選項目，預先載入圖片可改善網站的 LCP。

無論預先載入的圖片是否為回應式，如果圖片資源無法在初始標記酬載中找到，預先載入的效果最好。相較於從伺服器傳送完整標記的網站，在用戶端轉譯標記的網站上，LCP 改善幅度也更大。