我有这个网站。其中使用Stellar.js。因此，我有很多背景图像。它们必须很大才能用于大屏幕显示。所以他们保持友好。在移动设备上，特别是在3G上下载可能有点太多了。
我想知道是否有更好的方法，然后使用不同图像源的媒体查询作为背景图像。比如插上什么东西？有任何想法吗？真的不想以不同的格式扩展所有68。
答案 0 :(得分：3)
对于css / background-image您是否查看过css中的image-set属性？这是与html img元素srcset等效的css。缺点可能是浏览器兼容性（但对于移动设备，您应该涵盖http://caniuse.com/#feat=css-image-set）以及是否已将扩展语法添加到这些浏览器中。
示例用法：
background-image: -webkit-image-set(url('my-img-1x.jpg') 1x, url('my-img-2x.jpg') 2x);
但是，如果您可以在HTML img中使用实际的srcset元素，那么现在可以获得非常好的浏览器支持和扩展语法，以允许在不同屏幕大小的断点处更改图像http://caniuse.com/#search=srcset < / p>
srcset示例用法：
<img src="my-img-1x.jpg" srcset="my-img-1x.jpg 1x, my-img-2x.jpg 2x, my-img-wide.jpg 1920w" />
展望未来<picture>元素也开始获得浏览器支持，但可能与现在使用的主流采用相差甚远。