优化您的图像，不再浪费时间

根据 HTTPArchive 的数据，平均网站大小在 5 年内几乎翻了一番，从 2014 年的 1MB 增加到 2019 年的 2MB。当然，互联网访问速度比以往任何时候都快，但是，为什么现在网站这么大？ 答案部分在于一般的多媒体资产，尤其是图像。

网站不再是简单的文本页面已经很久了。 它们现在是动态的，充满了图像、视频、GIF……我们希望所有这些资产在具有巨大分辨率的屏幕上看起来漂亮而清晰。

如果您的网站加载速度非常慢并且您从未优化过图片，我有一个好消息：今天您将学习如何加快 WordPress 的速度。 让我们看看您可以使用哪些工具来提高网站性能并防止图像妨碍用户体验。

为什么图像优化很重要

在解释可用于优化图像资产和加速您的网站的不同方法之前，我想花几分钟让您相信这样做的重要性。

图像对网页的整体大小有巨大影响

正如我一开始所说，网站上图像的权重占总数的重要百分比。 例如，考虑这篇博文：DevTips – How to Stop WordPress From Guessing URLs。 这是一篇相当短的文章，不到 400 字，它为一个明确的问题提供了一个快速的解决方案。

根据 GTMetrix 的说法，加载这篇文章使用了 850KB 的数据。 但是为什么这么短的帖子会使用这么多数据呢？ 嗯，图片是这个问题的部分原因：仅帖子的特色图片就超过 200KB，占总数的 25%。

移动流量

根据 statcounter 中的数据，52% 的网络流量来自移动设备，45% 来自桌面。 这就是为什么今天如此强调使用在小屏幕上运行良好的响应式设计。

正如您自己所经历的那样，移动设备上的互联网连接并不总是很好（特别是如果您在通勤或在地下）。 根据 Statistia 的数据，2019 年的平均速度约为 14 Mbps。 因此，如果我们想加快移动网站的速度，我们必须尽可能地减轻它们的重量，包括它们的图像。

存储和数据传输成本

您应该担心使用具有适当尺寸的图像的另一个原因是金钱。 托管服务提供商提供计划的标准包括您的网站使用的磁盘空间量以及您从其服务器发送给访问者的数据量。 使用的磁盘空间越多，发送的数据越多，您支付的费用就越多。

通过减小图像的大小，您会减少这两个因素，并且每个月都会节省一些钱？

图像优化操作

既然您知道为什么要担心优化图像，那么让我们看看您可以做些什么来加速您的 WordPress 网站。

#1 上传适当缩放的图像

上传直接从全新数码单反相机中剥离的照片的人数之多令人惊讶。 问题是，任何用数码单反相机拍摄的照片对于网站来说都可能太大太重。

您要做的第一件事是在将图像上传到您的网站之前将它们缩小到合理的大小。 例如，在我们的网站上，我们通常上传的最大图片是我们帖子的特色图片。 我们决定将这些图像限制为仅 1200x800 像素。 在另一篇文章中，我解释了一种在上传图像之前快速缩放和压缩图像的方法。

#2 调整您的主题以生成适当的缩略图

当您将图像上传到 WordPress 时，WordPress 会生成多个缩略图。 这些缩略图由您的主题定义，因为您的主题知道何时需要更大或更小的图像版本。

例如，我们的特色图片是 1200x800 像素。 在查看帖子本身时，这些尺寸非常有用：

对于这样的事情来说，这显然太多了：

这就是为什么对于这种特殊情况，我们的主题注册了一个新的缩略图大小，它只有 480x320 像素，并用于帖子列表屏幕。

如果您认为您的主题没有生成适当的缩略图，我建议您阅读 WordPress 文档以了解如何使用set_post_thumbnail_size定义缩略图的大小，甚至如何使用add_image_size定义其他缩略图。

而且，与往常一样，如果您需要这方面的帮助，请在下面的评论部分告诉我，我很乐意提供帮助（甚至写一篇关于它的帖子？）

#3 巧妙地使用图像尺寸

WordPress 会为您在媒体库中拥有的图像生成多个缩略图，以便您的主题可以在每个可能的场景中使用最佳图像。 但有趣的部分来了：在页面和帖子中插入图像时，您也可以使用缩略图。

将图像插入帖子时，请查看侧边栏并选择最适合您需要的尺寸：

例如，如果您要像这样放置一个窄而小的图像，那么一个小图像（300x200px）可能是完美的：

但是对更大的图像使用相同的缩略图会产生糟糕的结果：

最好使用分辨率更高的版本：

#4 使用适当的图像格式

有不同的图像格式，每种格式都有其压缩图像的优点和缺点。 最常用的格式是：

• 巴布亚新几内亚。 用于共享没有任何图片的屏幕截图的绝佳图像格式，例如 WordPress 编辑器的屏幕截图。
• JPG。 世界上使用最广泛的格式之一。 它几乎适用于任何类型的摄影，允许非常高的压缩比。 然而，它并不完美：如果照片的边缘非常锐利（例如，如果有文字或图画），您将不得不使用较低的压缩率，否则图像可能会出现难看的伪影。
• GIF。 互联网（和社交媒体平台）之王。 这是一种允许动画的格式类型。 老实说，我认为我们现在使用的所有“GIF”实际上都是（短）视频，它们提供更好的压缩比和更高的质量……

#5 删除未使用的图像

随着时间的推移，很容易在您的 WordPress 网站中保留许多没有人在任何地方使用的旧图像。 如果您想快速删除它们，Toni 在这篇文章中解释了如何删除它们。

#6 启用延迟加载

那么，图像会减慢您的网站速度，对吗？ 为什么我们不简单地告诉网站不要加载图像，除非它是绝对必要的？ 那会加快速度，不是吗？ 进入延迟加载。

延迟加载是一个非常简单的想法：直到它应该在访问者的浏览器中可见时才会加载图像。 例如，如果我们的网站在页脚中有某个图像，为什么我们需要在用户到达我们网站的末尾之前加载它？ 等到他们到达那里，一旦他们到达，加载图像（如果他们没有，保存图像加载！）

WordPress 有许多延迟加载插件。 一些托管服务提供商（如 SiteGround 活动）在其安装中包含此选项。 只需在仪表板中查找该选项并启用它。

我希望今天的帖子可以帮助您稍微提高 Web 加载速度。 很少有事情可以这么容易修复并呈现如此好的结果。 干杯和好运！

Unsplash 上 Icons8 团队的特色图片。