浏览器正在加载两张图片-一幅用于srcset，一幅用于src（Chrome 41等）

Question

我正在开发的网页上使用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属性获得的相应大小。我在这里做错了什么？

Answer 1

我有一个类似的问题，我发现如果src图像不是图像中可用的srcset图像之一，则浏览器将加载该src图像。解决方案是确保src图像URL与图像URL之一匹配srcset。

顺便说一句-据我了解，规范中w，图片网址后面的值应（大致）匹配图片的宽度。这使浏览器可以根据sizes属性和设备像素密度来最好地确定要显示的图像。因此，您可能应该更改w标记中的值并添加sizes属性（该属性使您可以使用媒体查询和后备广告让浏览器知道渲染的图像大小(min-width: 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">