谷歌浏览器 40 版 srcset 属性问题答案

【问题标题】：Google Chrome version 40 srcset attribute problems谷歌浏览器 40 版 srcset 属性问题
【发布时间】：2015-03-25 04:54:59
【问题描述】：

我发现 Chrome 40.0.2214.91 中的 img 标签（响应式图像）上的 srcset 属性存在很多不一致

在我更新到 Chrome v40 之前（我在 ~39 上），srcset 属性工作正常，并且会在浏览器调整大小时交换图像。现在，有时，如果我将浏览器设置为所需的宽度，然后刷新页面，则会显示较小版本的图像。其他时候它无论如何都不起作用。

我拥有的图片标签：

<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">

我还在另一个环境中使用非 Placehold.it 图像进行测试，并使用 Picturefill.js http://scottjehl.github.io/picturefill/

我在 FF 或 Safari（都使用图片填充）中没有任何问题。

iOS Chrome 也有类似的问题。

我的语法错了吗？有什么我不知道的事情吗？

【问题讨论】：

【解决方案1】：

这是一项功能，而不是错误。 Chrome 不会切换大小，因为 Chrome 已经在缓存中有更大的图像，因此无需下载相同图像的新数据。

如果您想使用不同的图像或不同裁剪的相同图像，请使用图片元素。

响应式图片在技术上可以区分为两种类型。

带有源描述符的srcset（让浏览器根据屏幕大小/分辨率、带宽……选择正确的图像）：
- 密度描述符 (x)（针对静态图像尺寸，Retina 与正常分辨率）
- 宽度描述符 (w) 和相应的尺寸属性（用于灵活、响应/自适应的图像（自动还包括 Retina 优化）
以及图片元素及其 source[media] 子元素（让作者可以控制浏览器应根据特定媒体查询选择什么 srcset）

所以img[srcset] 用于分辨率切换，picture 用于对您的设计做出反应的不同图像

【讨论】：

很有趣，那么您将如何测试它是否有效？只是清除缓存？
描述得很好。在使用 srcset 属性时找出浏览器之间的显示差异非常有用的信息。谢谢。
我一直在努力想弄清楚为什么即使 Chrome 报告了 devicePixelRatio === 1 它仍然坚持加载 2x 图像。并且想知道谷歌搜索怎么会一无所获——肯定有人注意到了！终于遇到了这个-谢谢。清除了缓存，我看到了我应该做的。
“所以 img[srcset] 用于分辨率切换，而图片用于对您的设计做出反应的不同图像” - EPIC。
只是想补充一点，chrome dev-tools中的“禁用缓存”选项在这里没有区别，如果缓存中有更高的分辨率版本，chrome会接受它，无论dev-tools是否打开与否