Android chrome 总是使用来自 srcset 的全尺寸图像答案

【问题标题】：Android chrome ALWAYS using full size image from srcsetAndroid chrome 总是使用来自 srcset 的全尺寸图像
【发布时间】：2017-08-24 09:00:04
【问题描述】：

这个问题真的很令人沮丧，如果有任何见解，我将不胜感激。这是摘要。

尽管图像具有完整的 srcset，但 Android 上的 Chrome 始终提供完整大小的图像。

因此，如果页面有 10 张图片，尽管每个图片有 5 个不同宽度的版本，但仍会使用完整大小的图片，通常每张为 1-2MB，因此在移动设备上为 20MB。

如果你看一下下图中的 currentSrc，它是 Cape-Vulture.jpg"。这是 1.2MB 的全尺寸版本。它已在本次加载时重新下载（状态 200 -- 更多关于清空缓存的信息，请参阅下面的调试信息）。您还将看到 clientWidth 为 372，实际上视图的最大宽度为 412px。

图片 html 来源：

<img class="wp-image-43726 size-large"
    src="http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture-720x477.jpg"
    alt="" width="720" height="477"
    srcset="http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture-720x477.jpg 720w,
        http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture-300x199.jpg 300w,
        http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture-1398x927.jpg 1398w,
        http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture.jpg 1400w"
    sizes="(max-width: 720px) 100vw, 720px">

那么为什么会发生这种情况？为什么要使用完整的图像？上面的 img src 肯定会导致手机上提供 720px 版本吗？在 src attr 中甚至指定了正确的图像 url，但不知何故 chrome 仍然坚持拉 1.2MB 版本。这完全破坏了这个博客的移动体验，让我发疯。据我所知，当代码符合标准时，没有理由下载完整图像。

作为一个站点，请注意正确的图像 (720px) 在桌面（FF、chrome）上正确提供。

关于我的调试设置的注意事项：

在 Android 设备 (SAMSUNG Galaxy S6) 上使用 Chrome 的远程调试
每次测试前手动清除缓存
使用隐身模式进一步排除缓存

提前致谢

【问题讨论】：

您链接到的页面似乎没有这个srcset 标记。
因为问题我删除了 srcset（删除链接的编辑答案）

标签： android google-chrome responsive-images srcset

【解决方案1】：

如果设备的密度为 4，则填充 372 像素宽视口所需的图像必须为 1488 像素宽。

您使用哪种设备进行测试？

【讨论】：