如何为 WordPress 优化图像 [终极指南]

如果您有一个 WordPress 网站，您就会意识到维护它的困难。 有时，您可能会花费数小时在只需几分钟即可完成的事情上。 如果您的网站由于图像太大或优化不佳而变得缓慢且臃肿，则可能会发生这种情况。

此外，使用搜索引擎优化技术将帮助访问者找到您并将其保留在您的网站上。 为网络优化图像就是其中一种做法。

每当您设计或编辑图像时，将每个像素视为可能的优化区域。 将像素视为单独的部分需要时间和精力，但值得付出努力。

但是，有几种方法可以优化 WordPress 中的图像。 请记住，目标是在不影响图像质量的情况下减小文件大小。

这篇文章将教您如何优化您的 WordPress 图片并为其他活动腾出更多时间。

什么是图像优化？

这是在不影响其质量和应用适当的图像 SEO 技术的情况下减小图像文件大小的过程。 优化后的图像更容易存储在硬盘上或上传到 Internet。 此外，由于下载速度慢，它的潜在问题更少。

图片的大小对网站的加载时间有重大影响。 通常，图像越大，访问者的浏览器加载所需的时间就越长。 这可能会让您的访问者感到沮丧，并可能导致他们离开您的网站。

您应该遵循一些基本的优化提示，以确保您的图像针对性能进行了优化。

图像优化的好处

要成为一名成功的网站管理员，您需要了解图像在网站上的工作原理。 您可能还需要不时优化某些图像。

图像优化的好处是：

• 更快的页面加载时间：优化的图像加载速度快，转化为加载速度更快的网站。 这对于移动用户来说尤其重要，他们更有可能放弃加载时间过长的网站。
• 改进的 SEO 排名：优化的图像也有助于您网站的 SEO 排名。 谷歌使用页面加载速度作为排名因素，因此优化图片可以帮助您在搜索结果中排名更高。
• 减少带宽使用：优化的图像使用更少的带宽，这可以节省您的托管费用。
• 改进的用户体验：优化良好的网站可提供更好的用户体验，更快的页面加载和更好的搜索引擎性能。
• 减少移动下载时间：优化的图像还有助于使您的网站适合移动设备，这对于谷歌在移动搜索中的排名至关重要。
• 客户满意度：更好的用户体验可以提高客户满意度，从而带来更高的销售额和更多的回头客。

为 Web 优化图像的 14 个基本要素

在优化图像以供 Web 使用时，最好考虑许多因素。 有许多不同的文件类型和几种不同的方法来优化它们。 以下是优化 Web 图像时需要考虑的一些事项。

质量与尺寸：

图像的质量始终很重要，但在针对 Web 使用进行优化时，您还应该考虑文件大小。 最好在不牺牲质量的情况下将图像的文件大小保持尽可能小，以加快网页的加载时间。

网络上图像的标准分辨率是72 DPI（每英寸点数）。 因此，建议将图像保存为JPG 而不是 PNG，因为这种文件类型较小。

此外，最好在不影响图像质量的情况下使用尽可能低的颜色深度。 标准颜色深度是 24-bit ，可以在文件的属性中更改。

图像文件格式：

要确定选择哪种图像格式，有必要了解不同的图像及其用途。 您应该将文件另存为JPG格式，但在优化Web 图像时，请选择 PNG-8 或 PNG-24。

通常，PNG 文件最适合具有大量颜色和透明背景的图像，而 JPEG 文件最适合具有大量细节的图像。

因此，您应该对具有透明背景的图像使用 PNG 格式，对具有大量细节的图像使用 JPEG 格式，以优化 Web 图像文件。

文件大小和尺寸：

在为 Web 优化图像时，要考虑的两个主要因素是文件大小和尺寸。 最好先尝试其中一个因素，然后再更改另一个因素，这样您就可以看到哪些因素有助于您实现更小文件大小或更大图像的目标。

较大的图片文件可能会导致网站运行缓慢，因此在上传图片之前需要调整图片大小。 网页上图像的推荐尺寸为600-800 像素宽和 500-600 像素高。

任何比这更重要的东西很可能会导致浏览器调整图像大小，从而导致质量下降。

Rank Math非常适合自动调整图像的分辨率。 它将为您添加图像尺寸，因此您不必担心它的尺寸。

改善图像搜索引擎优化：

您上传到网站的每张图片都应作为搜索引擎的信息来源。 具有更多细节的图像文件更适合搜索引擎优化。

最引人注目的图像 SEO 做法是：

• 优化图片标题文本：保存图片时，一定要给它们提供信息丰富的标题。 当光标悬停在图像上时，它将显示为工具提示。 此外，有利于搜索引擎学习图像。
• 使用 Alt 标签：搜索引擎在索引图像时也使用 alt 标签。 alt 标签文本应针对每张图片进行定制，并尽可能准确地描述图片中的内容。
• 使用正确的图像文件名：如果可能，您的图像文件名也应该是描述性的并包含关键字。 使用图像编辑软件时，请使用描述性文件名保存图像。

注意-如果您使用 Rank Math WordPress 插件，您的图像将针对 SEO 进行优化，并且图像文件名和 alt 标签将自动包含关键字。

适当的压缩：

这是优化图像时要考虑的另一个关键因素。 在将图像上传到服务器之前，您应该尽可能地压缩它们。

您需要使用 Photoshop 或 GIMP 等压缩工具来执行此操作。 或者，您可以使用TinyJPG和ImageOptim等免费工具。 始终建议在您的网站上使用压缩图像以加快加载时间。

或者，您可以使用 ShortPixel 或 WP-Optimize 等插件在将图像上传到您的网站时自动压缩它们。 建议任何寻求优化其网站上图像的人使用这些插件。

压缩图像时应牢记以下事实：

• 有损：有损压缩是一种从图像中删除一些数据以使文件更小的压缩类型。 这种类型的压缩通常用于不会有任何明显质量损失的图像。
• 无损：无损压缩是一种在不降低内容质量的情况下删除一些冗余信息的压缩形式。 这种压缩类型通常用于压缩后需要保持其质量的图像，例如无损 JPEG 图像。

您可以从 ShortPixel 的博客中了解有关有损广告无损压缩的更多详细信息。

以下一代格式提供图像：

默认情况下，浏览器会尝试以与保存时相同的格式加载图像。 例如，当 URL 包含 .jpg 时加载 JPEG 图像。 但是，您可以强制浏览器使用正确的文件扩展名加载不同的图像格式。

例如，如果您有一个 JPEG 图像，您可以将扩展名更改为 .png，然后浏览器将加载该图像。

您可以使用 JPG to PNG WordPress 插件来做到这一点。 使用此插件，您将自动将所有 JPG 图像转换为 PNG 文件。 您可以按照如何在 WordPress 中将 PNG 图像转换为 JPG 的指南进行操作。

您可以使用 GtMatrix 或 Google 页面速度洞察工具轻松找到下一代格式的服务图像。

注意 -通常，将图像保存为两种类型的文件以供识别不同文件扩展名的浏览器查看是明智的。 通过这样做，如果文件无法加载，您可以用 PNG 替换损坏的 JPEG，而无需重新上传图像。

使用 CSS Sprite 组合图像：

图像的组合传统上是使用图像编辑软件进行的。 但是，现在发现CSS sprites 方法也可以用于组合图像。

该过程涉及创建一个空图像并在不同位置加载您希望组合到其中的图像。 然后，使用 CSS，这些单独的图像中的每一个都可以定位在新图像的相同区域上。

因此，浏览器可以下载单个图像文件而不是多个图像。 这对于移动设备尤其重要，因为它们的互联网连接速度通常较慢。 您可以使用 CSS 精灵生成器来完成此操作。

禁用图片盗链：

热链接图像意味着任何人都可以获取您的图像并将其发布在他们的网站上。 结果，您将遇到令人讨厌的带宽损失，因为图像将从您的服务器下载到另一台服务器。 您可以通过对图像使用热链接保护来防止这种情况。

您可以通过您的 cPanel 帐户配置图像盗链保护。 这个过程非常简单。

• 您将在“安全”选项卡下看到一个标有“热链接保护”的图标。
• 单击此图标可访问以下窗口。
• 单击启用按钮以防止您的图像被热链接。

注意 -如果您是 Cloudflare 用户，您可以通过启用“热链接保护”选项来防止您的图像被热链接。

缓存图像：

对于任何网站，这都是必不可少的。 您应该缓存您的图像，以便人们可以更快地查看它们。 在大多数情况下，现有网站访问者会将其缓存在他们的浏览器中，但如果您的主机出现问题，您可能需要单独设置它。

每当您使用托管服务安装 WordPress 时，托管服务提供商都会为您处理所有缓存。 您还可以安装缓存插件。

WP Rocket 是缓存图像的理想插件，因为它易于使用和安装。 您只需安装并激活它，然后您就可以开始了。 当然，还有其他缓存插件，但 WP Rocket 是此目的的首选。

缓存头像：

gravatar 是一个小图标，在网络上跟随您的电子邮件地址。 例如，当您在另一个 WordPress 博客上发表评论时，您的 Gravatar 会显示在它旁边。

Gravatar 服务生成 Gravatar，将它们缓存在其服务器上。 因此，如果你评论了大量的博客，甚至是一些高流量的博客，你的 Gravatar 就会被缓存在 Gravatar 的服务器上。

因此，您的 Gravatar 将在所有这些博客上快速加载。 但是，另一方面，它也可能是一个缺点，因为如果 Gravatar 服务不可用，或者您的 Gravatar 从您评论过的博客中删除，您的 Gravatar 将从所有这些博客中消失。

用一张全面的图片来定制一个 Gravatar 是非常没有吸引力的。 这是因为如果您的自定义 Gravatar 未显示在这些博客上，则将使用默认 gravatar，这可能不合适。

这个问题有两种可能的解决方案：

• 使您的 Gravatar 尽可能小。 较小的图像将比较大的图像加载更快并且消耗更少的带宽。
• 您应该在您控制的域上托管您自己版本的 Gravatar 服务。 这将需要 Apache Web 服务器、PHP 和 MySQL 数据库来在本地存储 Gravatar，而不是将它们缓存在 Gravatar 服务器上。

从 CDN 提供图像：

如果您的图像由内容交付网络 (CDN) 提供，请务必启用缓存。 因此，浏览器和其他设备不必多次下载相同的图像。

最好在设置 CDN 时考虑如何显示您的图像。 此外，应在您的图像上启用 CDN 重写。 您可以使用 Perfmatters 插件来做到这一点

使用此插件，您可以轻松地将您的站点连接到 CDN 网络。 因此，如果您的站点可以通过内容交付网络提供内容，则您的图像将由 CDN 服务器执行。

您可以使用以下任何 CDN 网络。

• CloudFlare
• 兔子CDN

为您的网站优化图像时不应该做的事情

避免图像 URL 重定向：

如果您在网站上使用 URL 重定向，则会延迟图像的出现。 此外，浏览器不会缓存图像，这可能会导致页面加载延迟。

因此，在为 Web 优化图像时，应避免使用任何 URL 重定向。

避免过期标题：

如果您在图像上使用过期标头，浏览器可能不会缓存它们。 它还会导致浏览器在每次将图像加载到页面时重新请求图像。

如果您想优化它们，您应该避免在您的网站图像上设置任何过期的标题。

避免嵌入图像：

在为 Web 优化图像时，不要在页面上嵌入图像，这一点很重要。 这是因为当您嵌入图像时，浏览器会在显示之前下载整个图像。

这可能会导致您的网站加载缓慢并使访问者感到沮丧。 相反，请使用<img> 标记或 <object> 标记来包含指向服务器上图像的链接。 因此，浏览器只能下载图像文件，而不是整个页面。

最佳图像优化工具：

高质量的内容对于开发专业博客至关重要。 此外，高质量的图像对于博客看起来有吸引力是必要的。 但是，很难找到免费的工具来优化图像而不损失分辨率和设计精美的图像。

因此，我整理了一些最有效的图像优化工具列表，以方便我们的工作。

• TinyJPG：TinyJPG 是一款方便的在线压缩 JPEG 图像的工具。 这个工具的压缩率很高，画质还是很优秀的。
• Toolur：Toolur 是一个有用的在线工具，用于优化网络图像。 它通过减小文件大小而不影响图像质量来优化图像。
• ImageOptim：ImageOptim 是顶级的图像优化工具之一。 该工具通过优化网页上的图像来帮助您提高网站加载速度。 它甚至可以优化已经压缩的图像。
• GIMP：GIMP 是一款出色的图像编辑器，可让您在保持图像质量的同时减小图像文件大小。 它是 Adob​​e Photoshop 的一个有价值的替代品。

WordPress 的最佳图像优化插件

有几种不同的图像优化插件可用于 WordPress。 选择最适合您需求的产品可能很困难。 这是顶级插件的列表。

• EWWW 图像优化器
• 由 WP 火箭队想象
• 短像素图像优化器
• WP Smush
• reSmush.it

您可以使用上面列表中的EWWW Image Optimizer 、WP Rocket Team 的 Imagify 和ShortPixel Image Optimizer 插件。

您应该使用高级插件进行图像优化以获得最佳结果。 如果您想节省一些钱，请尝试EWWW Image Optimizer 。

常见问题

如何在 WordPress 中创建 WebP 图像？

当您使用 WP Rocket 优化站点上的图像时，它会自动将它们保存为 WebP。 相反，如果您希望将 JPG 或 PNG 图像转换为 WebP 图像，您可以使用插件来实现。

您可以为此使用以下任何插件。

• 用于媒体的 WebP 转换器
• WebP快递

我用于 WebP 的一个很棒的插件是 WP Speed Matters 的 Flying Images。 它适用于任何主题并处理一切。 此外，它允许您创建所需的任何大小的 WebP 图像，并提供免费的图像 CDN 服务，这是一个显着的好处。

如何延迟屏幕外图像？

在 JavaScript 中可以使用 defer 属性来加载屏幕外图像，从而允许浏览器更快地呈现初始页面加载。 这需要开始和结束标签。 例如：

<img src=”image-source.png” alt=”” width=”100px” height=”100px” title=”Some tooltip text” data-defer=”offscreen-image.jpg” />

注意 - Defer仅支持 HTML5，不支持 XHTML。

通过使用诸如 Perfmatters 之类的 JavaScript 插件，您可以延迟图像的加载。 因此，您可以将 img 标签更改为您想要的任何元素，例如 div。

<div data-defer=”offscreen-image.jpg”></div>

如何修复延迟离屏图像？

• 延迟加载图像。
• 延迟加载背景图像。

首屏上方的图像应从延迟加载中排除，以确保用户快速注意到它们。 但是，要解决 WordPress 站点上的延迟离屏或延迟加载图像，您可以使用 Perfmatters 插件。 该插件允许您通过延迟加载屏幕外图像来提高 WordPress 网站的加载速度。

注意-您可以使用 WP Rocket 插件启用图像延迟加载。 所以你可以使用它们中的任何一个。

综上所述

WordPress 是一个功能强大的内容管理系统，可让您创建和管理自己的网站。 但是，如果没有适当的工具，为 WordPress 优化图像可能会很困难。

为 WordPress 优化图像的问题在于有很多不同的方法可用。 例如，您可以使用插件、在线工具，甚至您自己的软件。

为 WordPress 优化图像的最有效方法是结合所有这些技术。 此外，您可以使用一个插件来识别哪些图像需要调整大小，您也可以手动调整它们的大小。

除了优化 WordPress 的图像大小外，您还应该优化每个帖子的文件数量。 尝试使用高级插件来优化图像和网站速度。 因此，您将能够开发一个用户友好、快速、高效的网站。