使用媒体查询优化 CSS 背景图片

Demián Renzulli
Demián Renzulli
X GitHub

许多网站会请求未针对特定屏幕优化的图片等大型资源，并发送包含某些设备永远不会使用的样式的大型 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%。

对 Largest Contentful Paint (LCP) 的影响

具有 CSS 背景图片的元素被视为 Largest Contentful Paint (LCP) 的候选对象，但 CSS 背景图片无法被浏览器预加载扫描器发现，这意味着如果您不小心，可能会延迟网站的 LCP。

您应考虑的第一个选项是，LCP 候选图片是否可以在 <img> 元素中使用 srcset 和 sizes 属性来实现自适应。浏览器预加载扫描程序将发现 <img> 元素，并在解析器因渲染而被阻塞时发送对这些元素的请求。

如果您无法（或不想）避免使用 CSS 背景图片，第二种选择是预加载自适应图片，以确保您预加载的图片适合相应的视口尺寸。<link> 元素 media、imagesrcset 和 imagesizes 属性会向浏览器提示给定的资源提示仅在特定视口条件下适用，从而避免在您只想加载适合当前视口的资源时浪费多次预加载。

摘要

在本指南中，您已学习如何应用媒体查询来请求适合特定屏幕尺寸的背景图片，并在移动电话等较小的设备上访问网站时节省字节。 您可以使用 @media 规则来实现自适应背景。所有浏览器都广泛支持此技术。 一项新的 CSS 功能：image-set()，可用于实现相同的目的，但代码行数更少。在撰写本文时，并非所有浏览器都支持此功能，但您可能需要密切关注此功能的采用情况，因为它可以成为此技术的有趣替代方案。