谷歌的页面速度测试认为我应该优化我的图像超过目前的图像大小

Question

我真的对这个感到困惑，因为它似乎不可能做到。

当通过 GTMetrix 运行我的网站时，我表现出色，但通过 Google 页面速度洞察力，它坚持认为我的图像可以进行更多优化，例如：

压缩和调整 mysite.com/…ets/img/homepage/my_image.jpg 可以节省 78.5KiB（减少 94%）。

有问题的图像是 65KiB，所以我不知道 Google 认为我可以如何将其再减少 78.5。

我正在使用 jquery 揭开并在其上使用视网膜功能，这可能是问题吗？

我还尝试下载 Google 提供的图片作为压缩版本，但这些图片的尺寸已更改，因此如果我将它们按预期大小放置，它们看起来会很糟糕。

真的很困惑，任何帮助将不胜感激。

谢谢

Answer 1

在继续针对 Google Page Speed 优化图像之前，您需要区分几件事情。

1. 图像针对不同平台（桌面和移动）进行了优化
2. 图像针对物理尺寸进行了优化。
3. 图像报告只能是“压缩和调整大小”和“压缩”。压缩意味着你需要做一个压缩部分，另一方面压缩和调整大小意味着你需要为适当的平台使用适当大小的图像。

根据您正在查看的报告（桌面或移动），您的项目“压缩和调整 mysite.com/...ets/img/homepage/my_image.jpg 可以节省 78.5KiB（减少 94%）”。需要更小的尺寸和压缩或尺寸更小。使用 CSS 调整图像大小的余量约为 20%，因此如果您获得 100x100 像素的图像，您可以使用 CSS 将其调整为 120x120 像素左右，而无需获得关于该项目的报告（也就是说，如果您还对它进行了物理优化）。要在 Chrome 中检查这一点，请检查图像并在元素选择器中检查“自然”大小。

您可以通过以下几种方式处理此问题：

1. 媒体查询（注意在这种情况下你必须使用背景图片）
2. Srssets
3. JS

Answer 2

根据您使用的图像压缩包，您可能会得到不同的压缩结果。我注意到有时 Google 的 Page Speed 能够比我更进一步地优化图像（有时不能！）

您的网页是否有实时 URL？甚至图像？能够实时查看并进行比较会有所帮助！