html - 为什么 srcset 导致图像下载多次？

Question

我有以下图像标记，使用 srcset 和 sizes 属性插入响应图像:

<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="">

据我所知，我只是告诉浏览器我可用的所有图像尺寸，它应该只根据视口(viewport)尺寸等下载最合理的尺寸。如果我将浏览器窗口 (Chrome) 调整为较小的尺寸并刷新页面，“网络”选项卡告诉我它正在下载我期望的图像(在本例中为 800 像素)，以及最大的图像(我假设来自 src 属性)。

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

Answer 1

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

如果你有一个 <meta name=viewport content="width=device-width">在您的 HTML 中标记 bug应该在 Chrome 46 中修复。

如果你不这样做，那还是一个开放的 bug ，我希望尽快解决。