image - CSS 图像集/背景图像。 img srcset 的替代方案？有人用这个吗？

Question

就像 html 标签的“srcset”一样，有一个名为“image-set”的 CSS background-image 属性。

W3C 信息:https://drafts.csswg.org/css-images-3/#funcdef-image-set

目前兼容 Chrome、Safari、Opera 和 Android 浏览器。目前不兼容 FireFox 或 IE/Edge 浏览器。它似乎也在为 Microsoft 的 Edge 浏览器开发。 http://caniuse.com/#feat=css-image-set

这里是一个实现/测试的例子:cloudfour.com/examples/image-set/

对于普通屏幕和视网膜屏幕，它似乎只接受通用 (x) 分辨率 dpi。

<image-set-option> = [ <image> | <string> ] <resolution>

background-image: image-set( "foo.png" 1x,
                             "foo-2x.png" 2x,
                             "foo-print.png" 600dpi );

除此之外，我找不到任何相关文档。

我的问题是:

有人用过吗？

这能否用于优化页面加载速度(例如，基于屏幕宽度的不同版本，例如 320 像素宽度、640 像素宽度、1024 像素宽度等)？

(我知道@media screen 和 (max-width)，请不要提及这个。)

Answer 1

这是图像优化的一部分，因为浏览器将使用它需要的图像而不是缩小大图像，因此将改善页面加载，因为分辨率较低的图像尺寸较小，因此加载速度更快。

充分利用 picturefill.. 这是一个很好的资源..