html - 为什么 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 - 它就在图像中。这意味着与此图片类似的内容已经缓存，因此我不会再次加载它。

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

继续将浏览器窗口缩小得非常小，然后清除缓存并加载页面。您将不会再看到“大”图像加载。

这是一个简明的explanation .