使用媒体查询优化 CSS 背景图片
使用集合保持井井有条根据你的偏好保存内容并进行分类。

Demián Renzulli

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

前提条件

本指南假定你熟悉 Chrome DevTools。如果你愿意，也可以使用其他浏览器的 DevTools。你只需将本指南中的 Chrome DevTools 屏幕截图映射回你选择的浏览器中的相关功能即可。

了解响应式背景图片

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

在新的 Chrome 选项卡中打开未优化的演示。
按 `Control+Shift+J`（在 Mac 上按 `Command+Option+J`）打开 DevTools。
点击 Network 选项卡。
重新加载页面。

你会看到唯一被请求的图片是 background-desktop.jpg，大小为 1006KB

DevTools network trace for the unoptimized background image.

调整浏览器窗口大小，并注意网络日志未显示页面发出的任何新请求。这意味着所有屏幕尺寸都使用了相同的背景图片。

你可以在 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`）打开 DevTools。
点击 Network 选项卡。
重新加载页面。注意 background-mobile.jpg 图片是如何被请求的。
使你的视口变宽。一旦宽度超过 480px，请注意 background-tablet.jpg 是如何被请求的。一旦宽度超过 1025px，请注意 background-desktop.jpg 是如何被请求的。

当浏览器屏幕的宽度改变时，会请求新的图片。

特别是当宽度低于移动设备断点（480 像素）中定义的值时，你会看到以下网络日志

DevTools network trace for the optimized background image.

新的移动设备背景的大小比桌面背景小 67%。

对最大内容渲染时间 (LCP) 的影响

具有 CSS 背景图片的元素被认为是最大内容渲染时间 (LCP) 的候选对象，但是，CSS 背景图片无法被浏览器预加载扫描器发现，这意味着如果你不小心，可能会延迟你网站的 LCP。

你应该考虑的第一个选项是，你的 LCP 候选图片是否可以在 <img> 元素中使用 srcset 和 sizes 属性来实现响应式。浏览器预加载扫描器将发现 <img> 元素，并在解析器阻止渲染时发送对它们的请求。

如果你不能（或不想）避免使用 CSS 背景图片，那么第二个选择是预加载响应式图片，以确保你为适当的视口大小预加载正确的图片。<link> 元素的 media、imagesrcset 和 imagesizes 属性提示浏览器，给定的资源提示仅在某些视口条件下适用，从而避免在你只想加载适合当前视口的一个资源时进行多次浪费的预加载。

总结

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