为什么 srcset 下载两个图像？答案

【问题标题】：Why is srcset downloading two images?为什么 srcset 下载两个图像？
【发布时间】：2015-10-23 10:41:27
【问题描述】：

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

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

<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 对话，但他无法重现该场景。那里的其他人可以复制吗？是浏览器的错误吗？我对响应式图像有基本的误解吗？任何建议表示赞赏！

【问题讨论】：

是啊...这很尴尬，这确实只是一个缓存错误。谢谢布拉德！

标签： html performance google-chrome srcset responsive-images

【解决方案1】：

这里发生的情况是您得到了 304 - 它就在图像中。这意味着该图像中的某些内容已被缓存，因此我不会再次加载它。

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

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

这是一个简洁的explanation。

【讨论】：