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

【问题标题】：Why are two srcset images loaded?为什么要加载两个 srcset 图像？
【发布时间】：2016-10-12 12:24:24
【问题描述】：

在开发响应式 Web 模板的上下文中，我使用 srcset 属性根据当前视口大小加载不同的图像。这通常工作正常。但在生产模式下，图像是从 DAM（数字资产管理系统）加载的，其中使用特殊参数来缩放和裁剪请求的图像，例如

<img src="{url}/s,x,586,y,0/{img_id}"
     srcset="{url}/s,x,293,y,0/{img_id} 293w,
            {url}/s,x,440,y,0/{img_id} 440w,
            {url}/s,x,586,y,0/{img_id} 586w"
     sizes="(max-width: 520px) 100vw, (max-width: 1010px) 40vw, 15vw" />

问题是：现在每个图像都加载了两次（440w 和 586w）。这是缓存问题吗？

【问题讨论】：

我无法重现该问题。在我的测试（Firefox 49）中，只加载了 293w 版本。您能否提供指向受影响页面的链接？您使用的是哪个浏览器和版本？

标签： html image performance responsive-images srcset

【解决方案1】：

您的代码看起来非常好，浏览器应该只加载一张图片，除非您调整窗口大小或旋转平板电脑。

【讨论】：