为什么<picture>标签下载图像两次？

Question

我正在使用HTML中的图片元素：

<picture>
    <source media="(max-width: 375px)"
        srcset="http://mysite/-/media/Images/picture.ashx?mw=375">
    <source media="(max-width: 800px)"
        srcset="http://mysite/-/media/Images/picture.ashx?mw=800">
    <img src="http://mysite/-/media/Images/picture.ashx"
         alt="responsive image that doesn’t break your layout">
</picture>

我使用CMS来处理媒体，因此使用.ashx扩展名。我的CMS支持通过附加mw = X查询字符串来调用max-width来动态调整图像大小。我的默认图像是宽度为1280像素的.png。

这似乎在Chrome 46.x中运行良好。当我调整视口大小时，图像会适当缩小到各种大小。

我感到困惑的是，当我检查网络流量（同时使用chrome和fiddler）时，我看到我的图像被下载了两次。我已经使用chrome将我的视口设置为iPhone 6s并执行了＃34;空缓存和硬重载＆＃34;。我在小提琴手中看到的是picture.ashx？mw = 800已下载，然后是picture.ashx紧随其后。

Chrome网络流量的屏幕截图：

为什么我的浏览器会下载图像两次？

Answer 1

我发现了问题。在Chrome中使用设备模式时，图像会下载两次。如果我只是将浏览器窗口调整为较小的尺寸，则不会下载两次。我认为这只是设备视口中的一个错误。