從 Chrome 73 版開始，使用者可以結合連結 rel="preload" 和回應式圖片，加快圖片載入速度。
瀏覽器支援
- 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">
回應式圖片 + 預先載入 = 加快圖片載入速度
回應式圖片和預先載入功能過去幾年已經推出，但當時還少了一點：無法預先載入回應式圖片。從 Chrome 73 版開始，瀏覽器可以在發現 img 標記之前，預先載入 srcset 中指定的正確回應式圖片變化版本！
視網站的結構而定，圖片顯示的速度可能會大幅加快！我們在網站上使用 JavaScript 延遲載入回應式圖片的網站執行測試。預先載入功能讓圖片載入速度加快 1.2 秒。
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 之後，瀏覽器才能找到這些圖片，這類資訊可以是大量 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 毫秒，因為圖片抵達速度較快，但不會佔用大量像素區域)，而真正能看出兩者間的差異是「上次繪製主頁橫幅」指標，這個指標增加了 1.2 秒。🎉🎉
當然，任何元素都不會帶來視覺差異，就像幻燈片比較一樣：
要預先載入並<picture>嗎？
如果您很熟悉回應式圖片，可能會想知道「<picture> 怎麼了？」。
網路效能工作小組是指為 srcset 和 sizes 新增對等的預先載入項目，而不是針對處理「藝術方向」使用案例的 <picture> 元素。
為什麼這種用途會「忽視」？
雖然也希望解決這個用途，但仍有一些技術問題需要釐清，但這也表示這裡的解決方案十分複雜。最重要的是，看來大部分用途似乎都沒有問題，即使網站遭到入侵 (請見下方說明) 也一樣。
因此，網站效能 WG 決定優先推出 srcset，並評估是否增加對等 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 圖片以提升效能。
摘要
回應式圖片預先載入開創了更多令人興奮的可能，那就是預先載入回應式圖片，以前只能透過駭客入侵的方式進行。對於注重速度的開發人員，這是一項重要的新工具，可讓我們確保重要的圖片能在需要時快速呈現給使用者。