本頁面由 Cloud Translation API 翻譯而成。

預先載入回應式圖片

Barry Pollard

Yoav Weiss

您可以預先載入回應式圖片，協助瀏覽器從 srcset 中找出正確的圖片，然後再算繪 img 標記，大幅加快圖片載入速度。

回覆式圖片總覽

Browser Support

Source

假設您在寬度為 300 像素的螢幕上瀏覽網頁，而該網頁要求寬度為 1500 像素的圖片。由於螢幕無法處理這麼高的解析度，該網頁浪費了許多行動數據。理想情況下，瀏覽器會擷取比螢幕寬度稍大的圖片版本，例如 325 像素。這可確保圖片為高解析度，且不會浪費資料，圖片載入速度也會更快。

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

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

預先載入總覽

Browser Support

Source

預先載入功能可讓您在 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 相同的資源選取邏輯，發出要求。

用途

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

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

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

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

在新分頁中開啟這個投影片展示。
按下 Control+Shift+J 鍵 (Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
按一下 [網路] 分頁標籤。
在「Throttling」(節流) 下拉式清單中，選取「Fast 3G」(快速 3G)。
取消勾選「停用快取」核取方塊。
請重新載入頁面。

Chrome 開發人員工具的「網路」面板，顯示瀑布圖，其中只有在某些 JavaScript 之後，才會開始下載 JPEG 資源。 — 如果沒有預先載入，圖片會在瀏覽器執行完指令碼後開始載入。對於第一張圖片，這種延遲是不必要的。

在此使用 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，會下載正確的來源。不過，在這種情況下，他們不會受益於預先載入。

您可以在自動調整背景預先載入示範中，檢查上一個範例在預先載入自動調整背景圖片時的行為。