您可以預先載入回應式圖片,協助瀏覽器在轉譯 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="…">
預先載入總覽
預先載入功能可讓您告訴瀏覽器,您想在 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」。
- 停用「停用快取」核取方塊。
- 重新載入網頁。
在這裡使用 preload
可提前開始載入圖片,以便在瀏覽器需要顯示圖片時準備好顯示。
如要瞭解預先載入功能帶來的差別,請檢查同一個動態載入的圖片庫,但是已預先載入第一個圖片,步驟則按照第一個範例的步驟。
使用圖片集預先載入背景圖片
如果您針對不同螢幕密度使用不同的背景圖片,可以在 CSS 中使用 image-set
語法指定這些圖片。瀏覽器隨後即可根據螢幕的 DPR 選擇要顯示哪一個。
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
CSS 背景圖片的問題在於,瀏覽器必須先下載並處理頁面 <head>
中的所有 CSS 之後,才會發現這些圖片。
您可以在含有回應式背景圖片的範例網站上檢查這個問題。
回應式圖片預先載入功能可加快圖片載入速度。
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
省略 href
屬性可確保瀏覽器不支援 <link>
元素的 imagesrcset
,但支援 CSS 中的 image-set
,可下載正確的來源。不過,在這種情況下,預先載入功能並不會受益。
您可以透過回應式背景預先載入示範,查看上一個範例使用預先載入的回應式背景圖片的行為。
預先載入回應式圖片的實際效果
預先載入回應式圖片可以在理論上加快速度,但實際上該怎麼做?
為了回答這個問題,我建立了兩個示範版 PWA 商店的副本:一個不會預先載入圖片和預先載入部分圖片。網站延遲載入會使用 JavaScript 載入圖片,因此建議您預先載入初始可視區域中顯示的圖片。
- 「Start Render」會保持相同狀態。
- 速度指數稍微改善 (273 毫秒,因為圖片送達速度較快,不會佔用大量像素區域)。
- Last Painted Hero 在 1.2 秒內大幅改善,
預先載入並<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。