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

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在此设置中下载.如果我调整屏幕大小(低于800px),浏览器会下载并呈现-medium.jpg,等等.

我怎么能阻止这个？

Answer 1

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

但您是一名 Web 开发人员，正在调整浏览器的大小以进行测试。实际用户通常不会这样做。用户只需登陆您的网站即可在一种屏幕尺寸上开展业务。

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

请注意，屏幕宽度大于 800 像素的用户可能会获得所有三个图像。（匹配的窗口min-width: 800px也匹配min-width: 500px。）

根据对媒体查询和资产下载结果的审查，浏览器在图像下载方面的行为有所不同。特别是，请参阅测试 #4。

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

4.8.2picture 元素

该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则应用该元素。这是一个有用的后备方案，因为pictureInternet Explorer 不支持。

参考：

• 媒体查询规范~ W3C
• 媒体查询和资源下载结果~ Tim Kadlec
• 4.8.2picture元素~ W3C
• picture定义~MDN
• picture浏览器支持~ caniuse.com
• picture元素的 Polyfill ~ Picturefill

Answer 2

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

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

希望这可以帮助。