如何优化 WordPress 网站上的图像——分步指南

图像对于帮助参与、增加兴趣和打破原本会是一堵墙的文字非常重要。

图像确实带来了挑战。它们通常是会减慢页面加载速度的大文件。

由于谷歌和大多数网络用户更喜欢更快的加载时间，这是我们绝对必须避免的。

那么如何在不减慢速度的情况下在 WordPress 网站上包含图片呢？

通过优化您的图像。

我们将概述什么是图像优化、它是如何工作的以及如何优化 WordPress 网站上的图像。

什么是图像优化？

图像优化就是减少图像文件的大小，同时平衡任何质量损失。理想的做法是在您的网站上展示高质量的图像，而不会减慢包含大文件的页面速度。

每个人都应该特别注意图像优化，因为它是提高网站速度的最常见方法之一。

图像优化的好处在于它不需要任何开发技能，因此任何网站所有者都可以轻松实现。

您可以跟踪您在网站上上传的每张图片，并确保手动调整和调整大小，或者您可以使用一个插件来为您优化所有图片。

优化图像的好处

图像优化就是减少图像文件的大小，同时平衡任何质量损失。理想的做法是在您的网站上展示高质量的图像，而不会减慢包含大文件的页面速度。

每个人都应该特别注意图像优化，因为它是提高网站速度的最常见方法之一。

图像优化的好处在于它不需要任何开发技能，因此任何网站所有者都可以轻松实现。

优化图像有几个关键的好处。它改善了页面加载时间，增强了用户体验并可以改善您的网站 SEO。

提高页面加载时间

正如我们在顶部提到的，大多数用户会喜欢加载速度快的网站。对于越来越多使用手机上网的人来说尤其如此。

我们都是忙碌的人，有很多事情要做，对缓慢的网页几乎没有容忍度。

根据Unbounce，加载速度超过 2 秒的页面的平均跳出率为 9%，而加载时间为 5 秒的页面的跳出率为 38%。这意味着用户参与度降低，转化率降低。

提升用户体验

更快的加载时间确保用户可以快速访问页面并立即参与。

让他们等待，如果他们厌倦了等待并去其他地方，您可能会产生负面情绪或完全失去该访客。

如果您的页面旨在转换、收集潜在客户或销售，那么每位流失的访问者都会失去收入！

改善网站搜索引擎优化

图像优化还可以提高您的 SEO 排名。怎么会这样？这是谷歌的事情。从 2010 年开始，Google 正式宣布页面速度将在排名算法中发挥主要作用。

因此，如果您的网站速度较慢，那么您在 SERP 顶部看到您的网站的机会就会减少。

即使在 12 年后，同样的速度排名措施对于 Google 如何对您的网站进行排名仍然至关重要。

您的页面越快，您的排名就越高。你的页面越慢，你的排名就越低。-

图像优化可以手动完成，也可以使用可以在自动模式下为您处理所有繁重工作的工具完成。

进一步，我们将讨论如何自动优化 WordPress 图像并避免自己做额外的工作。

图像优化的类型

您可以通过三种主要方式优化图像以获得最佳性能、更改文件格式、压缩图像文件和更改图像尺寸。

更改图像文件格式

图像往往以三种主要格式出现，PNG、JPEG 或 GIF。每个都适用于网页，但非常适合特定类型的图像。

PNG – .png 文件管理器是高质量图像的理想选择，但文件较大。PNG 格式最适合用于较低分辨率的图像，例如横幅、信息图表或屏幕截图。

JPEG – .jpg 或 .jpeg 文件在网上很常见，因为它们可以被有效地压缩，从而使它们比其他方式小得多。JPEG 可用于网站、博客和产品图像。

GIF – .gif 文件是另一种常见的在线文件格式。它们最常用于简单的图像或动画，因为它们受 8 位格式的限制，限制了颜色和细节。GIF 对于在内容中添加图像以及基本插图或图形很有用。

图像压缩

图像压缩使用一种算法来减小图像文件的大小。根据图像文件格式是有损还是无损，算法将从图像文件中删除不必要的数据。

有损压缩将通过删除数据来降低图像质量，同时显着减小文件大小。

无损压缩压缩图像数据，而不是从文件中删除数据。

PNG 和 JPEG 文件可能是有损或无损的，具体取决于源图像，而 GIF 使用无损压缩。

更改图像尺寸

改变图像尺寸是图像优化的最终方法。

图像越大，它包含的数据越多，因此文件越大。将图像大小减小到页面上所需的大小会尽可能地减小文件大小。

我们建议在上传到 WordPress 之前使用图像编辑器将图像调整到所需的尺寸。您还可以在上传之前或之后优化和压缩图像。

如何针对 Web 性能优化图像

因此，现在您对图像优化及其全部内容有了更多了解，让我们开始吧。 

让我们介绍手动图像优化，使用 Photoshop 和使用在线工具。

手动优化图像

如果您喜欢自己动手，您可以手动优化您在 WordPress 网站上使用的所有图像。

您可以在上传之前自行调整图像大小和裁剪图像。首先找出图像的最大显示尺寸非常重要，这样您就不会超过尺寸限制。

最大显示尺寸实际上是图像可以在网站上显示的最大分辨率。  

根据您的要求，标题图像大约为 1200 x 628 像素，标准图像为 640 x 480 到 1024 x 768 之间。

使用 Photoshop 优化图像

由于 Photoshop 是最受欢迎的图像编辑器之一，让我们使用它手动优化图像。

1. 打开 Photoshop 并选择文件>打开
2. 选择您的图像，使其在 Photoshop 中加载
3. 从顶部菜单中选择图像>图像大小
4. 为图像设置所需的高度和宽度
5. 在同一菜单中设置分辨率
6. 选择文件>导出>保存为 Web
7. 从菜单中选择 JPEG
8. 将图像质量值设置在 40 到 60 之间（可能需要实验）
9. 将渐进式和嵌入颜色配置文件设置为是
10. 转换为 sRGB 并保存文件

使用在线工具优化图像

有许多在线工具可以执行图像优化。它们往往使用起来快速而轻松，如果您没有图像编辑器，它们是一个可行的替代方案。

一种在线工具是Optimizilla。

1. 访问 Optimizilla 网站
2. 将您的图像拖到中心的框中，优化将自动发生
3. 选择图片内下载，下载优化后的图片

优化后，您会在图像中看到一个百分比。这是文件大小减小的百分比。百分比越高，文件越小。

使用 WordPress 插件优化图像

如果您不想手动优化图像，您可以安装一个插件来为您完成上述所有（以及更多）操作。

有很多图像优化插件，但我们喜欢Optimole。我们将在我们的示例中使用它。

其他图像优化插件将实现大致相同的目标，但方式略有不同。

安装Optimole图像优化插件

安装Optimole 很容易。您需要使用电子邮件注册它才能激活它，但除此之外，它非常易于使用。

还有一个免费版本，我们在这个例子中使用。

1. 登录您的 WordPress 网站
2. 从侧面菜单中选择插件并添加新的
3. 使用右上角的搜索框搜索“optimole”
4. 出现选项时选择安装并激活

系统将提示您注册一个 API 密钥，您需要这样做才能使用它。

1. 在第一个 Optimole 窗口中选择 Register & Email API Key 选项
2. 将您通过电子邮件收到的 API 密钥粘贴到框中并确认
3. 如果没有出现该窗口，请选择媒体> Optimole将其调出

您将看到一个连接屏幕，将您的插件与 Optimole 服务器同步。完成后，您现在应该可以使用 Optimole 的免费功能来优化您的图像了。

使用 Optimole 优化图像

现在 Optimole 已经启动并运行，让我们优化图像。

好消息是，Optimole 会自动优化您上传的任何新图像。您不需要做任何事情，因为插件会在后台自动扫描和优化。

Optimole 还将优化已上传到 WordPress 的所有现有图像。它不会自动执行此操作。相反，它会在首次访问页面或帖子时优化图像。

这样，您就不会一次重载插件，并且可以更有效地优化图像。

它将您的原始图像传输到云端，并在优化后将其初始链接替换为自定义链接。优化后的图像通过 CDN 渲染，更快地交付它们。

当您访问带有图片的页面时，您会注意到该图片将显示自定义 Optimole URL（右键单击>在新选项卡中打开图片）。

自动设置非常好，但您可以在通过媒体> Optimole >设置选项卡访问的设置菜单中更改它们。

设置选项卡允许您配置插件选项。免费用户在这里不能做太多事情，但如果您是高级用户，您可以通过窗口左侧的“常规”和“高级”链接访问许多选项。

图像优化插件的好处

图像优化插件的好处很多，但它们主要用于缩小图像文件大小以提高页面加载速度。

如上所述，您可以手动执行此操作，但您也可以使用插件为您完成繁重的工作。当插件可以自动为您完成时，为什么要手动更改每个图像？

一些插件的另一个好处是使用 CDN。Optimole 不是唯一使用 CDN 的图像优化，其他的也提供类似的功能。

内容交付网络不是您的 Web 服务器发送所有页面和媒体，而是在世界各地托管您网站的副本。智能路由意味着离访问者最近的 CDN 将发送数据，减少等待时间并改善客户体验。

图像优化测试——之前和之后

现在，让我们做一些测试，看看自动图像优化的效率如何。

默认情况下，WordPress 会缩小高分辨率图像，但让我们看看如何使用图像优化插件进一步缩小它们。

因此，让我们使用相同的图像进行前后实验。

图像优化前的结果

使用一个测试 WordPress 实例和二十二十个默认主题，我们上传了几张从MyStock.photos借来的不同尺寸的照片。我们通过图库块将图像包含在常规博客文章中。

现在，如果您单击每张图片将其放大，您会注意到 WordPress 默认调整了它们的大小。所以我们上传的四张图片缩小如下：

7.47 MB​​ > 676 KB

12.3 MB > 762 KB

11.2 MB > 384 KB

8 MB > 794 KB

如果您将第一张图片上传到常规帖子类型，并且没有放大它的选项，则其显示大小将从 7.47 MB​​ 更改为 452 KB。

默认情况下，WordPress 会将在单个帖子中上传的图像从 7.47 MB​​ 减少到 452 KB。

如果您通过手机访问同一篇博文，图片将减少到 92.61 KB。

因此，当您通过桌面和移动设备访问博客文章时，这些​​是 WordPress 默认所做的更改。

Optimole 图像优化后的结果

现在，让我们看看 Optimole 如何压缩您的图像。就像我们在测试的第一部分中所做的一样（没有 Optimole），我们通过上传从 MyStock.photos 拍摄的相同未优化图片创建了一个图库块。

Optimol 有四个压缩级别。如果您选择“高”，则压缩将保持图像质量尽可能高。

如果你选择 Low，压缩和优化会更加剧烈（它会在更大程度上减小尺寸）。

一旦您访问实时网站上的帖子，Optimole 会立即接管并为您点击的每张图片创建一个压缩替代品（每张图片都可以放大）。

使用高质量压缩，图像被缩小如下（这些是相同的图像，在之前的测试中以相同的顺序列出）：

7.47 MB​​ > 557 KB

12.3 MB >548 KB

11.2 MB > 220 KB

8 MB > 547 KB

使用低质量压缩，结果是不同的：

7.47 MB​​ > 251 KB

12.3 MB > 269 KB

11.2 MB > 124 KB

8 MB > 302 KB

这是列表中的第一个图像在高压缩级别和低压缩级别（质量级别）之后的外观：

高质量级别 (557 KB)

低质量级别 (251 KB)

用肉眼，您可以注意到图像的质量没有太大变化。

现在，如果您在没有放大选项的情况下将图像添加到博客文章中，它将自动缩小到其最大显示尺寸（博客文章所需的最大显示尺寸）。

例如，仅此图像就从 7.47 MB​​ 转换为 75.3 KB（高质量压缩），同时显示在单个博客文章中：

单个帖子图像压缩到 75.3 KB

580 x 387 像素

这很好，因为当首选较小尺寸时，您的服务器不需要加载图片的完整尺寸。

但这发生在桌面上。对于移动屏幕，Optimole 将创建图像的替代版本，甚至比桌面版本更小。

因此，如果有人从移动设备访问您的网站，Optimole 将不会提供图像的桌面版本，即使经过优化，在较小的设备上加载仍然需要时间。该插件实际上为该图像提供了一个单独的移动替代方案。

上面博客文章中的同一张图片对于移动用户来说减少到了 20.15 KB（原来是 7.47 MB​​）。

Optimole 使用无损和有损压缩方法，这些方法是根据您选择的压缩级别设置的。

通过无损优化，图像在压缩过程中不会丢失大量数据。优化后它们看起来就像原始版本一样。这就是为什么无损优化不会减少磁盘空间的原因，压缩后大小的差异几乎为零。

另一方面，有损优化实际上可以在很大程度上减小图像的大小，但不会降低质量（如肉眼所见）。

因此，如果您希望使您的数据库比现在更轻，您可以进行有损优化，因为您的访问者不会注意到转换。

其他优化图像的方法

除了调整大小之外，还有一些其他方法可以为访问者提供更轻的图像并改善网站的加载时间。

延迟加载

延迟加载是另一种有助于防止图像减慢网站速度的方法。如果您有大量图片的帖子或页面，一次显示它们可能不是一个好主意。

当用户向下滚动页面时，延迟加载功能将逐渐显示它们。每次滚动时，都会在用户屏幕的可见区域显示一批新的图像，因此服务器将更好地响应所有请求。

SVG 和矢量图像

SVG 是可缩放矢量图形或矢量图像。PNG 和 JPEG 是基于光栅的，而 SVG 则纯粹基于数学。这意味着它们可以无限放大或缩小，同时保持较小的文件大小。

SVG 是理想的，因为相同的图像可以在不同的屏幕尺寸上呈现，而不会丢失细节或失真。它们还需要更少的 HTTP 请求来加载，并且可以被搜索引擎理解，这提供了一个小的 SEO 好处。

使用内容交付网络 (CDN)

CDN 是一种使用离访问者最近的服务器为您的网站提供服务的服务，这意味着更快的加载时间。Optimole 带有一个集成的图像 CDN 服务，它可以自动运行。

Cloudflare和StackPath是独立的 WordPress 插件，可为您的整个数据库提供 CDN 服务，以防您需要全站点优化。

将 GIF 转换为视频

为了节省磁盘空间并显示较轻的文件，您还可以将 GIF 转换为视频。如果您在 Optimole 中激活此功能，它将自动开始转换您上传的每个 GIF 文件。

可用的视频格式是 MP4 和 WebM，插件将在转换过程中为每个特定情况选择更有效的格式。

还有一些在线工具可用于将 GIF 转换为 MP4，然后再将其上传到 WordPress 网站。为什么要转换？因为 GIF 格式比视频格式大。

智能裁剪

智能裁剪意味着剪掉图像的不必要的空间或背景，只保留感兴趣的点。

裁剪可以手动完成，也可以使用像Optimole这样的插件来完成，它会自动检测图像中的“热点”并删除不需要的部分。

包起来

图像优化是一种简单的技术，如果您使用插件，则不需要太多努力，如果您手动执行，则只需适度的努力。

只要您优化所有图像，您如何做到这一点并不重要。只要你这样做。

大文件会减慢网页速度，这是没有人想要的。谷歌会因为页面速度慢而惩罚你，用户也会。

网络上的竞争太激烈了，任何潜在的优势都无法让你错过。当图像优化如此有效，但实施起来又如此简单时，您真的应该考虑一下！