10 回答
你说得对。
问题是，一旦您的浏览器具有更高分辨率的图片（加载，在缓存中），它就没有必要下载质量较低的图片，即使您将窗口缩小（这样做的目的是节省流量）。
因此，如果您想对此进行测试，只需缩小窗口然后加载页面（在清除缓存后/或使用隐身模式）。您将获得手机或平板电脑版本。然后通过扩大窗口，您会在某个时候看到您的浏览器切换到更高分辨率的图片。
2022 年更新；调整大小后只需使用Ctrl + Shift + R快捷方式（对于 Mac：Cmd + Shift + R），而不是清除缓存，以便浏览器重新加载，并忽略当前选项卡的缓存直到完成（换句话说，完全重新加载而不会丢失整个缓存）。
当在 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>
我刚刚注意到您的演示页面（http://www.darrencousins.com/lab/resp-img-srcset/）从未在 Google 上显示移动版本（即使调整浏览器大小或使用 DevTools - 设备模式）铬（版本 48）。
将设备像素比更改为 1 似乎可以加载正确的图像。
我不知道为什么，我想知道 w 描述符是否考虑了设备像素比
在我们的项目中第一次使用 srcsets 时，我们遇到了同样的问题。在投入了一些时间之后，我们的一名团队成员终于能够解决这个问题。您的代码不起作用的原因是 srcset 和 sizes 属性中的大小不匹配。您必须在 srcset 中提供两倍的宽度，以便浏览器能够将其与尺寸宽度相匹配。例如，
<img
srcSet="image1920w.png 1920w,image720w.png 720w"
sizes="(min-width: 960px) 960px,
360px"
src="www.image1920w.com"
alt="Sample"
/>
这是一个示例工作代码供您试用。
确保以隐身方式打开它（因为一旦浏览器加载更高分辨率的图像，它就不会返回更低分辨率的图像）并首先在小于 1920 像素的浏览器中运行代码以查看更小分辨率的图像（日落），一旦你开始增加浏览器大小，您将能够看到更大的图像（花）。
我猜你是在 chrome 浏览器上测试，它不能在那里工作的唯一原因是因为它是一个 chrome 功能。请参见下面的堆栈溢出线程（它也适用于最新版本的 chrome v54）：
检查了您在 IE8 和 Firefoxv49 上的页面，一切都像魅力一样！
我观察到的另一件事是，虽然 chrome 不会下载其他图像，但它会很好地调整下载的图像的大小。所以，在某种程度上，如果页面上只有这个，我们仍然处于更好的状态：
<img srcset="assets/images/content/large.jpg 1200w" alt="large image">
对于使用 Chrome DevTools 侧边栏的任何人，您可以告诉 Chrome 在 DevTools 打开时禁用缓存。如果它一直为您提供最大的（缓存的）图像，则更改视口和刷新将提供正确的响应图像。
- 打开开发工具 ( F12 )
- 转到设置
- 向下滚动到网络
- 检查禁用缓存（在 DevTools 打开时）
您是否尝试将 DPR 更改为 1.0？您可以在响应模式下的 Chrome DevTools 顶部栏中找到它（尝试 380px 宽度）。更改 DPR 后，右键单击重新加载页面图标，然后选择“清空缓存和硬重新加载”，最好在隐身模式下执行此操作。浏览器应预加载 400w 图像。
它的工作基于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>
就我而言，问题是 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>
打开您的开发工具，然后转到网络选项卡并禁用捕获。仅此而已。