image - 使用媒体查询控制图片下载

Question

如果我创建一个容器并想根据媒体查询设置背景图像，为什么浏览器(Firefox、Chrome)下载中等大小的图像，如果已经下载了大图像？这似乎完全违背了这一点(即节省带宽)。

HTML

<div id="background"></div>

CSS

#background {
    width: 100%;
    height: 400px;
    background-image: url(/content/images/2016/04/airport-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 500px) {
  #background {
    background: url(/content/images/2016/04/airport-medium.jpg);
  }
}
@media (min-width: 800px) {
  #background {
    background: url(/content/images/2016/04/airport-large.jpg);
  }
}

如果我加载一个页面，浏览器会下载 -large.jpg，在此设置中。如果我调整屏幕大小(低于 800 像素)，浏览器会下载并呈现 -medium.jpg，等等。

我怎样才能避免这种情况？

Answer 1

您正在调整窗口大小，这会导致执行多个媒体查询，从而导致下载多个图像。

但您是网络开发人员，为了测试目的而调整浏览器的大小。实际用户通常不会这样做。用户只需登陆您的网站开展业务 - 在一个屏幕尺寸上。

在您的情况下，如果该用户使用浏览器宽度为 500 像素 - 799 像素的设备，他/她将获得中型 jpg 和/或小型 jpg，具体取决于浏览器(见下文)。

请注意，屏幕宽度大于 800 像素的用户可能会看到所有三张图片。 (匹配 min-width: 800px 的窗口也匹配 min-width: 500px。)

基于对 Media Query & Asset Downloading Results 的评论，浏览器行为在图像下载方面有所不同。特别是，请参阅测试 #4。

---

另外，请考虑 picture 元素，它告诉浏览器哪个图像最适合特定的屏幕尺寸。

4.8.2 The picture element

The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.

<picture>
   <source srcset="airport-small.jpg"  media="(max-width: 499px)">
   <source srcset="airport-medium.jpg" media="(min-width: 500px) and (max-width: 799px)">
   <source srcset="airport-large.jpg"  media="(min-width: 800px)">
   <img src="airport-small.jpg" alt="">
</picture>

如果所有 source 元素的计算结果为 false，则应用 img 元素。这是一个有用的回退，因为 Internet Explorer 不支持 picture。

---

引用资料:

• Media Queries Specification ~ W3C
• Media Query & Asset Downloading Results ~ 蒂姆·卡德莱克
• 4.8.2 The picture element ~ W3C
• picture definition ~ MDN
• picture browser support ~ caniuse.com
• Polyfill for the picture element ~ 图片填充