使用媒體查詢來最佳化 CSS 背景圖片

Demián Renzulli
Demián Renzulli

許多網站會要求圖片等大型資源,但這些資源並未針對特定螢幕進行最佳化,而且會傳送大型 CSS 檔案,其中包含某些裝置永遠不會使用的樣式。使用媒體查詢是一種常見的技術,可為不同螢幕提供量身打造的樣式表和資產,藉此減少傳送給使用者的資料量,並改善網頁載入效能。本指南將說明如何使用媒體查詢傳送大小適當的圖片,這項技術通常稱為回應式圖片

必要條件

本指南假設您已熟悉 Chrome 開發人員工具。如有需要,您可以改用其他瀏覽器的 DevTools。您只需將本指南中的 Chrome 開發人員工具螢幕截圖,對應至所選瀏覽器中的相關功能即可。

瞭解回應式背景圖片

首先,請分析未經最佳化的示範內容的網路流量:

  1. 在新分頁中開啟未經最佳化的示範內容
  2. 按下 `Control + Shift + J` 鍵 (在 Mac 上為 `Command + Option + J` 鍵) 開啟開發人員工具。
  3. 按一下 [網路] 分頁標籤。
  4. 請重新載入頁面。

您會發現唯一要求的圖片是 background-desktop.jpg,大小為 1006KB

未最佳化的背景圖片的 DevTools 網路追蹤記錄。

調整瀏覽器視窗大小,您會發現網路記錄未顯示任何網頁提出的新要求。也就是說,所有螢幕大小都會使用相同的圖片背景。

您可以在 style.css 中查看控制背景圖片的樣式:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

以下是各個屬性的意義:

  • background-position: center center:將圖片置中,並以垂直和水平方向顯示。
  • background-repeat: no-repeat:只顯示圖片一次。
  • background-attachment: fixed:避免捲動背景圖片。
  • background-size: cover:調整圖片大小,讓圖片覆蓋整個容器。
  • background-image: url(images/background-desktop.jpg):圖片的網址。

結合這些樣式後,瀏覽器就會根據不同的螢幕高度和寬度調整背景圖片。這是實現回應式背景的第一步。

為所有螢幕大小使用單一背景圖片有以下限制:

  • 無論螢幕大小為何,系統都會傳送相同位元組數,即使對於某些裝置 (例如手機),較小且較輕量的圖片背景看起來也一樣不錯。一般來說,您應傳送盡可能小的圖片,讓圖片在使用者螢幕上看起來仍不失美觀,以提升效能並節省使用者資料。
  • 在較小的裝置上,圖片會被拉伸或裁剪,以便覆蓋整個螢幕,這可能會對使用者隱藏背景的相關部分。

在下一節中,您將瞭解如何根據使用者的裝置,套用最佳化功能來載入不同的背景圖片。

使用媒體查詢

使用媒體查詢是宣告樣式表的常見技巧,這種做法只會套用至特定媒體或裝置類型。這些樣式是透過使用 @media 規則實作,可讓您定義一組中斷點,並在其中定義特定樣式。當 @media 規則定義的條件 (例如特定螢幕寬度) 達到時,系統就會套用中斷點內定義的樣式群組。

您可以按照下列步驟,將媒體查詢套用至網站,根據要求網頁的裝置最大寬度使用不同的圖片。

  • style.css 中,移除包含背景圖片網址的行:
body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}
  • 接下來,請根據行動裝置、平板電腦和電腦螢幕通常具有的常見像素尺寸,為每個螢幕寬度建立中斷點:

行動裝置適用:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

平板電腦:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

電腦裝置:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

在瀏覽器中開啟已最佳化的 style.css 版本,查看所做的變更。

針對不同裝置進行評估

接著,請在不同螢幕尺寸和模擬行動裝置中,以視覺化方式呈現產生的網站:

  1. 在新分頁中開啟已最佳化的網站
  2. 縮小可視區域 (小於 480px)。
  3. 按下 `Control + Shift + J` 鍵 (在 Mac 上為 `Command + Option + J` 鍵) 開啟開發人員工具。
  4. 按一下 [網路] 分頁標籤。
  5. 重新載入頁面。請注意 background-mobile.jpg 圖片的索取方式。
  6. 將可視區域加寬。一旦寬度超過 480px,請注意 background-tablet.jpg 的請求方式。一旦寬度超過 1025px,請注意 background-desktop.jpg 的請求方式。

瀏覽器畫面寬度變更時,系統會要求新的圖片。

特別是當寬度低於行動版切換點 (480 像素) 中定義的值時,您會看到下列網路記錄:

針對已最佳化的背景圖片,顯示網路追蹤記錄。

新的行動版背景大小比電腦版小 67%

對最大內容繪製 (LCP) 的影響

含有 CSS 背景圖片的元素會被視為最大內容繪製 (LCP) 的候選項目,但 CSS 背景圖片無法由瀏覽器預先載入掃描器偵測,因此如果不小心,可能會延遲網站的 LCP。

您首先要考慮的選項是,LCP 候選圖片是否能在 <img> 元素中使用 srcsetsizes 回應式屬性。瀏覽器預載掃描器在解析器在轉譯時遭到阻擋時,發現 <img> 元素並傳送相關要求。

如果您無法 (或不想) 避免使用 CSS 背景圖片,第二個選項就是預載回應式圖片,確保您為適當的可視區域大小預先載入正確的圖片。<link> 元素 mediaimagesrcsetimagesizes 屬性會向瀏覽器提示,指出特定資源提示僅適用於特定檢視區條件,因此當您只想載入適合目前檢視區的單一資源時,就能避免浪費多個預先載入作業。

摘要

在本指南中,您已瞭解如何套用媒體查詢,要求背景圖片以特定螢幕大小為依據,並在使用行動電話等小型裝置存取網站時節省位元組。您使用 @media 規則實作回應式背景。所有瀏覽器都廣泛支援這項技術。新的 CSS 功能:image-set(),可用於相同用途,但程式碼行數更少。在撰寫本文時,並非所有瀏覽器都支援這項功能,但您可能會想密切留意採用率的變化,因為這項功能可能會成為此技術的替代方案。