Html 为什么srcset会导致图像下载多次？

使用

srcset

和

size

属性插入响应图像，我有以下图像标签：

<img srcset="/designed/logo-abihaus-1600x500.png 1600w,
             /designed/logo-abihaus-1200x375.png 1200w,
             /designed/logo-abihaus-960x300.png 960w,
             /designed/logo-abihaus-800x250.png 800w,
             /designed/logo-abihaus-480x150.png 480w"
        src="/designed/logo-abihaus-1600x500.png"
        sizes="100vw" alt="">

据我所知，我只是告诉浏览器我所有可用的图像大小，它应该只下载基于视口大小的最合理的大小，等等。如果我将浏览器窗口（Chrome）调整为较小并刷新页面，则网络选项卡告诉我，它将下载我期望的图像（在本例中为800px），加上最大的图像（我从

src

属性中假设）

---

我在使用picturefill.js和不使用picturefill.js的情况下都试过，我在OS X 10.10.5上使用了Chrome 45，所以我认为这不是浏览器兼容性问题。我的语法是否有问题，或者我只是误解了srcset？

这是Blink渲染引擎中的浏览器错误

如果您的HTML中有一个

标记，则应在Chrome 46中修复该标记

---

如果您不知道，这仍然是一个悬而未决的问题，我希望很快解决。

@海怪请参考此@Webruster，这是链接文章的第一个示例：“元素的图像候选字符串不得与同一元素的另一图像候选字符串的像素密度描述符值具有相同的像素密度描述符值。“不能在FF上重新编程，也不能在Chrome 45 OsX 10.9上重新编程是的，我理解这一点，但你能看到这一点吗

，正如你所看到的，图片元素中有一个源标记，以及一个正常的img标记。正如我们在srcset中看到的src一样，img是一个后备方案。在source标记中，我们有一个类似于媒体查询的属性，以及一个srcset属性，该属性包含与前面相同的图像源和像素密度参数。这似乎是一个很好的干净的方式来普及响应图像；我们通常熟悉语法，所以应该很容易采用。

。这一点对您的问题有意义吗>我已经准备好了

，所以我想我只需要等到Chrome 46。等待时间应该不会太长。根据Chrome的发布时间表，我认为Chrome 46应该在下周左右达到稳定状态（除非发布中存在其他重大问题），您能否验证您所看到的问题在Chrome的beta版中不再存在？是的，看起来只有正确的图像正在下载，正如预期的那样。好消息！