HTML 5 srcset属性和CSS imageset属性似乎是对Web开发的极好改进。除了为同一图像指定三个或四个不同的图像URL但具有不同尺寸的权利之外，浏览器完成的视网膜优化和移动优化都不再适用于我吗？错误！我很困惑。
我的想法非常简单：浏览器应该始终选择最小的图像版本。但是没有扩展它。如果需要按比例放大，则应选择下一个更大的版本，依此类推。
使用srcset指定图像有两种不同的可能性（更多信息请参见：http://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-srcset）：
1）基于设备像素比率的选择
用户代理可以选择任何给定的资源，具体取决于 用户屏幕的像素密度，缩放级别以及可能的其他因素 例如用户的网络状况。
srcset="150-marie-lloyd.jpg 1.5x, 200-marie-lloyd.jpg 2x"
好的。 Retina-Screens背后的浏览器很可能会采用2x版本，而正常屏幕背后的浏览器将采用正常尺寸。 *但是，如果没有下载至少其中一个图片，浏览器不知道这些图片实际有多大？
因此 - 如果未在img标签的width / height属性中指定尺寸 - 这对响应式设计有何用处？
2）基于视口的选择
这就是为什么我决定使用基于视口的选择。它描述如下：
用户代理将计算每个的有效像素密度 来自指定的w描述符的图像和指定的渲染大小 在sizes属性中。然后它可以选择任何给定的资源 取决于用户屏幕的像素密度，缩放级别和 可能还有其他因素，例如用户的网络状况。
听起来不错。请看以下示例：
<img srcset="512.jpg 512w, 1024.jpg 1024w, 2048.jpg 2048w" />
这就是我的假设：
为什么我必须使用sizes属性复杂化呢？此外，我已经使用Chrome检查了它 - 它总是选择最大的图像，即使较小的图像也适合。为什么？他们真的需要，例如带宽在帐户？
在许多情况下，我想指定背景图像而不是img标签，而srcset的CSS兄弟是imageset。但是，imageset仅支持“基于设备 - 像素比率的选择”。例如：
background-image: image-set(url(256.jpg) 1x,url(512.jpg) 2x);
虽然不支持：
background-image: image-set(url(256.jpg) 256w,url(512.jpg) 512w);
也许这与“尺寸”属性的问题有某种关系？
所以我的问题是：我应该如何正确使用srcset用于上述用例？我应该选择哪种选择？并且（为什么）我应该使用这个尺寸属性吗？