Css 在一个响应性强的设计网站中，有不同大小的背景图片最有效的方法是什么？

我正在建立一个快速响应的网站。这个网站需要大量的背景图像（矢量和光栅格式）

我想优化加载速度，但不降低图片质量的网站

我的理解是，对于同一张图片，我应该有不同的版本，以便对于小窗口设备，用户自动下载正确的最小文件大小

---

我的问题是：解决这个问题的最好办法是什么？我需要使用媒体查询吗？如何使用它们，使不同的浏览器实际上不会下载不必要的数据？

好吧，如果一个未使用的css图像

url（“”），这里的另一篇文章也会讨论这个问题。经过测试，在所有主流浏览器上，图像都不会被下载，除非元素与选择器匹配

职位：

这意味着，如果为样式定义媒体查询，则仅下载规则中与特定视口匹配的图像

@media (max-width: 480px) {
    #myDiv {
        background-image: url('small.jpg');
    }
}

@media (min-width: 481px) {
    #myDiv {
        background-image: url('large.jpg');
    }
}

在下面的示例中，如果您所在的设备的宽度为480px或更小，请不要担心，因为不会下载
large.jpg

@media (max-width: 480px) {
    #myDiv {
        background-image: url('small.jpg');
    }
}

@media (min-width: 481px) {
    #myDiv {
        background-image: url('large.jpg');
    }
}

只是提醒一下，这是由浏览器决定的行为，因此他们可以随时更改。
这就是您想要的吗？演示-