这个问题真的很令人沮丧，我很感激任何见解。这是摘要。
尽管图像具有完整的 srcset，但 Android 上的 Chrome 始终提供完整尺寸的图像。
因此，如果页面有 10 张图像，尽管每个图像有 5 个不同宽度的版本，但仍将使用完整尺寸，通常每张图像为 1-2MB，因此在移动设备上为 20MB。
如果您看一下下图中的currentSrc，它是 Cape-Vulture.jpg”。这是完整大小的 1.2MB 版本。它已在此负载上新鲜下载( status 200 -- 有关清空缓存的更多信息，请参阅下面的调试信息。您还将看到 clientWidth 为 372，实际上 View 的最大宽度为 412px。
Img 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 远程调试
- 每次测试前手动清除缓存
- 使用隐身模式进一步排除缓存
提前致谢
最佳答案
如果设备的密度为 4，则填充 372 像素宽视口(viewport)所需的图像必须为 1488 像素宽。
您使用什么类型的设备进行测试？
关于Android chrome 始终使用 srcset 中的全尺寸图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45857278/