响应图像srcset不起作用

71

我一直在尝试使用以下HTML实现新的srcset方法来响应图像

        <img class="swapImages"
        srcset="assets/images/content/large.jpg 1200w,
                assets/images/content/medium.jpg 800w,
                assets/images/content/small.jpg 400w"
        sizes="100vw"
        src="assets/images/content/small.jpg"
        alt="responsive image">

我使用的是chrome 40，我得到的只是最大的图像，调整了浏览器的大小，清除缓存没有任何作用。

我读了一些我必须进行polyfill的地方，所以我使用了picturefill插件，尽管chrome应该支持它。

我为此放了一个演示页：http : //www.darrencousins.com/lab/resp-img-srcset/

我在做什么错/不明白？

任何帮助深表感谢。

image  responsive-design  srcset 
— sygad1
source
2
— 亚历山大·法卡斯
2
关键提示：清除缓存/使用隐身模式！
— SRack，

Answers:

94

你说得对。

事实是，一旦您的浏览器具有更高分辨率的图片（在缓存中加载），就没有必要下载质量较低的图片，即使您缩小窗口大小（这样做的目的是为了节省流量）。

因此，如果要进行测试，只需缩小窗口并然后加载页面（在清除缓存后/或使用隐身模式）。您将获得手机或平板电脑版本。然后，通过扩大窗口，您将在某个时候看到浏览器切换到更高分辨率的图片。

— 通达
source
25
即使我正在清除缓存，这对我也不起作用！：/
— J86
2
请确保尝试使用Chrome的隐身模式（如果您已经在使用它进行测试，请关闭所有窗口/标签并重新开始）。首先使窗口变小，然后加载页面，顺序至关重要。它应该工作，也许尝试提供有关您的浏览器的信息。
— TondaCZE 2015年
2
我在Chrome（48）上遇到问题，并且尝试更改像素比率并且它起作用了，请参阅下面的答案：stackoverflow.com/a/34222310/4063626有谁知道为什么会这样？
— MeV 2015年
3
我发现，不使用Incognito即可重试Chrome的一种好方法是确保已打开devtools，右键单击刷新按钮，然后选择“清空缓存并重新加载”。
— Sam Rueby
8
为了在chrome中正常工作，我不得不调整实际浏览器窗口的大小，而不是使用“响应式”模式滑块
— Nadia
49

当在img标签中使用时，srcset属性会将决定权交给浏览器，如TondaCZE所提到的那样加载图像。如果要强制浏览器在指定视口加载图像，则要使用picture元素。

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>
— 迈克
source
10
你是对的。只有校正是默认图片标签应具有<img src="small.jpg">而不是<img srcset="small.jpg">。
— WayBehind '16
1
使用img的sizes属性应该适合于强制浏览器在某些断点处使用特定图像。developer.mozilla.org/en-US/docs/Learn/HTML/...
— 山姆Rueby
8
还值得注意的是，盲目建议使用<picture>不是理想的选择，因为<picture>它与的语义不同<img>。cloudfour.com/thinks/dont-use-picture-of-the-time
— Sam Rueby
使用这种方法时，我的图像甚至无法加载。也许需要更多有关<picture>和<img>标签之间区别的信息？
— JCutting8年9
1
你是救世主。
— sai
14

我刚刚注意到，您的演示页面（http://www.darrencousins.com/lab/resp-img-srcset/）从未在Google上显示移动版本（即使在调整浏览器大小或使用DevTools-设备模式时） Chrome（版本48）。

将设备像素比率更改为1似乎可以加载正确的图像。

在此处输入图片说明

在此处输入图片说明

我不知道为什么，我想知道w描述符是否考虑了设备像素比率

— 病毒
source
4
在从srcset属性的宽度列表中进行选择之前，浏览器将把sizes属性的值乘以设备的像素比率。
— dsluis
“将设备像素比率更改为1似乎会加载正确的图像”游戏改变者（Y）
— 乔诺
5

我猜您是在chrome浏览器上进行测试的，它在那里不起作用的唯一原因是因为它具有chrome功能。请参阅下面的堆栈溢出线程（它也适用于最新版本的chrome v54）：

Google Chrome 40版本srcset属性问题

在IE8和Firefoxv49上检查了您的页面，一切正常！

我观察到的另一件事是，尽管chrome不会下载其他图片，但它可以很好地调整下载图片的大小。因此，从某种程度上来说，如果页面上仅显示以下内容，我们将处于更好的状态：

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">

— 卡山
source
2

对于使用Chrome DevTools侧边栏的任何人，您可以告诉Chrome在打开DevTools时禁用缓存。如果更改视口并刷新将一直提供最大（缓存的）图像，则将提供正确的响应图像。

  1. 打开DevTools（F12）
  2. 转到设置
  3. 向下滚动到网络
  4. 选中禁用缓存（在打开DevTools时）
— BadHorie
source
1

在我们的项目中，第一次使用srcsets时，我们面临相同的问题。经过一段时间的投入，我们的团队成员之一终于能够解决该问题。您的代码无法正常工作的原因是因为srcset和sizes属性中的大小不匹配。您必须在srcset中提供两倍的宽度，浏览器才能使其与尺寸的宽度匹配。例如，

 <img
        srcSet="image1920w.png 1920w,image720w.png 720w"
        sizes="(min-width: 960px) 960px,
        360px"
        src="www.image1920w.com"
         alt="Sample"
     />

这是一个示例工作代码供您试用。

确保以隐身方式打开它（因为一旦浏览器加载了高分辨率图像，它就不会返回较低分辨率的图像），并首先在小于1920px的浏览器中运行代码以查看较小分辨率的图像（日落），然后再启动增加浏览器的大小，您将可以看到较大的图像（花朵）。

— 阿比拉莎（Abhilasha Arvind Gadekar）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.