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

Demián Renzulli
Demián Renzulli
X GitHub 故障

许多网站会请求未针对特定屏幕进行优化的大型资源（例如图片），并发送包含某些设备永远不会使用的样式的大型 CSS 文件。使用媒体查询是一种常用技术，可向不同屏幕提交量身定制的样式表和资源，从而减少向用户传输的数据量并提升网页加载性能。本指南介绍了如何使用媒体查询发送大小仅为所需大小的图片，这项技术通常称为响应式图片。

前提条件

本指南假定您熟悉 Chrome 开发者工具。如果您愿意，也可以改用其他浏览器的开发者工具。您只需将本指南中的 Chrome DevTools 屏幕截图映射到您所选浏览器中的相关功能即可。

了解自适应背景图片

首先，分析未优化的演示版的网络流量：

  1. 在新标签页中打开未优化的演示版。
  2. 按 `Control+Shift+J`（在 Mac 上为 `Command+Option+J`）打开 DevTools。
  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`）打开 DevTools。
  4. 点击网络标签页。
  5. 重新加载页面。 请注意 background-mobile.jpg 图片的请求方式。
  6. 扩大视口。当宽度大于 480px 时，请注意 background-tablet.jpg 的请求方式。当宽度大于 1025px 时，请注意 background-desktop.jpg 的请求方式。

当浏览器屏幕的宽度发生变化时，系统会请求新的图片。

具体而言，当宽度低于移动设备断点 (480px) 中定义的值时，您会看到以下网络日志：

优化后的背景图片的 DevTools 网络轨迹。

新版移动版背景的大小比桌面版背景小了 67%。

对 Largest Contentful Paint (LCP) 的影响

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

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

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

摘要

在本指南中，您学习了如何应用媒体查询来请求根据特定屏幕尺寸量身定制的背景图片，以及如何在小屏设备（例如手机）上访问网站时节省字节。 您使用了 @media 规则来实现响应式背景。所有浏览器都广泛支持此技术。新 CSS 功能 image-set() 可用于相同用途，但代码行数更少。在撰写本文时，并非所有浏览器都支持此功能，但您不妨密切关注其采用情况，因为它可能是此技术的有趣替代方案。