在响应式设计网站中使用不同尺寸背景图像的最有效方法是什么？

Question

我正在构建一个响应式网站。这个网站需要很多背景图片（矢量和栅格格式）。

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

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

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

Answer 1

好吧，这里的另一篇帖子讨论了如果浏览器下载了未使用的css图像url('');，即使没有元素与规则匹配。它已经过测试并确定，在所有主流浏览器上，图像不会被下载，除非某个元素实际上与选择器匹配。

帖子：Are unused CSS images downloaded?

这意味着，如果定义媒体查询你的风格，里面只有符合特定的视口将下载的规则图像。

在以下示例中，如果您使用的设备宽度不超过480像素，请不要担心，因为large.jpg不会被下载。

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

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

只是提醒的是，这是留给了浏览器的行为，这样他们就可以随时他们想改变。