如何为 SEO 和 Google 的 Pagespeed 优化图像并改进网络节省

Question

几乎在我为所有网站进行的每一次 Pagespeed 测试中，我都会收到评论“通过无损压缩图像 X 优化图像”，这通常会大大提高我的页面排名。

我已经用 Photoshop 保存了每张图片，但我想知道如何“通过无损压缩来优化图片”。 据我所知，我已经在尽我所能。

真的很纳闷。。

^{题外话，但我注意到 Google 的 PageSpeed 使用 Retina 设备进行检查，因为我所有的 Retina 图像都被加载而不是常规图像。 由于这些区域大于我在移动部分获得 1/100 分的区域。 哈哈。}

Answer 1

这是我很多网站遇到的一个实际问题，但是我使用了免费版本的kraken来“宽松地压缩”我的所有图像，并且通过了Google测试，从而提高了排名！

https://kraken.io/web-interface

我一定已经使用了超过10,000张图像！

Answer 2

您在 Photoshop 和 Illustrator 等程序中创建的图像看起来很棒，但通常文件大小非常大。 这是因为图像的制作格式使它们更容易以不同的方式进行操作。 如果您将这些文件放在您的网站上，加载速度会非常慢。 为网络优化图像意味着根据图像包含的内容以网络友好的格式保存或编译图像。

它是如何工作的？ 我们需要了解两种压缩形式，有损和无损。

以有损格式保存的图像在未压缩时看起来与原始图像略有不同。 请记住，这只有在非常接近的情况下才能看到。 有损压缩适用于 Web，因为图像使用少量内存，但可以与原始图像足够相似。

以无损格式保存的图像保留了生成原始图像所需的所有信息。 出于这个原因，这些图像携带更多的数据，并且作为回报是非常大的文件大小。

我们还可以通过将图像保存为适当的尺寸来优化网络图像。 使用 CSS 调整网页本身的图像大小很有帮助，但问题是网络浏览器仍会下载整个原始文件，然后调整大小并显示它。

你能想象拍摄一张海报大小的图像并将其用作缩略图吗？ 当我们可以一直加载 20 像素的图像时，加载 20 像素乘 20 像素的小图像将花费与原始海报一样长的时间。

如何优化图像？

简单来说，通过删除图像中保存的所有不必要的数据来优化您的图像，以根据图像在您网站中的使用位置来减小图像的文件大小。 为网络优化图像可以将您的总页面加载大小减少多达 80%。

图像的全面优化可能是一门完美的艺术，因为您可能要处理的图像种类繁多。 以下是优化网络图像的最常用方法。

减少图像周围的空白——一些开发人员使用空白作为填充，这是一个很大的禁忌。 裁剪图像以删除图像周围的任何空白并使用 CSS 提供填充。 使用正确的文件格式。 如果您有图标、项目符号或任何颜色不多的图形，请使用 GIF 等格式并使用较少的颜色保存文件。 如果您有更详细的图形，请使用 JPG 文件格式来保存图像并降低质量。 以适当的尺寸保存您的图像。 如果您必须使用 HTML 或 CSS 来调整图像大小，请立即停止。 以所需大小保存图像以减小文件大小。 要调整图像大小，您必须使用某种形式的程序。 对于基本压缩，您可以使用简单的编辑程序，例如 GIMP。 要进行更高级的优化，您必须将特定文件保存在 Photoshop、Illustrator 或 Fireworks 中。