最新的 Chrome/Opera 是否将 srcset 弄错了? [英] Do latest Chrome / Opera get srcset wrong?

问题描述

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

I'm working on a page that has the following markup:

<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).

and it seems that in the latest Chrome & Opera, they ignore whatever the screen size is and just output whichever file is listed last (so the 1234x400.jpg in my case).

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

Using Picturefill, Firefox and Safari both show the correct image on smaller screens.

在我今天的测试过程中，我启动了有一段时间没有打开过的 Opera.当它第一次启动时，它是 v25，它会在较小的屏幕尺寸上显示正确的图像.

During my testing today I launched Opera which I hadn't opened in a while. When it first launched it was at v25 and it would show the correct image at smaller screen sizes.

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

Then I noticed that an update had been downloaded, so I ran it, got updated to v27, and then Opera was displaying the same problem as latest Chrome.

所以最近 Blink 似乎发生了一些变化.

So it seems that something has changed in Blink recently.

其他人可以确认这一点还是我做错了?

Can anyone else confirm this or am I just doing it wrong?

Codepen 来说明我的意思.

推荐答案

你拿着测试错了 :D

Chrome 40 中的更改意味着当缓存中有高密度资源可用时(例如最大的可能图像)，这是将被选择的资源，因为没有必要重新下载不同的低分辨率资源.

A change that went into Chrome 40 means that when a high density resource is available in the cache (e.g. the largest possible image in your example), this is the resource that would get picked, since there's no point in re-downloading a different, lower-resolution one.

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

If you really want to test which resource gets download in smaller devices (not that you should rely on which resource gets picked, because srcset is not about that), you can either test on an actual device, or alternatively, open an incognito session, resize the browser (or emulate a device) and only then load the test page.

我还创建了一个稍微清晰的测试用例，您可以看到加载了哪个图像.

I've also created a slightly clearer test case out of yours, when you can see which image was loaded.

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

Also: from your example it looks like you are using images with different proportions inside srcset. That's not something you should use srcset for, but rather use <picture>, that provides guaranties regarding which resource is loaded, so your layout won't break because the wrong image loaded.

当您使用 srcset 时，没有错误"的图像.浏览器可以自由选择它认为合适的任何一个(因为它在缓存中、连接性低、用户偏好如此等等).

When you're using srcset there is no "wrong" image. The browser is free to pick whichever one it sees fit (because its in the cache, connectivity is low, user preferences say so, etc).

这篇关于最新的 Chrome/Opera 是否将 srcset 弄错了?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！