Image 响应图像集不工作

我一直在尝试使用以下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">

我用的是Chrome40，我得到的只是最大的图像，调整浏览器的大小，清除缓存什么都不做

我在某个地方读到我必须填充的内容，所以我使用了picturefill插件，尽管chrome应该支持它……但仍然不起作用

我为它准备了一个演示页面：

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

非常感谢您的帮助。

您说得对

问题是，一旦你的浏览器有了更高分辨率的图片（在缓存中加载），它就没有必要下载低质量的图片，即使你把窗口缩小了（这是为了节省流量）

---

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

当在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>

---

我刚刚注意到，您的演示页面（）从未在Google Chrome（48版）上显示移动版本（即使在调整浏览器大小或使用DevTools-设备模式时）

---

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

---

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

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

在IE8和Firefoxv49上查看了您的页面，一切都很顺利

我观察到的另一件事是，尽管chrome不下载其他图像，但它可以很好地调整下载的图像的大小。因此，在某种程度上，我们的状况仍然要好得多，如果这只是第页上的内容：

---

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

打开开发工具（F12）

转到设置

向下滚动至网络

选中禁用缓存（当DevTools打开时）

---

打开开发工具，然后转到“网络”选项卡并禁用捕获。这些都不是别的。

我们在项目中第一次使用srcset时遇到了同样的问题。经过一段时间的努力，我们的一名团队成员终于解决了这个问题。 代码无法工作的原因是srcset和size属性中的大小不匹配。您必须在srcset中提供两倍的宽度，以便浏览器能够在大小上与宽度匹配。 比如说,

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

这是供您试用的示例工作代码

---

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

它的工作基于

设备像素比（DPR）

。例如，假设我们有一台设备，其视口宽度为412像素，DPR为2.6。因此，浏览器选择一个接近803px（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>

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

此处的外键：清除缓存/使用匿名！这对我不起作用，即使我正在清除缓存！：/试试Chrome的隐姓埋名模式（如果您已经用它进行了测试，请关闭所有窗口/选项卡，然后重新开始）。首先缩小窗口，然后加载页面，顺序至关重要。它应该可以工作，也许可以尝试提供有关您浏览器的信息。我在Chrome（48）上遇到问题，并且我尝试更改像素比例，结果成功了，请参见下面的答案：有人知道为什么会发生这种情况吗？我发现，让Chrome重试的一个好方法是确保您打开了devtools，而不使用Incognito，右键单击刷新按钮，选择“空缓存和硬重新加载”。要在chrome中实现这一点，我必须调整实际浏览器窗口的大小，而不是使用“响应”模式滑块。你是正确的。唯一的更正是默认图像标记应具有

而不是

。使用

img

的

大小

属性应适用于强制浏览器在某些断点处使用特定图像。还值得注意的是，盲目建议使用

并不理想，因为

与

具有不同的语义含义。当我使用这种方法时，我的图像甚至没有加载。也许需要更多关于

和

标记之间差异的信息？您是救世主。在从srcset属性中的宽度列表中选择之前，浏览器会将“大小”属性中的值乘以设备的像素比。“将设备像素比更改为1似乎可以加载正确的图像”游戏改变