我目前有一个页面，其中包含大约20个或多个从数据库中提取源数据的图像。
我以100px的宽度显示它们，并且我有一个悬停函数，它在一个元素上添加宽度为250px的全尺寸图像。
我决定对原始图像使用全尺寸版本，并将其缩小到100px，而不是使用缩略图版本。我对此的想法是，在这个页面上，用户很可能会将鼠标悬停在大多数图像上，因此页面最终不得不加载大多数图像的全尺寸版本，为什么要让他们下载每个元素的缩略图和全尺寸版本呢。此外，从250px到100px的缩放似乎在较小的元素中没有显示太多失真。
现在我正在通过谷歌页面速度分析器运行我的页面，它真的不喜欢我使用比必要的更大的图像来处理更小的元素。当然，它忽略了这样一个事实，即那些较大的图像正被用于动态创建的弹出窗口。
为了让我的页面在谷歌的页面速度测试仪上玩得很好，我让步了，并对较小的元素使用缩略图，但我也想预取较大的图像，以避免用户悬停在元素上时出现令人讨厌的延迟。这意味着我基本上加载了两个版本的相同图像，只是为了让谷歌速度测试不会对我大喊大叫
这对我来说似乎很荒谬，所以我想问这是否真的是最好的方法，或者有没有其他方法可以让我的页面在谷歌速度测试中表现得很好。
谢谢，Adam
如果你知道自己在做什么，就没有必要成为PageSpeed分数的奴隶。
加载两份图像可能会使实际页面速度变慢。然而，这取决于您试图优化的内容。如果你想让完全渲染的时间更快（这样用户就可以看到页面），然后在后台加载大图像以增加交互性，那么先加载缩略图，然后加载大版本可能会更好。
还是最好有快速的交互时间，而完全渲染的时间并不重要。也许每个图像都有一个副本会更好。