Android chrome始终使用srcset的全尺寸图像

这个问题真的令人沮丧，我很感激任何见解。这是总结。Android chrome始终使用srcset的全尺寸图像

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

因此，如果页面有10个图像，尽管每个图像的宽度有5个版本，但会使用全尺寸，通常为1-2MB，因此在移动设备上为20MB。。

如果你看看下面的图片中currentSrc，它是海岬型Vulture.jpg”这是全尺寸的版本1.2MB已经下载了这个负载（200状态鲜 - ...查看清空缓存下面的调试信息的说明），您也将看到clientWidth是，的确视图的最大宽度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版本在手机上投放？正确的图像URL甚至在src attr中指定，但不知何故chrome仍坚持拉1.2MB版本。这完全破坏了这个博客的移动体验，并使我疯狂。据我所知，当代码符合标准时，没有理由下载完整的图像。

作为网站注意正确的图像（720px）正确地在桌面（FF，铬）服务。

注释在我的调试设置：

机器人设备上的使用铬的远程调试（SAMSUNG银河S6）手动
清除高速缓存的每个测试
使用无痕模式，以进一步排除前缓存

在此先感谢

来源

2017-08-24 21stcn

您链接到的页面在其中的任何位置似乎都没有此srcset标记。 –

由于问题，我删除了srcset（编辑答案以删除链接） – 21stcn

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

你使用什么样的设备进行测试？

来源

2017-10-04 10:52:10

Android chrome始终使用srcset的全尺寸图像

回答

相关问题