css - 在 css 中为较小的设备用较小的图像覆盖 `background-image` 会节省带宽或减少加载时间吗？

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 会先覆盖类然后仅加载被覆盖的图像吗？或者它会先加载图像，然后决定哪一个具有更高的优先级？

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="">