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

【问题标题】：Browser is loading two images - one for srcset, one for src (Chrome 41 et al)浏览器正在加载两张图片 - 一张用于 srcset，一张用于 src（Chrome 41 等）
【发布时间】：2016-02-16 22:08:05
【问题描述】：

我正在开发的网页上使用 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 和 FF 使用 polyfill 以及 Safari 7 总是加载图像两次——一次是全分辨率，一次是来自 srcset 属性的相应大小.我在这里做错了什么？

【问题讨论】：

您能否提交一个测试用例，在 Chrome 中看到这种情况发生？对于不支持的浏览器，'src' 将在 polyfill 执行其操作之前触发下载，但在 Chrome 中不应该是这种情况
有点晚了。我使用透明 gif 作为源 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
我观察到了同样的问题。此外，我正在使用具有不同宽度/高度关系的不同屏幕尺寸的图像艺术方向，这使问题更加严重，因为最初加载和显示了错误的艺术方向，但甚至不适合布局。当然效果只有在使用网络节流时才能看到。

标签： html google-chrome firefox safari srcset

【解决方案1】：

我遇到了类似的问题，我发现如果src 图像不是srcset 图像中可用的图像之一，浏览器无论如何都会加载src 图像。解决方案是确保src 图像网址与srcset 图像网址之一匹配。

顺便说一句 - 据我了解，图像 url 后面的 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">

【讨论】：