最新的Chrome / Opera获取srcset错误？ [英] Do latest Chrome / Opera get srcset wrong?

问题描述

 < 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&歌剧，他们忽略任何屏幕大小，只是输出无论哪个文件最后列出（所以在我的情况下，1234x400.jpg）。

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

在今天测试期间，我推出了Opera，这是我一段时间未打开的。当它第一次启动时，它是在第25版，它会在较小的屏幕尺寸下显示正确的图像。

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

>

因此，Blink最近似乎发生了一些变化。

其他人可以证实这一点，或者我只是做错了？

Codepen 来说明我的意思。

解决方案

您持有测试错误：D

进入Chrome 40的更改意味着当缓存中有高密度资源可用时（例如尽可能大图像在你的例子中），这是将被选中的资源，因为没有重新下载一个不同的，较低分辨率的资源。

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

我还创建了一个稍微清晰一点的测试用例，当你看到哪个图像被加载了。

另外：从你的例子看来，你正在使用不同的图像比例在srcset内。这不是你应该使用 srcset ，而是使用< picture> ，它提供了关于哪些资源是加载，所以你的布局不会因为加载错误的图像而中断。

当你使用 srcset 时是没有错误的形象。浏览器可以自由选择它认为合适的任何一个（因为它在缓存中，连接性低，用户偏好等等）。

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">

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

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

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.

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.

So it seems that something has changed in Blink recently.

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

Codepen to illustrate what I mean.

解决方案

You're holding testing it wrong :D

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.

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.

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.

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屋！