本頁面由 Cloud Translation API 翻譯而成。

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

Demián Renzulli

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

必要條件

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

瞭解回應式背景圖片

首先，分析未最佳化客層的網路流量：

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

您會看到系統要求的唯一圖片是 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 版本，查看所做的變更。

評估各種裝置

我們接下來要以視覺化的方式，呈現網站在不同螢幕尺寸及模擬行動裝置上顯示的網站：

在新的 Chrome 分頁中開啟最佳化網站。
將可視區域縮小 (小於 480px)。
按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
按一下 [網路] 分頁標籤。
重新載入頁面。請注意如何要求 background-mobile.jpg 圖片。
將可視區域加寬。當寬度超過 480px 時，您會發現 background-tablet.jpg 的要求方式。當寬度超過 1025px 時，您會發現 background-desktop.jpg 的要求方式。

當瀏覽器螢幕寬度發生變更時，就會要求新的圖片。

請特別注意，如果寬度低於行動裝置中斷點 (480 像素) 中定義的值，您會看到以下網路記錄：

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

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

含有 CSS 背景圖片的元素可視為最大內容繪製 (LCP) 的候選項目，但瀏覽器預先載入掃描器無法找到 CSS 背景圖片，因此如果您不夠謹慎，就可能延遲網站的 LCP。

您應考量第一個選項，也就是 LCP 候選圖片是否能在含有 srcset 和 sizes 屬性的 <img> 元素中運作，以確保回應時間。瀏覽器預先載入掃描器會找到 <img> 元素，並在剖析器遭到封鎖時為這些元素傳送要求。

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

摘要

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