使用媒体查询来控制图像下载

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

picture 元素是一个提供多个来源的容器 到其包含的img 元素，以允许作者以声明方式 控制或提示用户代理要使用哪个图像资源 使用，基于屏幕像素密度，视口大小，图像格式， 和其他因素。

<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 ~ Tim Kadlec
• 4.8.2 The picture element~W3C
• picture definition~MDN
• picture browser support~caniuse.com
• Polyfill for the picture element~图片填充

Answer 2

我认为这里发生冲突的主要原因是您假设实施媒体查询是为了节省带宽。它们的实施是为了以不同的尺寸显示不同的东西，仅此而已。您选择以不同尺寸显示相同图像的事实只是您决定如何使用它们，而媒体查询只是忠实地履行他们一直承诺的事情：向用户展示您告诉它向用户展示的内容.

我建议评估这是否真的值得在时间和代码上进行投资（请记住，大多数用户不会调整窗口大小或旋转移动设备，而这样做的用户可能不会被闪存和重新加载）。如果你决定这样做，它不会只通过 CSS。您最好研究 JavaScript 方法来执行此操作，例如将类 loaded-large 添加到 body 标签 onload，然后为较小的图像编写 CSS 规则，仅在 body 标签没有 class='loaded-large' 时加载。

希望这会有所帮助。