Html 浏览器正在加载两个图像-一个用于srcset，一个用于src（Chrome 41等）

我正在开发的网页上使用srcset属性

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 1200w, 
    img/picture-374x226.jpg 992w, 
    img/picture-305x185.jpg 768w, 
    img/picture-707x428.jpg 300w" />

---

如果我检查页面加载了哪些资源，我会发现Chrome 41和使用polyfill的FF以及Safari 7总是加载图像两次——一次是完全分辨率，一次是srcset属性中相应的大小。我在这里做错了什么？

我有一个类似的问题，我发现如果

src

图像不是

srcset

图像中可用的图像，浏览器将加载

src

图像。解决方案是确保

src

图像url与

srcset

图像url之一匹配

顺便说一句——据我所知，图像url后面的

w

值应该与图像的宽度（大致）匹配。这使浏览器能够根据

大小

属性和设备像素密度最佳地确定要显示的图像。因此，您可能应该更改标记中的

w

值，并添加

size

属性（该属性允许您使用媒体查询和回退（即

（最小宽度：640px）600px、50vw

）让浏览器知道渲染图像的大小）。考虑下面的例子：

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 820w,
    img/picture-707x428.jpg 707w, 
    img/picture-374x226.jpg 374w, 
    img/picture-305x185.jpg 305w"
    sizes="100vw">

您能在Chrome中看到这种情况的地方提交一个测试用例吗？对于不支持的浏览器，“src”将在polyfill完成它的工作之前触发下载，但在Chrome中，这应该不会太晚。我对源代码使用了透明的gif，我发现了同样的问题。此外，我正在使用不同屏幕尺寸的图像的艺术方向，具有不同的宽度/高度关系，这使得问题更加严重，因为最初加载和显示的艺术方向错误，但甚至不适合布局。当然，只有在使用网络节流时才能看到效果。