google-chrome - 最新的 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

一个 change进入 Chrome 40 意味着当缓存中有高密度资源可用时(例如在您的示例中可能是最大的图像)，这就是将被选择的资源，因为重新下载不同的、较低的资源毫无意义-决议一。

如果你真的想测试哪些资源在较小的设备上被下载(不是说你应该依赖哪些资源被选择，因为 srcset 不是关于那个)，你可以在实际设备上测试，或者打开一个隐身 session ，调整浏览器的大小(或模拟设备)，然后才加载测试页面。

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

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

当您使用 srcset没有“错误”的图像。浏览器可以自由选择它认为合适的任何一个(因为它在缓存中，连接性低，用户偏好这样说等)。