許多網站會要求圖片等大型資源,但這些資源並未針對特定螢幕進行最佳化,而且會傳送大型 CSS 檔案,其中包含某些裝置永遠不會使用的樣式。使用媒體查詢是一種常見的技術,可為不同螢幕提供量身打造的樣式表和資產,藉此減少傳送給使用者的資料量,並改善網頁載入效能。本指南將說明如何使用媒體查詢傳送大小適當的圖片,這項技術通常稱為回應式圖片。
必要條件
本指南假設您已熟悉 Chrome 開發人員工具。如有需要,您可以改用其他瀏覽器的 DevTools。您只需將本指南中的 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 版本,查看所做的變更。
針對不同裝置進行評估
接著,請在不同螢幕尺寸和模擬行動裝置中,以視覺化方式呈現產生的網站:
- 在新分頁中開啟已最佳化的網站。
- 縮小可視區域 (小於
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 候選圖片是否能在 <img>
元素中使用 srcset
和 sizes
回應式屬性。瀏覽器預載掃描器會在解析器在轉譯時遭到阻擋時,發現 <img>
元素並傳送相關要求。
如果您無法 (或不想) 避免使用 CSS 背景圖片,第二個選項就是預載回應式圖片,確保您為適當的可視區域大小預先載入正確的圖片。<link>
元素 media
、imagesrcset
和 imagesizes
屬性會向瀏覽器提示,指出特定資源提示僅適用於特定檢視區條件,因此當您只想載入適合目前檢視區的單一資源時,就能避免浪費多個預先載入作業。
摘要
在本指南中,您已瞭解如何套用媒體查詢,要求背景圖片以特定螢幕大小為依據,並在使用行動電話等小型裝置存取網站時節省位元組。您使用 @media
規則實作回應式背景。所有瀏覽器都廣泛支援這項技術。新的 CSS 功能:image-set(),可用於相同用途,但程式碼行數更少。在撰寫本文時,並非所有瀏覽器都支援這項功能,但您可能會想密切留意採用率的變化,因為這項功能可能會成為此技術的替代方案。