为 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');
    }
}

问题： 对于 480 像素以下的设备 - css 是否会先覆盖 class 然后 仅加载 被覆盖的图像？或者它会先 加载两个 图像，然后决定哪一个具有更高的优先级？

Answer 1

您正在使用 css @media 查询，该查询仅用于根据屏幕大小更改样式，不会影响任何加载。

所以这里如果你使用这个 css 那么两个图像都会先加载然后根据屏幕尺寸显示。

Answer 2

你可以试试这个

css:

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

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

Answer 3

当您使用 @media 时，只会加载适当的图像。如果分辨率超过 768px（例如），则只会加载一张图像。如果分辨率小于 768px，也只会加载一张图像。但是，如果您将 window 从 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="">

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

Overriding `background-image` with a smaller image for smaller devices in css, will save bandwidth or reduce loading time?

css

pageload

media-queries