最新的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意味着,当一个高密度的资源是在缓存中可用(例如,在您的例子中,最大的图像),这是会得到回升的资源,因为有一个在重新下载一个不同是没有意义的,分辨率较低的一个.

如果你真的想测试哪些资源在较小的设备上下载(不是你应该依赖于哪个资源被选中,因为srcset不是那个),你可以在实际设备上进行测试,或者打开一个隐身会话,调整大小浏览器(或模拟设备),然后加载测试页.

当你可以看到加载了哪个图像时,我还创建了一个稍微更清晰的测试用例.

另外:从你的例子看,你看起来在srcset中使用不同比例的图像.这不是您应该使用srcset的,而是使用<picture>,它提供了关于加载哪个资源的保证,因此您的布局不会因为加载了错误的图像而中断.

当你使用时srcset,没有"错误"的图像.浏览器可以自由选择它认为合适的浏览器(因为它在缓存中,连接性低,用户偏好等等).