响应式图像 srcset 不起作用答案

【问题标题】：responsive images srcset not working响应式图像 srcset 不起作用
【发布时间】：2015-04-23 09:24:36
【问题描述】：

我一直在尝试使用以下 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，我得到的只是最大的图像，调整浏览器的大小，清除缓存什么都不做。

我在某个地方读到了我必须填充的地方，所以我使用了图片填充插件，虽然 chrome 应该支持它.....仍然不起作用。

我为它整理了一个演示页面： http://www.darrencousins.com/lab/resp-img-srcset/

我做错了什么/没有得到什么？

非常感谢任何帮助。

【问题讨论】：

stackoverflow.com/questions/28365079/…
此处的关键要点：清除缓存/使用隐身！

标签： image responsive-design srcset

【解决方案1】：

你说得对。

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

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

Update 2022; 只需在调整大小后使用Ctrl + Shift + R 快捷键（Mac：Cmd + Shift + R），而不是清除缓存，这样浏览器将重新加载，并忽略当前选项卡的缓存直到完成（换句话说，完全重新加载而不丢失整个缓存）。

【讨论】：

这对我不起作用，即使我正在清除我的缓存！ ://
尝试 Chrome 的隐身模式以确保（如果您已经在使用它进行测试，请关闭所有窗口/选项卡并重新开始）。首先将窗口缩小，然后加载页面，顺序至关重要。它应该可以工作，也许可以尝试提供有关您的浏览器的信息。
我在使用 Chrome (48) 时遇到了问题，我尝试更改像素比例并且效果很好，请参阅下面的答案：stackoverflow.com/a/34222310/4063626 有人知道为什么会这样吗？
我发现让 Chrome 重试而不使用隐身模式的好方法是确保你打开了 devtools，右键单击刷新按钮，然后选择“清空缓存和硬重新加载”。
为了让它在 chrome 中工作，我不得不调整实际浏览器窗口的大小，而不是使用“响应”模式滑块

【解决方案2】：

当在 img 标签中使用时，srcset 属性让浏览器决定要加载哪个图像，如 TondaCZE 所述。如果你想强制浏览器在指定的视口加载图像，你想使用图片元素。

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>

【讨论】：

你是对的。唯一更正的是默认图像标签应该有<img src="small.jpg">而不是<img srcset="small.jpg">。
使用img 的sizes 属性应该适合强制浏览器在某些断点处使用特定图像。 developer.mozilla.org/en-US/docs/Learn/HTML/…
还值得注意的是，盲目地建议使用<picture> 并不理想，因为<picture> 与<img> 的语义不同。 cloudfour.com/thinks/dont-use-picture-most-of-the-time
当我使用这种方法时，我的图像甚至没有加载。也许需要更多关于<picture> 和<img> 标签之间区别的信息？
你是救世主。

【解决方案3】：

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

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

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

【讨论】：

在从 srcset 属性的宽度列表中选择之前，浏览器会先将 size 属性的值乘以设备的像素比。
“将设备像素比更改为 1 似乎加载了正确的图像”游戏改变者 (Y)
这使我的 srcset 开始工作（启用“在 devtools 打开时禁用缓存”，并点击 f5-refresh 重新加载页面），在 Chromium 94 中。在移动视图中时，该设置被稍微隐藏了您设置尺寸、方向等的移动工具栏（主页区域，而不是开发工具）有一个带有“添加设备像素比”的三点菜单。点击它，你会得到 DPR 下拉菜单，它显示默认值为 2。我认为这与上面的几个答案相关。

【解决方案4】：

我们在项目中第一次使用 srcsets 时遇到了同样的问题。在投入了一些时间之后，我们的一名团队成员终于能够解决这个问题。您的代码不起作用的原因是因为 srcset 和 sizes 属性中的大小不匹配。您必须在 srcset 中提供两倍的宽度，以便浏览器能够将其与尺寸的宽度相匹配。例如，

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

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

确保您以隐身方式打开它（因为一旦浏览器加载更高分辨率的图像，它就不会返回低分辨率的图像）并首先在小于 1920 像素的浏览器中运行代码以查看更小的分辨率图像（日落）和一旦开始增加浏览器大小，您将能够看到更大的图像（花）。

【讨论】：

FWIW，你的答案是我在网上看到的第一个答案，它显示了 srcSet（而不是 srcset）的驼峰式案例，在我的案例中终于让它工作了。谢谢！
很确定这不是一回事，因为实际规范说它都更低......
它在谷歌浏览器中不起作用。尝试运行你的url，在调整屏幕大小几次后，你将无法看到带有日落的图片

【解决方案5】：

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

Google Chrome version 40 srcset attribute problems

检查了您在 IE8 和 Firefoxv49 上的页面，一切都像魅力一样！

我观察到的另一件事是，虽然 chrome 不会下载其他图像，但它会很好地调整下载的图像的大小。所以，从某种意义上说，如果页面上只有这个，我们仍然处于更好的状态：

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

【讨论】：

【解决方案6】：

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

打开 DevTools (F12)
转到设置
向下滚动到网络
检查禁用缓存（在 DevTools 打开时）

【讨论】：

【解决方案7】：

这是基于device pixel ratio (DPR) 的工作。例如，假设我们有一个视口宽度为 412 像素且 DPR 为 2.6 的设备。所以浏览器会选择一个接近803 px (412 _ .75 _ 2.6)的图片。

如果您只想根据视口选择图像，请尝试使用media 属性，如下所示：

<amp-img
  alt="grey cat"
  media="(max-width: 469px)"
  width="226"
  height="340"
  src="/static/inline-examples/images/cat-small.jpg">
</amp-img>
<amp-img
  alt="grey cat"
  media="(min-width: 470px) and (max-width: 669px)"
  width="450"
  height="340"
  src="/static/inline-examples/images/cat-medium.jpg">
</amp-img>
<amp-img
  alt="grey cat"
  media="(min-width: 670px)"
  width="650"
  height="340"
  src="/static/inline-examples/images/cat-large.jpg">
</amp-img>

【讨论】：

【解决方案8】：

您是否尝试将 DPR 更改为 1.0？您可以在响应模式下的 Chrome DevTools 顶部栏中找到它（尝试 380px 宽度）。更改 DPR 后，右键单击重新加载页面图标，然后选择“清空缓存和硬重新加载”，最好在隐身模式下执行此操作。浏览器应该预加载一张 400w 的图片。

【讨论】：

【解决方案9】：

就我而言，问题在于 webp 图像名称中的空格。我重命名了文件以删除空格字符，它起作用了！

<picture>
    <source srcset="img/landing-small.webp" type="image/webp">
    <source srcset="img/landing - small.jpg" type="image/jpeg">
    <img src="img/landing - small.jpg" alt=""/>
</picture>

【讨论】：

【解决方案10】：

打开您的开发工具，然后转到网络选项卡并禁用捕获。仅此而已。

【讨论】：

这个答案并没有对@BadHorsie 11 个月前发布的内容添加任何内容！
禁用缓存对可能已经缓存了较大图像的实际网站用户没有帮助。