預先載入回應式圖片

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

您可以預先載入回應式圖片，以便在載入圖片時載入圖片 協助瀏覽器辨識正確的圖片，加快作業速度 來自 srcset，之後才轉譯 img 標記。

回應式圖片總覽

瀏覽器支援

  • Chrome：73.
  • Edge：79，
  • Firefox：78。
  • Safari：17.2。

假設您正在使用 300 像素寬的螢幕瀏覽網頁 要求一個圖片寬度為 1500 像素這個網頁浪費了你的行動裝置費用 資料，因為螢幕無法在這些額外的解析度下執行其他操作。 在理想情況下，瀏覽器只會擷取「極小」的圖片版本 例如 325 像素的寬幅這可確保 而且圖片不會浪費資料，能加快圖片載入速度。

回應式圖片 可讓瀏覽器針對不同的裝置擷取不同的圖片資源。如果您不 使用圖片 CDN，為每個維度儲存多個尺寸 然後在 srcset 屬性中指定這些圖片。w 值會指示 因此能為每個版本的寬度 任何裝置：

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

預先載入總覽

瀏覽器支援

  • Chrome：50。
  • 邊緣：≤79。
  • Firefox：85。
  • Safari：11.1.

資料來源

預先載入功能可讓瀏覽器瞭解 。 在 HTML 中發現的。這對缺乏現成的資源來說特別實用 例如樣式表中的字型、背景圖片 已從指令碼載入資源

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

imagesrcset和imagesizes

<link> 元素會使用 imagesrcset 和 imagesizes 屬性： 預先載入回應式圖片。搭配使用 <link rel="preload">，搭配 srcset 和 sizes 語法， <img> 元素。

舉例來說，如要預先載入使用以下條件指定的回應式圖片：

 <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。

用途

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

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

假設您想在投影播放時動態載入主頁橫幅 哪些圖片會優先顯示此時，您可能會希望 盡快顯示該圖片，並且等不等待投影播放指令碼 載入後

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

  1. 開啟這個投影播放示範 在新分頁中開啟
  2. 按下 Control+Shift+J (Mac 上的 Command+Option+J) 開啟開發人員工具。
  3. 按一下 [網路] 分頁標籤。
  4. 在「Throttling」下拉式清單中選取「Fast 3G」。
  5. 停用「停用快取」核取方塊。
  6. 重新載入網頁。
，瞭解如何調查及移除這項存取權。
Chrome 開發人員工具網路面板顯示含有 JPEG 資源的刊登序列，但只在 JavaScript 後開始下載。
如果不預先載入，瀏覽器執行指令碼後就會開始載入圖片。第一張圖片不需要延遲。

在這裡使用 preload 可提前開始載入圖片，因此可以 就會自動載入。

Chrome 開發人員工具「Network」面板顯示瀑布和部分 JavaScript 同步下載的 JPEG 資源。
預先載入第一張圖片，它就會在指令碼同時開始載入。

如要瞭解預先載入功能的差異，請查看相同動態載入 圖片庫，但會先預先載入第一張圖片 簡化步驟

使用圖片集預先載入背景圖片

如果為不同螢幕密度設定不同的背景圖片，您可以 在 CSS 中使用 image-set 語法指定這些平台。接著，瀏覽器就可以 根據畫面的 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 屬性，可確保瀏覽器不會 支援 imagesrcset 和 <link> 元素，但支援 image-set CSS 會下載正確的來源。不過，這些執行個體無法享有 本例中。

您可以檢查上一個範例在預先載入的回應式廣告中會有何行為 回應式背景預先載入示範中的背景圖片。

Chrome 開發人員工具「Network」面板顯示瀑布和部分 CSS 的 JPEG 資源下載。
這裡的圖片和 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> 元素的圖片來源選取邏輯會覆蓋 media <source> 元素的屬性，並找到第一個 並使用附加的資源

因為回應式預先載入沒有「order」的概念或「第一個相符項目」 需要將中斷點轉譯為：

<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，可讓您 提供不同的圖片格式，讓瀏覽器能挑選第一個圖片格式 Kubernetes 環境預先載入功能不支援這個用途。

如果網站使用類型比對，建議避免預先載入，而是 預先載入掃描器 <picture> 和 <source> 元素。無論如何 尤其是使用「擷取優先順序」設定優先順序 取得所需圖片

對 Largest Contentful Paint (LCP) 的影響

圖片可以是最大內容繪製 (LCP) 候選， ，以便改善網站的 LCP。

無論您要預先載入的圖片是否採用回應式設計， 在初始標記酬載中不容易找到圖片資源的情況下會顯示最好 針對在用戶端轉譯標記的網站，廣告成效也能夠提升。 而非網站傳送完整標記的網站。