Question

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

我读到了必须填充的地方，所以我使用了picturefill插件，虽然chrome应该支持它.....仍然无法工作。

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

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

非常感谢任何帮助。

Answer 1

你说得对。

问题是，一旦你的浏览器具有更高分辨率的图片（加载，在缓存中），它就没有必要下载质量较差的图片，即使你让你的窗口变小（这点就是保存）流量）。

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

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

Answer 3

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

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

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

Answer 4

我猜你正在测试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">

Answer 5

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

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

Answer 6

在我们的项目中首次使用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是示例工作代码，供您试用。

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

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

Answer 8

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

Answer 9

打开您的开发工具，然后转到“网络”标签并禁用捕获。没什么。

响应式图像srcset无法正常工作

9 个答案: