为什么 srcset 下载两个图像？

Question

我正在对我的自动创建 srcset 和 sizes 的 grunt 插件进行重大更新，最近对 Chrome 的行为感到困惑（我正在使用 Chrome 桌面版本 46.0.2490.80 m）。我查看了 Yoav Weiss' 演示并注意到当我将浏览器宽度调整为 400 像素时 Chrome 正在下载两张图片——hires 和 mobile。

演示页面上使用的代码如下所示：

<img src="yacht_race@fallback.jpg" srcset="
    img/yacht_race@mobile.jpg 320w,
    img/yacht_race@wide-mobile.jpg 480w,
    img/yacht_race@tablet.jpg 768w,
    img/yacht_race@desktop.jpg 1024w,
    img/yacht_race@hires.jpg 1280w"
  sizes="
    (max-width: 20em) 30vw,
    (max-width: 30em) 60vw,
    (max-width: 40em) 90vw"
  alt="A very exciting yacht race.">

同样的情况发生在我的 personal blog 上，其中同时加载了 -large 和 -medium 图片。

我已经与 Yoav 在 Twitter 上进行了对话，但他无法重现该场景。还有其他人可以重现吗？这是浏览器错误吗？我脑子里对响应式图像有基本的误解吗？任何建议表示赞赏！

Answer 1

这里发生的事情是您收到了 304 - 它就在图像中。这意味着与这张图片类似的东西已经被缓存了，所以我不会再加载它了。

所以你实际上并没有下载它。

继续缩小浏览器 window 真正缩小，然后清除缓存并加载页面。您将不会再看到 'large' 图片加载。

这里有一个简明的explanation。

为什么 srcset 下载两个图像？

Why is srcset downloading two images?

html

performance

google-chrome

srcset

responsive-images