如何为 WordPress 优化图像

您愿意（并且应该）在您的 WordPress 内容中包含图片的原因有很多。 图片有助于保持读者的参与度。 它们也是分解长篇内容和改进搜索引擎优化 (SEO) 的一种方式。 但是，它们也会降低您网站的速度。

幸运的是，有很多资源可以帮助您优化图像。 这意味着您将更有可能克服可能不利于网站整体成功的缓慢页面速度。

在本文中，我们将探讨大图片为何会拖累您的网站。 然后我们将探讨如何有效地压缩您的媒体文件，以及一些可以改善您网站的 SEO 的基本图像优化技巧。

为什么你应该为 WordPress 优化你的图像

图片是任何内容策略中有价值且重要的一部分。 但是，它们也可能是导致页面加载时间缓慢的主要原因之一。

一个缓慢的网站是一个问题，因为它可以赶走用户。 事实上，加载时间为 5 秒或更长时间的页面平均会增加 90% 的用户跳出率（仅查看一个页面后离开）。

虽然有多种因素会降低您的网站速度，但图像和媒体文件在现代网站上占用了高达 63% 的带宽。 因此，优化您上传到站点的图像非常重要。

还值得注意的是，网站速度是谷歌排名的一个因素。 这意味着您的页面加载速度的快慢在某种程度上决定了它在搜索结果中的排名。 影响您的 PageRank 的因素有很多，图像属于“网页的可用性”类别。

图像优化实际上是关于改进两件事：

• 用于编码每个图像像素的字节数
• 使用的像素总数。

换句话说，优化意味着您可以从最少的像素和字节中获得最好的质量。 这会减小您的媒体文件大小，并且会对您网站的整体速度产生重大影响。

在上传到 WordPress 之前优化您的图像

最终，您网站的最佳情况是在上传图像之前优化图像。 这样您就不会得到一张图像的重复或多个版本。 这将破坏通过图像优化减轻网站负载的目的。

考虑到这一点，让我们看看在决定如何优化网站媒体时需要考虑的一些因素。

图像文件格式

首先，让我们看一下现有的各种图像格式。 了解它们各自的不同之处以及何时最好使用它们可以帮助您更简化地使用图像。

在线使用的两种最常见的图像格式是 JPEG 和 PNG。 这两种格式都是由像素组成的。 当您更改图像大小时，像素会拉伸，这有时会使图像变得模糊。 但是，这些图像类型具有不同的优点和缺点。

何时使用 JPEG

JPEG 文件是印刷和网络内容的不错选择。 这种图像文件使用所谓的“有损”格式。 将较大的图像转换为 JPEG 时，其文件中包含的某些信息会丢失。

仅显示图像不需要该信息。 然而，它的意思是转换为 JPEG 会导致文件大小更小，但整体图像质量可能会有所牺牲。 幸运的是，质量下降不太明显，尤其是对于较小的图像。

何时使用 PNG

PNG 文件也可用于 Web 内容，就像 JPEG 一样，但方式不同。 例如，由于 PNG 可以具有透明背景，因此它们在设计 Web 图形时更加通用和方便。

PNG 使用“无损”文件格式。 这意味着压缩文件时会保留有关图像的所有信息。 因此，它们往往具有更高的质量，但在文件大小和页面速度方面提供的改进较小。 它们是图形和图标以及非常高质量图像的不错选择。

图片大小

是时候消肿了。 提供缩放图像是优化图像的最简单和最有效的方法之一。 为什么这么有效？ 图像缩放将确保您传送的像素不会超过在浏览器中以预期大小显示资产所需的像素。

许多站点试图提供大的、未缩放的图像并依赖浏览器调整它们的大小，这导致使用额外的资源和站点速度变慢。 如果图像的自然大小是 820×820 像素，而浏览器显示为 400×400 像素……那是 32,400 个不必要的像素！

页面加载的清晰度和速度与显示图像的设备（移动设备、桌面设备等）有很大关系。 例如，4k 图像在 27 英寸显示器上可能看起来不错。

然而，当访问者加载带有该图像的页面时，浏览器将首先以全分辨率呈现文件，然后将其缩小以适合他们的屏幕。 如果他们使用的移动设备不能大于 400 像素，他们很可能会错过您的内容。

考虑到这一点，导出图像时的一些最佳实践包括：

• 通过将图像保存为“网络优化”JPEG 或 PNG，将图像的文件大小保持在几百 KB 以下。
• 图像的 Web 标准是每英寸 72 点 (dpi)，这可以通过以上述格式保存图像来实现。

您可以使用 Photoshop、Lightroom 或类似的编辑器将图像大小缩小到大约 1,500 像素或更小的宽度。 在 Photoshop 中，只需转到“图像”>“图像大小”即可手动调整图像的尺寸和分辨率。 您还可以转到“文件”>“导出”>“为网络保存”以优化您的图像以用于网络上传：

如果您不打算在更大的显示器上显示清晰生动的照片，则可以进一步缩小图像尺寸。

如果使用 Lightroom，请转到“文件”>“导出”以在导出时手动调整图像大小：

图像大小和分辨率只是难题的一部分。 在优化图像时，您还需要了解压缩并有效地使用它。

图像压缩

简而言之，图像压缩是一种最小化图形文件大小（以字节为单位）的方法，同时不会将图像质量降低到不可接受的水平。 正如我们所讨论的，文件大小过大的高分辨率图像会显着影响页面速度。

另一方面，优化后的图像平均比未优化的图像亮 40%。 作为一般规则，您需要在上传过程之前或期间优化您上传到网站的所有图像和其他媒体。

有损与无损压缩

正如我们之前提到的，JPEG 和 PNG 使用两种不同类型的图像压缩。 无损压缩保留原始文件中的所有数据，而不会牺牲质量。

使用无损压缩，您通常会将文件分解为“更小”的形式以供传输或存储。 然后信息会在另一端重新组合在一起，以便再次使用。

另一方面，有损压缩会删除图像文件中包含的一些数据。 这可能会导致质量下降幅度更大，但页面速度也会有更显着的提高。 您甚至可以自定义压缩量，以达到质量和性能之间的平衡。

图像压缩插件

快速加载的图像意味着更快的网站和更好的 SEO。 这里有一些各种图像优化插件可以帮助您进行图像压缩。

Smush 图像压缩和优化

Smush 的图像压缩插件可以调整大小、优化和压缩您的所有网络图像，因此它们的加载速度比以前更快。 如果您的网站照片丰富，那么这个插件是必备的。

短像素图像优化器

ShortPixel 的图像优化器插件压缩所有过去和未来上传到您的媒体库的图像和 PDF。 该插件为大多数文件类型提供有损和无损压缩。 如果您是一名摄影师，您可能会选择使用高质量有损优化算法的光泽 JPEG 压缩。

压缩 JPEG 和 PNG 图像

只想优化 JPEG 和 PNG？ 此插件使用图像压缩服务 TinyJPG 和 TinyPNG 来帮助您进行图像压缩。 JPEG 图像平均压缩 40-60%，PNG 图像压缩 50-80%，质量没有明显损失。

EWWW 图像优化器

EWWW Image Optimizer 具有双重功能。 它既可以优化您网站上的现有图像，也可以处理您上传的新图像。 此外，它还为您提供了对图像压缩方式（以及压缩量）的大量控制。

Kraken.io 图像优化器

最后但同样重要的是，Kraken.io Image Optimizer 还可以方便地优化新媒体和现有媒体。 它支持无损和“智能”有损压缩，可以更轻松地以较小的文件大小获得高质量的图像。

特色图片

特色图片不会插入到 WordPress 帖子的正文中，而是在整个主题中结构化地使用。 例如，它可能显示为帖子标题旁边的缩略图，或者在查看特定帖子时显示在标题中。

大多数主题和小部件都依赖特色图片，因此您不想跳过它。 特色图片允许更大的定制； 您将能够为特定的帖子和页面显示独特的自定义标题图像，或为主题的特殊功能设置缩略图。

一旦您决定了您想要的特色图片的尺寸，该尺寸将对所有未来的特色图片保持不变。 您应该选择的大小取决于您的 WordPress 网站的主题和帖子的布局。

特色图像通常比高度宽，范围从 500 到 900 像素宽。 最好选择高分辨率图像，而不是像素化图像。

专业提示：要控制在将帖子或页面分享到 Facebook 或 Twitter 时显示的媒体，请安装 Yoast SEO 插件。 您不仅可以自定义标题和描述，还可以为每个社交渠道上传正确的图片尺寸。

上传到 WordPress 后优化图像

我们建议您在上传图片之前对其进行优化。 但是，如果那不可能，或者您想优化网站上已有的图像，您仍然可以这样做。 有几种方法可以帮助您优化直播内容。

延迟加载图像

通常，当有人访问网页时，其所有内容都会开始加载。 这意味着，对于内容丰富的页面，可能需要一段时间才能显示所有内容。

“延迟加载”涉及调整网站加载内容的方式。 它指示您的站点首先专注于加载立即可见的文本、图像和其他元素。 只有在那之后，它才会开始加载只能通过向下滚动页面才能访问的内容。 这是加快网站速度和改善访问者体验的好方法。

向您的站点添加延迟加载的最简单方法是通过诸如延迟加载之类的插件。

这是 WP Rocket 的一款工具，可帮助减少一次发送到您站点的 Web 服务器的请求量。 它甚至用占位符图像代替 YouTube 视频，这样实际视频只会在需要时加载。

缓存图片

另一种提高网站速度的方法是通过“缓存”。 这涉及将您网站的一些数据保存在访问者访问起来更容易、更快捷的地方，通常是在离他们所在位置更近的第三方服务器上，或者在他们的浏览器中。

有很多方法可以通过编码、插件和其他工具来实现缓存。 在 WP Engine，我们默认在所有网站上实施强大的缓存。 这有利于减少所有内容对页面速度的影响，而不仅仅是图像。

删除 EXIF 数据

EXIF 数据存储为图像文件的一部分，并包含有关照片拍摄地点和方式的信息。 它由相机自动添加到图像中，通常对于您的网络文件来说不是必需的。

因此，从图像中删除这些数据可以加快页面速度，尽管影响不大。 不幸的是，目前没有更新的插件可以帮助您做到这一点。 因此，如果您在自己的网站上使用了大量照片并且担心 EXIF 数据，则需要向开发人员寻求帮助。

避免图像 URL 重定向

最后，另一个会降低页面速度的因素是图片导致重定向。 这最常发生在他们链接到其他地方时。

因此，您应该避免在您的网站上嵌入来自外部来源的图像。 相反，如果可能的话，将每张图片或媒体直接保存并上传到您的网站。 您可能还想确保您的图像不会链接到任何内容，例如单独的媒体页面。

为搜索引擎优化图像

格式化图像标题是图像优化的另一个重要步骤。 这意味着图像文件名与其内容相关。 当您这样做时，它们更有可能通过搜索引擎出现在相关图像搜索结果中。

这将提高您品牌的知名度和可访问性，并通过在 Google 图片搜索中更频繁地列出您网站的图片来增加您网站的访问量。 图像优化只需要很少的时间，并且可以对您网站的流量产生巨大影响。

这里有一些额外的提示，可以帮助您的图片排名更高。

替代文字

替代文本，也称为“替代文本”或“替代标签”，是一种添加到 HTML 图像中的属性。 替代文字通过描述图像包含的内容及其目的，帮助搜索引擎了解您的图像的含义。

Google 依靠替代文本来确定图像是什么，因为它“看到”的只是 HTML 标记中的内容。 当您为图像使用强有力的描述性替代文本时，您更有可能在搜索结果中看到您的网站被适当地列出。

在 WordPress 中，您可以通过两种方式向图像添加替代文本。 首先，您可以将其添加到已放置在帖子中的图像中，方法是单击图像并使用屏幕右侧的“图像设置”选项。

或者，您也可以通过访问“媒体”>“资料库”并选择您想要的图像来向图像添加替代文本。 然后，只需将您的替代文本添加到该图像的替代文本字段。

标题标签

标题标签类似于 alt 标签，但它们适用于人类读者，而不是搜索引擎机器人。 良好的标题标签优化可以帮助视障用户访问您的网站。

创建 XML 图像站点地图

让 Google 注意到您的图片的另一种方法是创建站点地图并提交。 对于搜索引擎无法抓取的图像，这是一个不错的选择。

例如，我们正在谈论由 JavaScript 加载的图像。 站点地图为搜索引擎提供有关您网站上可用图像的更多信息，以便他们可以更准确地理解和索引您的内容。

在 WordPress 中，以下插件可以帮助您创建站点地图：

• 谷歌 XML 站点地图
• 酵母搜索引擎优化
• 多合一 SEO 包
• Udinra 所有图像站点地图

对于非 WordPress 网站，还有一些工具可以帮助创建站点地图，包括 Screaming Frog、Dynomapper 等。 创建站点地图后，您将希望通过 Google 的网站管理员工具提交它。

图像放置和标题

最后但同样重要的是，让我们看看视觉效果在博客文章或网页中的位置。 您将图片放在帖子中的位置会对帖子在 Google 上的排名产生重大影响。

例如，如果您将图片放在更靠近关键字词组的位置，它的排名可能会更好。 另外，请注意，在图像中添加关键字丰富的说明也算作搜索文本，有助于更好地进行图像搜索引擎优化。

使用 WP Engine 优化您的 WordPress 网站

在改进您的网站时，图像优化涵盖了很多方面。 优化可以帮助提升用户体验，并将您的加载时间保持在 5 秒以内。 在 WP Engine，我们了解图像优化为您的网站带来的价值。 这就是我们提供专门托管的 WordPress 托管环境的原因。 这意味着您将获得专家支持以及触手可及的综合优化工具和资源！