您可以預先載入回應式圖片,這樣一來,瀏覽器就能在算繪 img
標記之前,從 srcset
找出正確的圖片,讓圖片載入速度大幅提升。
回應式圖片總覽
瀏覽器支援
假設您使用寬度為 300 像素的螢幕瀏覽網頁,而網頁要求的圖片寬度為 1500 像素。由於畫面無法使用所有額外的解析度,因此該網頁會浪費大量行動數據。理想情況下,瀏覽器會擷取比螢幕尺寸「略寬」的圖片版本,例如 325 像素。這樣一來,您就能確保圖片解析度高且不浪費資料,同時加快圖片載入速度。
回應式圖片可讓瀏覽器為不同裝置擷取不同的圖片資源。如果您未使用圖片 CDN,請為每張圖片儲存多個維度,並在 srcset
屬性中指定這些維度。w
值會向瀏覽器告知每個版本的寬度,讓瀏覽器為任何裝置選擇適當的版本:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
預先載入總覽
預先載入功能可讓您在瀏覽器發現重要資源之前,先告知瀏覽器需要盡快載入的資源。這項功能特別適合用來探索不易發現的資源,例如樣式表中包含的字型、背景圖片,或是從指令碼載入的資源。
<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)。
- 停用「Disable cache」核取方塊。
- 請重新載入頁面。
在此使用 preload
可讓圖片提前開始載入,以便在瀏覽器需要顯示圖片時,圖片已準備就緒。
如要查看預先載入的差異,請按照第一個範例中的步驟,檢查相同的動態載入圖片庫,但預先載入第一個圖片。
使用 image-set 預先載入背景圖片
如果您針對不同螢幕密度設定不同的背景圖片,可以使用 image-set
語法在 CSS 中指定這些圖片。瀏覽器就能根據螢幕的 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 保持不變。
- Speed Index 略有改善 (273 毫秒,因為圖片傳送速度加快,不會占用太多像素區域)。
- Last Painted Hero 大幅改善,速度提升 1.2 秒。
預先載入和 <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>
元素中挑選圖片。這也是最佳做法,特別是在使用擷取優先順序時,可協助將適當圖片設為優先。
對 Largest Contentful Paint (LCP) 的影響
由於圖片可以是最大內容繪製 (LCP) 候選項目,因此預先載入圖片有助改善網站的 LCP。
無論您預先載入的圖片是否為回應式,如果在初始標記酬載中無法偵測到圖片資源,預先載入功能的運作效果會最佳。在用戶端端顯示標記的網站,LCP 改善幅度會比在伺服器端傳送完整標記的網站更大。