最新的 Chrome / Opera 是否获取 srcset 错误？

Question

我正在处理具有以下标记的页面：

<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
       /banner_home.600x400.jpg 480w,
       /banner_home.728x242.jpg 768w,
       /banner_home.920x306.jpg 960w,
       /banner_home.1234x400.jpg 1280w">

而且在最新的 Chrome 和 Opera 中，它们似乎忽略了屏幕尺寸，只输出最后列出的文件（因此 1234x400.jpg 在我的例子中）。

使用 Picturefill，Firefox 和 Safari 都可以在较小的屏幕上显示正确的图像。

在今天的测试中，我启动了好久没打开的 Opera。当它首次推出时是 v25，它会在较小的屏幕尺寸下显示正确的图像。

然后我注意到已经下载了一个更新，所以我运行它更新到 v27，然后 Opera 显示与最新 Chrome.

相同的问题

所以最近Blink好像有些变化了。

任何人都可以证实这一点，还是我做错了？

Codepen 来说明我的意思。

Answer 1

你持有测试错误:D

进入 Chrome 40 的 change 意味着当缓存中有高密度资源可用时（例如，您示例中的最大可能图像），这就是将获得的资源选择，因为没有必要重新下载一个不同的、分辨率较低的文件。

如果您真的想测试在较小的设备上下载了哪些资源（并不是说您应该依赖于选择了哪些资源，因为 srcset 与此无关），您可以在实际设备上进行测试，或者打开隐身会话，调整浏览器大小（或模拟设备），然后才加载测试页面。

我还根据你的创建了一个 slightly clearer test case，你可以看到加载了哪个图像。

另外：从您的示例来看，您似乎在 srcset 中使用了不同比例的图像。这不是你应该使用 srcset 的东西，而是使用 <picture>，它提供关于加载哪个资源的保证，所以你的布局不会因为加载错误的图像而中断。

当您使用 srcset 时，没有 "wrong" 图片。浏览器可以自由选择它认为合适的一个（因为它在缓存中，连接性低，用户偏好如此，等等）。

Answer 2

如果将其粘贴到控制台中，您将看到正在浏览器中呈现的图像源。

console.log(jQuery('.your-image-class img').prop('currentSrc'));

最新的 Chrome / Opera 是否获取 srcset 错误？

Do latest Chrome / Opera get srcset wrong?

opera

google-chrome

responsive-design

srcset