首页 » 博文 » wpbeginner » 初学指南 » 如何在不损失质量的情况下优化图像以提高 Web 性能

如何在不损失质量的情况下优化图像以提高 Web 性能

您是否知道在将图像上传到 WordPress 之前对其进行优化会对您的网站速度产生巨大影响?

开始一个新博客时,许多初学者只是简单地上传图像,而没有针对网络进行优化。这些大图像文件会使您的网站变慢。

您可以通过使用图像优化最佳实践作为常规博客例程的一部分来解决此问题。

在本文中,我们将向您展示如何优化图像以获得更快的网络性能而不损失质量。我们还将分享 WordPress 的自动图像优化插件,可以让您的生活变得轻松。

如何轻松优化网络图像(不损失质量)

由于这是有关网络图像优化的综合指南,因此我们创建了一个易于理解的目录:

  1. 什么是图像优化?
  2. 图像优化有什么好处?
  3. 如何保存和优化图像以提高 Web 性能
  4. 最佳图像优化工具和程序
  5. WordPress 最佳图像优化插件
  6. 图像优化的最终想法和最佳实践

1. 什么是图像优化?

图像优化是以尽可能小的文件大小保存和交付图像而不降低整体图像质量的过程。

虽然这个过程听起来很复杂,但现在实际上非常简单。您可以使用众多图像优化插件和工具之一自动将图像压缩高达 80%,而不会造成任何明显的图像质量损失。

以下是优化与未优化图像的示例:

WordPress 中优化与未优化的图像

正如您所看到的,如果优化得当,同一张图像最多可以比原始图像小 80%,而质量不会有任何损失。在此示例中,图像小了 52%。

图像优化如何工作?

简单来说,图像优化是通过使用压缩技术来实现的。

压缩可以是“有损”或“无损”。

无损压缩可减少整体文件大小,并且绝对不会损失图像质量。使用有损压缩,质量可能会略有下降,但理想情况下,访问者不会注意到。

优化图像意味着什么?

您可能已收到来自 WordPress 托管支持或速度测试工具的优化图像的建议,并且想知道您需要做什么。

您需要通过针对网络优化图像来减小图像的文件大小。我们将向您展示如何逐步执行此操作。

2. 图像优化有什么好处?

虽然优化图像有很多好处,但以下是您应该了解的最重要的好处:

  • 更快的网站速度
  • 提高 SEO 排名
  • 销售和潜在客户的整体转化率更高
  • 更少的存储和带宽(可以降低托管和 CDN 成本)
  • 更快的网站备份(可以降低备份存储成本)

图像是网页上仅次于视频的第二重项目。根据HTTP 档案图像平均占网页总重量的 42%

由于我们知道快速的网站在搜索引擎 (SEO) 中排名更高并且具有更好的转化率,因此图像优化是每个商业网站如果想在网上取得成功就必须做的事情。

现在您可能想知道图像优化到底能带来多大的改变。

根据 Strangeloop 的研究,网站加载时间延迟一秒可能会导致销售额下降 7%、浏览量减少 11%、客户满意度下降 16%。

奇怪循环案例研究

如果这些还不足以加速您的网站,那么您应该知道像 Google 这样的搜索引擎也会对加载速度更快的网站给予优先的 SEO 处理。

这意味着通过优化网络图像,您可以提高网站速度并提高WordPress SEO 排名

视频教程

https://www.youtube.com/embed/DHtLC2SDIFM?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent订阅 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您更喜欢书面说明,请继续阅读。

3. 如何保存和优化图像以提高 Web 性能

成功进行网络性能图像优化的关键是在最小文件大小和可接受的图像质量之间找到完美平衡。

在图像优化中发挥巨大作用的三件事是:

  • 图像文件格式(JPEG、PNG、GIF)
  • 压缩(更高的压缩=更小的文件大小)
  • 图像尺寸(高度和宽度)

通过选择三者的正确组合,您可以将图像尺寸缩小多达 80%。

让我们更详细地看看其中的每一个。

1. 图像文件格式

对于大多数网站所有者来说,唯一真正重要的三种图像文件格式是 JPEG、PNG 和 GIF。选择正确的文件类型在图像优化中起着重要作用。

为了简单起见,您希望对具有多种颜色的照片或图像使用 JPEG,对简单或透明图像使用 PNG,仅对动画图像使用 GIF。

对于那些不知道每种文件类型之间差异的人来说,PNG 图像格式是未压缩的,这意味着它是更高质量的图像。缺点是文件大小要大得多。

另一方面,JPEG 是一种压缩文件格式,会稍微降低图像质量,以提供更小的文件大小。

而 GIF 仅使用 256 色以及无损压缩,这使其成为动画图像的最佳选择。

在 WPBeginner 上,我们根据图像类型使用所有三种图像格式。

2. 压缩

接下来是图像压缩,它在图像优化中发挥着巨大作用。

有不同类型和级别的图像压缩可用。每个设置将根据您的图像压缩工具而有所不同。

大多数图像编辑工具(例如Adob​​e PhotoshopON1 Photo、GIMP、Affinity Photo 等)都具有内置图像压缩功能。

您还可以正常保存图像,然后使用TinyPNGJPEGmini等网络工具来更轻松地进行图像压缩。

尽管需要一些手动操作,但这两种方法允许您在将图像上传到 WordPress 之前对其进行压缩,这就是我们在 WPBeginner 上所做的。

还有一些流行的 WordPress 插件,例如OptimoleEWWW Image Optimizer,可以在您首次上传图像时自动压缩图像。这很方便,许多初学者甚至大公司更喜欢使用这些图像优化插件。

我们将在本文后面分享更多有关使用 WordPress 插件的信息。

3. 图像尺寸

通常,当您从手机或数码相机导入照片时,它具有非常高分辨率和大文件尺寸(高度和宽度)。

通常,这些照片的分辨率为 300 DPI,尺寸从 2000 像素及以上开始。虽然高质量照片非常适合印刷或桌面出版,但它们的大尺寸使其不适合网站。

将图像尺寸减小到更合理的尺寸可以显着减小图像文件的大小。您可以使用计算机上的图像编辑软件简单地调整图像大小。

例如,我们优化了一张分辨率为300 DPI、图像尺寸为4900×3200像素的照片。原始文件大小为 1.8 MB。

我们选择 JPEG 格式以获得更高的压缩率,并将尺寸更改为 1200×795 像素。文件大小减少至仅 103 KB。这比原始文件大小小 94%。

现在您已经了解了图像优化的三个重要因素,下面让我们来看看适合网站所有者的各种图像优化工具。

4. 最佳图像优化工具和程序

正如我们之前提到的,大多数图像编辑软件都带有图像优化和压缩设置。

除了图像编辑软件之外,还有一些功能强大的免费图像优化工具,您可以使用它们来优化网络图像(只需单击几下)。

我们建议您在将图像上传到 WordPress 之前使用这些工具来优化图像,特别是如果您是完美主义者。

此方法可以帮助您节省 WordPress 托管帐户上的磁盘空间,并且由于您手动检查每个图像,因此可以保证速度最快且质量最好的图像。

Adobe Photoshop

Adobe Photoshop是一款高级图像编辑应用程序,可让您以较小的文件大小导出图像以供网络使用。

导出网络图像

使用导出对话框,您可以选择提供最小文件大小的图像文件格式(JPG、PNG、GIF)。

您还可以降低图像质量、颜色和其他选项以进一步减小文件大小。

保存前优化图像

GIMP

GIMP是 Adob​​e Photoshop 的免费开源替代品。它可用于优化网络图像。缺点是它不像此列表中的其他一些解决方案那么易于使用。

首先,您需要在 GIMP 中打开图像,然后选择文件 » 导出为…选项。这将打开“导出图像”对话框,您可以在其中为文件指定一个新名称。接下来,您需要单击“导出”按钮。

您现在将看到图像导出选项。对于 JPEG 文件,您可以使用“质量”滑块选择压缩级别并减小文件大小。

在 GIMP 中导出图像

最后,您应该单击“导出”按钮来保存优化后的图像文件。

小PNG

TinyPNG是一款免费的网络应用程序,它使用智能有损压缩技术来减小 PNG 和 JPEG 文件的大小。您所要做的就是访问他们的网站并使用简单的拖放操作上传您的图像。

优化您的图像

他们会压缩图像并为您提供下载链接。

它们还有 Adob​​e Photoshop 的扩展,我们将其用作图像编辑过程的一部分,因为它允许您从 Photoshop 内部访问 TinyPNG。

对于开发人员来说,他们有一个 API 可以自动转换图像。此外,对于初学者来说,他们有一个 WordPress 插件可以为你做到这一点。我们稍后会详细讨论这个问题。

JPEG迷你

JPEGmini使用无损压缩技术,可显着减小图像的大小,而不影响其感知质量。您还可以比较原始图像和压缩图像的质量。

JPEGMini在线图像压缩工具

您可以免费使用他们的网络版本或为您的计算机购买该程序。他们还有一个付费 API 来自动化您服务器的流程。

图像优化

ImageOptim是一款 Mac 实用程序,通过查找最佳压缩参数并删除不必要的颜色配置文件,您可以在不损失任何质量的情况下压缩图像。

使用 ImageOptim 优化图像

Triimage是 Windows 的替代品。

5. WordPress 最佳图像优化插件

我们相信优化图像的最佳方法是在将图像上传到 WordPress 之前进行优化。但是,如果您运行多作者网站或需要自动化解决方案,那么您可以尝试WordPress 图像压缩插件

以下是我们最好的 WordPress 图像压缩插件列表:

  1. Optimole , ThemeIsle背后团队的流行插件
  2. EWW图像优化器
  3. JPEG、PNG 和 WebP 图像压缩,上面提到的 TinyPNG 团队的插件
  4. Imagify ,流行的WP Rocket团队的插件
  5. 短像素图像优化器
  6. 斯马什
  7. 重新Smush.it
  8. Envira Gallery 是一个内置图像压缩的 WordPress 画廊插件

这些 WordPress 图像优化插件将帮助您加快网站速度。

6. 图像优化的最终想法和最佳实践

如果您没有保存针对网络优化的图像,那么您需要立即开始这样做。这将对您的网站速度产生巨大的影响,您的用户会因此感谢您。

更不用说,更快的网站对于 SEO 非常有用,您可能会看到搜索引擎排名的提高。

除了图像优化之外,可以显着帮助您加快网站速度的两件事是使用WordPress 缓存插件和使用WordPress CDN

或者,您可以使用托管 WordPress 托管公司,因为他们通常提供缓存和 CDN 作为平台的一部分。

我们希望本文能帮助您了解如何在 WordPress 中优化图像。您可能还想查看我们有关如何提高 WordPress 安全性的指南,或者我们的专家精选的最佳商业网站 WordPress 插件

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top