用css中较小设备的较小图像覆盖“背景图像”将节省带宽或减少加载时间

Question

假设我做到了：

@media only screen and (min-width: 1366px)
    .someBg {
         background-image: url('someBg_BIG.jpg');
    }
}

现在覆盖背景图像如下：

@media only screen and (max-width: 480px)
    .someBg {
         background-image: url('someBg_SMALL.jpg');
    }
}

问题：对于480px以下的设备-css会首先覆盖类，然后只加载覆盖的图像吗？还是先加载两个图像，然后决定哪个图像的优先级更高？

Answer 1

使用@media时，只会加载适当的图像。如果分辨率大于768px（例如），则只加载一个图像。如果分辨率小于768px，则也只加载一个图像。但若将窗口从800px调整为500px，则会加载两个图像。您可以在Chrome检查器中进行检查。

img {
  width: 400px;
  content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}
@media screen and (max-width: 768px) {
  img {
    content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
  }
}

<img alt="">

Answer 2

您使用的是css @media查询，它只用于根据屏幕大小更改样式，不会影响加载任何内容。

所以在这里，如果你使用这个css，那么这两个图像将首先加载，然后根据屏幕大小显示。

Answer 3

你可以试试这个

css：

.somebg{
	max-width: 1400px;
	padding: 0;
	margin: 0;
}
.somebg img{
    width: 100%;
}

以及在html中：<div class="somebg"><img src="URL HERE"></div>