更好的背景图像性能
Better performance for background images
我有这个网站。其中使用 Stellar.js。因此我有很多背景图片。它们必须很大才能显示大屏幕。所以他们保持友善。在移动设备上下载可能有点多，尤其是在 3G 上。
我想知道是否有比使用具有不同图像源的媒体查询作为背景图像更好的方法。比如插件什么的？有任何想法吗？真的不想以不同的格式缩放所有 68。
对于css/background-image你看过css中的image-set属性了吗？它是 css 等同于 html img 元素 srcset。缺点可能是浏览器兼容性（但是对于移动设备，您应该被涵盖 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
srcset 示例用法：
<img src="my-img-1x.jpg" srcset="my-img-1x.jpg 1x, my-img-2x.jpg 2x, my-img-wide.jpg 1920w" />
期待 <picture> 元素也开始获得浏览器支持，但现在可能离主流采用还有一段距离。
我有这个网站。其中使用 Stellar.js。因此我有很多背景图片。它们必须很大才能显示大屏幕。所以他们保持友善。在移动设备上下载可能有点多，尤其是在 3G 上。
我想知道是否有比使用具有不同图像源的媒体查询作为背景图像更好的方法。比如插件什么的？有任何想法吗？真的不想以不同的格式缩放所有 68。
对于css/background-image你看过css中的image-set属性了吗？它是 css 等同于 html img 元素 srcset。缺点可能是浏览器兼容性（但是对于移动设备，您应该被涵盖 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
srcset 示例用法：
<img src="my-img-1x.jpg" srcset="my-img-1x.jpg 1x, my-img-2x.jpg 2x, my-img-wide.jpg 1920w" />
期待 <picture> 元素也开始获得浏览器支持，但现在可能离主流采用还有一段距离。