更好的背景图片性能

Question

我有这个网站。其中使用Stellar.js。因此，我有很多背景图片。他们必须大屏幕显示。所以他们保持不错。特别是在3G上，下载移动版可能有点多。

我想知道是否没有更好的方法，然后使用媒体查询与不同的图像源作为背景图像。比如插件什么的？有任何想法吗？真的不想以不同的格式来扩展所有的68。

Answer 1

对于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 srcset本身使用实际img元素现在有相当不错的浏览器的支持，并扩大语法允许在不同的屏幕尺寸变更图像断点http://caniuse.com/#search=srcset

srcset用法示例：

<img src="my-img-1x.jpg" srcset="my-img-1x.jpg 1x, my-img-2x.jpg 2x, my-img-wide.jpg 1920w" /> 

向往<picture>元素也开始获得浏览器支持，但可能距离现在使用的主流采用有点远。