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

Question

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

syg*_*ad1 52 image responsive-design srcset

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

Run Code Online (Sandbox Code Playgroud)

我使用chrome 40,我得到的是最大的图像,调整我的浏览器大小,清除缓存什么都不做.

我读到了我必须填充的地方,所以我使用了picturefill插件,虽然chrome应该支持它.....仍然不起作用.

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

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

任何帮助都非常受欢迎.

Answer 1

Ton*_*CZE 72

你说得对.

问题是,一旦您的浏览器具有更高分辨率的图片(加载,在缓存中),即使您将窗口缩小(这是为了节省流量),也没有必要下载质量较差的图片.

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

这对我来说不起作用,即使我正在清理缓存!:/ (17认同)
@Nadia 评论对我有用。我正在使用切换移动模式来测试何时禁用该模式，然后手动调整窗口大小以下载正确的图像。有点违背了该功能的目的！ (4认同)
我在 Chrome (48) 上遇到了问题，我尝试更改像素比并且它起作用了，请参阅下面的答案：http://stackoverflow.com/a/34222310/4063626 有谁知道为什么会这样？ (3认同)
我发现在不使用隐身模式的情况下让 Chrome 重试的一个好方法是确保你打开了开发工具，右键单击刷新按钮，然后选择“清空缓存和硬重新加载”。 (3认同)
尝试 Chrome 的隐身模式以确保（如果您已经在使用它进行测试，请关闭所有窗口/选项卡并重新开始）。先把窗口变小，然后加载页面，顺序很重要。它应该可以工作，也许尝试提供有关您的浏览器的信息。 (2认同)
为了使此功能在chrome中工作，我必须调整实际浏览器窗口的大小，而不是使用“响应式”模式滑块 (2认同)

Answer 2

mik*_*.pj 28

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

Run Code Online (Sandbox Code Playgroud)

你是对的.只有校正是默认的图像标签应该有`<img rel="nofollow noreferrer" src ="small.jpg">`而不是`<img rel="nofollow noreferrer" srcset ="small.jpg">`. (9认同)
同样值得注意的是,盲目地建议使用"<picture>"并不理想,因为`<picture>`与`<img>`具有不同的语义.https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/ (7认同)
你是救世主。 (2认同)

Answer 3

MeV*_*MeV 11

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

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

我不知道为什么,我想知道w描述符是否考虑了器件像素比

在从 srcset 属性中的宽度列表中进行选择之前，浏览器会将尺寸属性中的值乘以设备的像素比。 (6认同)

Answer 4

Abh*_*kar 7

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

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

Run Code Online (Sandbox Code Playgroud)

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

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