WordPress 图像优化终极指南
已发表: 2017-06-141 … 2 … 3 … – 您的潜在客户刚刚关闭了您的网站，因为它仍在加载中。 听起来很熟悉？ 我相信你多次是那个不耐烦和沮丧的访客。 我知道我是。 这就是为什么我编制了一份关于图像优化需要了解的最终清单。 它会很长，但我希望你会觉得它值得一读。
目录
- 3分钟视频中的本文内容
- 图像优化的好处
- 图像格式
- 上传前调整图像大小
- 用于自动调整图像大小的 Imsanity WordPress 插件
- 压缩图像
- 最佳图像压缩在线工具
- 小PNG
- 优化
- 压缩机
- 图像优化
- 图像较小
- 海妖
- JPEG.io
- PageSpeed 见解
- 最佳在线压缩工具的结果
- JPEG 的最佳在线压缩工具
- PNG的最佳在线压缩工具
- 最佳在线图像压缩工具
- 用于图像压缩的最佳 WordPress 插件
- WP Smush（免费版）
- 通过 TinyPNG 压缩 JPEG 和 PNG 图像
- 短像素
- 想象一下
- EWWW 图像优化器（免费版）
- 用于图像压缩的最佳 WordPress 插件的结果
- 用于压缩 JPEG 的最佳 WordPress 插件
- 用于压缩 PNG 的最佳 WordPress 插件
- 整体图像压缩的最佳 WordPress 插件
- 最佳图像压缩在线工具
- 结论
3分钟视频中的本文内容
这是本文的一个非常快速的视频概述。 我仍然建议阅读，但只是为了取笑你，我们开始吧：
图像优化的好处
你还没有卖掉所有的图像优化东西吗？ 让我们看看如果你只解决这个小而微不足道的问题，你将获得的所有好处：
- 您的网站会更快
- 您的 Google PageSpeed 分数会更好
- 谷歌会更喜欢你，你的搜索引擎排名也会提高
- 你的跳出率会更小，更多的访问者会看到你的页面
- 您将需要更少的服务器存储空间，您将在服务器上花费更少的资源，这将为您节省资金
- 您将为自己和您的访客节省移动数据计划费用
我现在已经引起了你的注意，对吧？ 现在我们可以开始真正的工作了。
图像格式
图像优化从一些关于图像格式的基本知识开始。 Internet 上最常见的两种格式是扩展名为.png的PNG和扩展名为.jpg的JPEG 。 在大多数情况下，我会使用 JPEG，因为它是照片、渐变图像和数百万颜色图像的最佳格式。 另一方面，PNG 更适合有限的彩色图像，例如徽标，以及具有透明度的图像。
下一个示例将向您展示选择正确的图像格式以获得最佳图像优化的重要性。
我将以.jpg和.png格式保存我们未优化的 child.jpg 图像。 我们可以看到，图像child-saved-as-jpeg.jpg是 3.1 MB 大，图像child-saved-as-png.png是 4.5 MB 大。 在这种情况下，PNG 图片比 JPEG 图片大 45% ，这一差异仅源于选择特定的图像格式。 没有更简单的方法可以用这么少的努力节省这么多的空间。 好吧，也许有。 让我们看看下一步。
上传前调整图像大小
我们在前面的示例中通过选择正确的图像格式节省了一些空间，但如果我们在上传之前调整图像大小，我们可以节省更多空间。 但是我们应该调整多少呢？ 这实际上取决于您网站的宽度和容器。
在我们的 ProteusThemes 网站上，图像的最大宽度为 1110 像素，因此我将调整当前图像child.jpg的大小（其宽度为 1800 像素）为 1110 像素。 在这种情况下，我们的大小刚刚从 3.1 MB 变为 1.1 MB，这又节省了 65%并减少了空间。
提示：您可以直接在 WordPress 媒体库中调整图像大小。 单击媒体 -> 选择您的图像 -> 编辑图像并为您的图像选择新尺寸：
用于自动调整图像大小的 Imsanity WordPress 插件
如果您不想考虑调整图像大小，或者如果许多不同的用户将图像上传到您的网站，那么 Imsanity 插件应该非常适合您。 在插件设置中，您可以选择图像应具有的最大宽度或高度，插件会将所有较大的图像调整为该大小。 您还可以选择批量调整大小功能来调整所有现有图像的大小。 我绝对向任何在上传之前分别调整每个图像大小有问题的人推荐这个插件。 您可以免费下载 Imsanity 插件。
压缩图像
现在我们已经了解了图像优化的基础知识，让我们看看如何提升我们的游戏。 我们可以在互联网上找到大量的图像压缩在线工具，甚至可以找到WordPress 插件，它们可以减小图像的大小。 但是在这里我们必须小心，有些工具几乎没有什么区别，有些设置会破坏我们的形象，使其无用。 那么，如何找到完美的平衡点呢？ 别担心，在撰写本文时（2017 年 6 月，2018 年更新），我们测试了所有最流行的在线工具/服务和 WordPress 插件以进行图像优化，并且我们选择了最好的。
我们使用了 3 个不同的 JPEG 图像和 1 个 PNG 图像来进行我们的测试。
所有 3 幅 JPEG 图像均来自 Unsplash，作者是 Mi Pham、Breather、Denise Chan 和 Niko Virtanen。 出于测试目的，它们被裁剪并调整为 1110 x 624 像素。
对于 PNG 图像，我们创建了自己的图像，带有 ProteusThemes 徽标和其背后的一些图案。 就像 JPEG 测试图像一样，这张照片也被调整为 1110 x 624 像素。
我们现在将所有图像通过所有选定的工具和插件进行压缩，我们将找出哪一个是最适合您使用的。 让我们从在线工具开始。
最佳图像压缩在线工具
在撰写本文时（2017 年 6 月，2018 年更新），以下是最流行的图像压缩在线工具和服务的完整列表：
- 小PNG
- 优化
- 压缩机
- 图像优化
- 图像较小
- 海妖
- JPEG.io
- PageSpeed 见解
如果您认为其他工具值得列入该列表，请告诉我们，我们将对其进行测试并将其添加到列表中。 您可以在下面找到我对每个工具的评论，以及我对最佳工具的评估。 如果您不想阅读每个单独的工具，请单击此处 - 向我展示获胜者！
小PNG
TinyPNG是我使用的第一个图像压缩工具之一，有时我仍然使用它。 没有选项，您只需上传图像，然后将它们压缩。 使用此在线工具，您最多可以批量上传 20 张大小为 5 MB 的图像。
优化
Optimizilla是另一个简单但功能强大的在线工具。 它是免费使用的，并且可以选择批量上传多达 20 张图片。 为了获得最佳压缩/质量比，我们将质量设置保留为 90，因为它是默认设置。 如果您想进一步推动压缩，只需更改此设置，您就会立即看到质量的变化。
压缩机
Compressor有可能成为图像压缩的最佳工具之一，但它有一个很大的缺陷。 目前没有批量上传选项，这意味着您一次只能压缩 1 张图片。 除此之外，它是免费的、易于使用的并且有两个压缩选项。 我们在测试中使用有损选项，因为压缩后图像的质量仍然保持不变。
图像优化
ImageOptim是一个有很多设置的工具。 您可以在 3 种不同的质量选项和 3 种不同的颜色质量选项之间进行选择。 我们发现，最好的压缩/质量结果是使用默认设置。 将质量设置为中等，颜色质量设置为自动。 ImageOptim最让我困扰的事情，在有点过时的设计旁边， 即使我上传PNG，它也会导出JPEG . 我已经向 Kornel（ImageOptim 的创建者）发送了一封关于该问题的电子邮件，他已经修复了它。
图像较小
就像Compressor一样， ImageSmaller也有同样的缺陷。 没有批量上传的选项。 但是，它具有最大的上传限制之一，即 50 MB。 如果您有更大的文件需要优化，那么 ImageSmaller 可能是适合您的工具。
海妖
Kraken是一款高级图像压缩工具，是我测试过的所有工具中最好的仪表板。 您会发现用于上传图像的漂亮网络界面和许多不同的设置以获得最佳效果。 我们在测试中使用了他们的默认有损设置。
JPEG.io
JPEG.io是与Kraken相同的工具的免费版本。 它具有相同的压缩功能，但就像网站的 URL 告诉我们的那样，它仅适用于 JPEG。
PageSpeed 见解
你没想到会在这里看到这个，对吧？ 当我们测试我们的网站时， PageSpeed Insights还为我们提供了一个 .zip 压缩文件。 这不是对用户最友好的方式，因为您必须让您的网站与所有图像一起在线，然后用新的压缩图像替换它们，但您会得到压缩的图像，就像 Google 想要的那样。
最佳在线压缩工具的结果
您将在下面找到包含我们所有测试结果的图表。 您还可以查看我们的详细电子表格以获取更多信息。
JPEG 的最佳在线压缩工具
大多数工具将我们的测试 JPEG 压缩了大约 80% 。 让我们看看我们的child.jpg图像。 我们从 3.1 MB 大小的图片开始，经过调整大小和压缩后，我们的图片只有 165 KB 大，这意味着尺寸缩小了 95% 。 现在，这是一个区别！ 我们设法使用Compressor和ImageOptim获得了相同的结果。 所以，看起来我们在这里有两个赢家。
PNG的最佳在线压缩工具
对于我们的 PNG 测试，我们使用所有工具平均减少了 50% 的大小。 然而， Optimizilla比其他的要好一点，我们的pt-logo.png图像的大小减小了56% 。
最佳在线图像压缩工具
即使Optimizilla不是 JPEG 的最佳压缩工具，我也会推荐它作为目前在线可用的最佳压缩工具。 以 79% 压缩的 JPEG 仍然很棒，您可以通过页面上的简单质量设置将其推得更高。 它还有一个批量上传选项，其中缺少Compressor并且上传比ImageOptim更可靠，其中所有图像都导出为 JPEG，即使其中包括 PNG。 由于所有这些，我认为Optimizilla配得上最佳在线图像压缩工具的称号。
接下来，让我们看看 WordPress 插件是否可以击败在线图像压缩工具。
用于图像压缩的最佳 WordPress 插件
在线图像工具和 WordPress 插件有什么区别？ 好吧，如果您使用在线图像工具进行图像压缩，您仍然需要将这些图像上传到您的 WordPress 网站然后使用它们。 如果您更喜欢将所有东西都放在一个地方，那么用于图像压缩的 WordPress 插件可能是您的最佳选择。 大多数插件还具有通过上传优化图像的选项，因此您可以打开该设置而忘记任何额外的工作。
我为每个插件创建了一个新的 WordPress 网站，每次都上传相同的 4 张图片。 不同的插件有不同的设置，所以我一直在寻找压缩和图像质量之间的完美平衡。
我测试了以下插件：
- WP Smush（免费版）
- 通过 TinyPNG 压缩 JPEG 和 PNG 图像
- 短像素
- 想象一下
- EWWW 图像优化器（免费版）
就像我之前提到的，如果您知道我们应该测试的任何其他插件，请告诉我们，我们会将其添加到列表中。 如果您不想了解有关这些插件的更多信息，请单击此处 – 向我展示获奖者！
WP Smush（免费版）
WP Smush是我所知道的最古老的图像压缩插件之一。 与所有其他插件相比，它有一个很好的优势，因为无需注册即可使用免费版本。 它还具有自动压缩新上传图像的选项，因此一旦设置了插件，您就可以忘记它，它将在后台为您完成所有工作。 不幸的是，压缩结果是免费版本中最差的结果之一，所以我不建议使用它。 他们已经在他们的网站上声明，专业版的压缩效果要好得多，所以我也会在文章的下一次更新中测试这个。
通过 TinyPNG 压缩 JPEG 和 PNG 图像
就像TinyPNG在线压缩工具一样，WordPress 插件也非常简单。 完成注册后，它的设置很少，基本上可以开箱即用。 所有新上传的图像也可以自动压缩，因此您可以激活插件并忘记它。
短像素
就个人而言， ShortPixel是最大的惊喜之一。 我在研究之前从未听说过它，我真的印象深刻。 使用默认的有损推荐设置，它在 WordPress 插件之间具有最佳压缩效果，并且它还具有光泽选项。 此选项适用于需要非常高质量的图片并且不能因质量损失而妥协的摄影师或任何其他专业人士。
想象一下
Imagify是一个插件，由著名的WP Rocket插件作者制作。 注册后，您将获得一些明确的选项可供选择。 为获得最佳定量压缩和图像质量，请选择激进模式。 设置中的一件好事也是一个选项，可以为原始图像设置一个单独的文件夹，以防压缩出现任何问题。 我唯一不完全理解的是，为什么我们必须切换到媒体中的列表视图才能看到压缩结果。 除此之外，Imagify 是一个非常好的和可靠的插件。
EWWW 图像优化器（免费版）
EWWW Image Optimizer是唯一的插件，它给了我一些错误。 首先，我在自己的主机上进行了尝试，但出现了一个错误，即 EWWW Image Optimizer 需要 exec() 或 API 密钥。 下次我在本地开发 WordPress 网站上尝试该插件时，我收到一个错误，提示我缺少 pngout。 我按照有关如何安装它的说明进行操作，该插件终于可以进行测试了。 由于我测试了免费版本，因此只有一个无损选项，这并没有带来最好的结果。 就像使用 WP Smush 一样，我还将在下一篇文章更新中测试 EWWW Image Optimizer 专业版，我们将看看它是否会表现得更好。
用于图像压缩的最佳 WordPress 插件的结果
就像之前一样，您会在下面找到包含我们所有测试结果的图表。 您还可以查看我们的详细电子表格以获取更多信息。
用于压缩 JPEG 的最佳 WordPress 插件
ShortPixel是赢家，平均压缩率为 84% 。 与最佳在线压缩工具类别中的Compressor和ImageOptim相同。 第二好的插件是Imagify ，平均压缩率为 70% 。 我宣布ShortPixel目前是该类别的绝对赢家。
用于压缩 PNG 的最佳 WordPress 插件
最好的 PNG 压缩插件是TinyPNG的Compress JPEG & PNG images ，压缩率为 56% 。 有趣的是，最好的结果再次与最佳在线压缩工具类别相同。 但是，其他插件在这里更具竞争力，压缩率约为 50% 。
整体图像压缩的最佳 WordPress 插件
在我看来，用户体验、不同设置和压缩之间的最佳比例来自ShortPixel插件。 总的来说，它是一个非常可靠的插件，有很多选项，但也有很好的默认设置。 您可以在注册后立即开始使用该插件，最重要的是，压缩非常好。 目前，我会为我自己的网站使用ShortPixel插件，尤其是如果大多数图像都是 JPEG 格式的话。
结论
那是一次长途旅行，对吧？ 同时，我们设法将child.jpg图像压缩到 95% 。 如果您只遵循这3 个简单的步骤，您的网站可以运行得更快。 让我们再重复一遍：
- 选择正确的图像格式
- 上传前调整图片大小
- 使用在线工具或 WordPress 插件压缩图像
另一个重要的事情是，您对每个图像仅使用一个工具或 WordPress 插件，因为它们中的大多数都具有某种有损压缩，这意味着您的图像质量可能会随着每次额外压缩而变得更糟，而这是我们所做的不想。 如果您想检查它们之间的质量比较或自己测试一些其他工具和插件，我们还在 GitHub 上添加了所有测试图像。
你不应该有任何不压缩图像的借口。 有很多工具和不同的方法可以做到这一点，我们已经证明了这一点，最终它是值得的。 选择您自己的在线压缩或 WordPress 插件的个人获胜者，并在优化前后检查您的网站 Google PageSpeed 得分。 在我们的评论部分分享您的网站速度和分数改进信息。 我还想知道，这篇文章是否对您进行图像优化有帮助，您对此有何看法。