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

Demián Renzulli
Demián Renzulli

許多網站會要求大量資源 (例如未針對某些螢幕進行最佳化的圖片),並傳送大型 CSS 檔案,其中包含部分裝置一律不會使用的樣式。使用媒體查詢時,許多人會使用媒體查詢,將特製的樣式表和素材資源提供給不同畫面,以減少傳輸給使用者的資料量,並提高網頁載入速度。本指南將介紹如何使用媒體查詢傳送符合需求的圖片 (通常稱為「回應式圖片」的技術)。

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

瞭解回應式背景圖片

首先,分析未最佳化客層的網路流量:

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

您會看到系統要求的唯一圖片是 background-desktop.jpg,其大小為 1006KB

未最佳化背景圖片的開發人員工具網路追蹤記錄。

調整瀏覽器視窗的大小,並留意「網路記錄」未顯示網頁提出的任何新要求。這表示無論螢幕大小為何,都使用相同的圖片背景。

您可以在 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. 在新的 Chrome 分頁中開啟最佳化網站
  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 候選圖片是否能在含有 srcsetsizes 屬性的 <img> 元素中運作,以確保回應時間。瀏覽器預先載入掃描器找到 <img> 元素,並在剖析器遭到封鎖時為這些元素傳送要求。

如果您無法 (或不想) 避免使用 CSS 背景圖片,第二個選項則是預先載入回應式圖片,以確保您預先載入正確圖片來符合適當的可視區域大小。<link> 元素 mediaimagesrcsetimagesizes 會提示瀏覽器,提示特定資源提示僅適用於特定可視區域條件,因此如果只想載入一個適合目前可視區域的資源,避免多次載入不必要的預先載入。

摘要

在這份指南中,您已學會如何套用媒體查詢,要求針對特定螢幕尺寸調整背景圖片,以及在手機 (例如手機) 上存取網站時可以節省位元組數。 您使用 @media 規則實作回應式背景。所有瀏覽器廣泛支援這項技術。全新 CSS 功能:image-set(),只需要少量的程式碼就能實現相同用途。在本文撰寫期間,並非所有瀏覽器都支援這項功能,但建議您留意採用方式不斷改進的地方,因為這代表這項技術的另一個替代方案。