如何优化网络图像：提高网站性能的分步指南

毫无疑问，图像是万维网的宝贵资产。 从可视化数据到拆分文本段落到展示您的作品集，照片和图形是大多数网站设计的重要组成部分，可以帮助用户获得出色的在线体验。

但是，拥有出色的视觉效果可能会对您的网站造成影响。 分辨率越高，文件越大，这也意味着加载时间越慢。 AKA，图像通常是网站性能不佳的原因。 请记住，向您的网站添加图像的全部目的是为您的用户创造更好的体验（甚至可能增加销售和转化！），这对于速度较慢的网站来说很难做到。

那么，您如何平衡网站性能与视觉设计？

通过优化您的图像。

在整个图像创建过程中，您可以做很多小事来优化文件大小，特别是考虑到您的网站。

在这个图像优化分步指南中，我将介绍：

• 什么是图像优化？
• 为什么图像优化很重要？
• 为网络优化图像的 7 种方法

什么是图像优化？

一般来说，图像优化是在不损失质量的情况下减小文件大小的行为。 您可以在创建阶段（例如在 Photoshop 中使用正确的“导出”选项）或直接在您的网站上优化您的图像（例如使用延迟加载在您的网站上显示媒体）。 目标是减少用户必须下载的数据量，以便他们可以更快地获得他们正在寻找的内容。

为什么图像优化很重要？

人们对网络的关注时间很短，这就是为什么让您的网站在两秒或更短的时间内加载很重要的原因。 减慢网站速度的最常见因素之一是您的图片。 （即使您的网站运行在最好的服务器上，就像使用托管 WordPress 主机一样，图像也可能会导致性能下降。）

然而，图像优化很重要还有另一个原因，它与您的业务底线直接相关。 除了减慢您的网站速度之外，图像还会占用为您的网站提供动力的服务器上的磁盘空间。 大多数托管服务提供商都会对每个计划实施带宽限制，这意味着您没有无限的资源——您的图像将很快占用该空间。

如果您超过该限制，这并不是世界末日，但您可能会被收取超额费用或更糟的费用——关闭您的网站。

通过优化您的图像，您将能够充分利用您的站点存储空间并避免带宽限制。

既然知道了图像优化的重要性，那我们就来说说怎么做吧！ 这个分步指南将涵盖从 Photoshop 技巧到开发实践的所有内容。

如何为网络优化图像

这个分步指南将涵盖您可以做的一切来优化图像，从 Photoshop 开始，到您的网站结束。

请按照以下步骤优化图像以获得更好的网站性能：

1. 对您当前的网站速度进行基准测试。
2. 知道如何选择最佳的图像文件类型。
3. 在导出之前调整图像大小。
4. 压缩图像以减小文件大小。
5. 使用 WordPress 插件自动优化图像。
6. 使用“模糊”技术首先加载较低质量的图像。
7. 使用延迟加载。

1. 对您当前的网站速度进行基准测试

在你做所有这些工作来优化你的图像之前，首先在你的网站上运行速度测试！ 到最后，您将能够看到您所产生的影响（此外，您可以与您的团队或老板分享，以获得额外的荣誉）。

作为飞轮支持团队的一员，我熟悉不少速度测试，但以下五个是我的最爱：

• 谷歌 PageSpeed 见解
• Pingdom 工具
• GTMetrix
• 网页测试
• Flywheel 的 Performance Insights 附加组件

前四个是基于浏览器的工具，它们的工作方式非常相似：打开链接，然后输入您的 URL 以获取有关您网站速度和性能的快速报告。

Performance Insights 是 Fl​​ywheel 托管平台的附加组件，它将超越基础知识，为您的网站提供可行的建议，包括只有您的主机才能提供的见解。

此外，您将能够在仪表板中随时间跟踪指标，从而在您执行优化图像等操作时轻松查看更改的影响。 在这里了解更多。

这些工具将推荐您可以采取的几个步骤来提高站点速度和性能，但出于本教程的目的，现在只关注分数。 这为您提供了一个很好的基准，因此您知道从哪里开始。

2.知道如何选择最好的图像文件类型

当您完成创建图像（从相机保存或从 Photoshop 等工具导出）后，您可以选择指定文件类型。 Web 上最常见的文件类型是 JPEG、PNG 和 GIF。 而且我相信您可以猜到，当它们被放置在您的网站上时，它们都有自己的优点、缺点和最佳实践。

JPEG

JPEG 图像最适合在您的网站上展示复杂的彩色照片，因为它们允许以更小的文件大小获得更高质量的图像。 这种文件类型可能适用于您想在您的网站上使用的大多数图像，但有一个主要例外：具有透明背景的图像。 （对于那些，请参阅下一节关于 PNG 的内容！）

为您的网站使用 JPEG 图像时，请考虑将其导出为“渐进式”。 这允许浏览器在将完整分辨率完全加载到站点之前立即加载图像的简单版本。

这是一个关于如何加载非渐进式图像的想法：

以下是渐进式图像的加载方式：

如果您在 Photoshop 中工作，则在导出为“另存为 Web”时会找到此设置。

PNG

如果您的图像中没有大量颜色（如平面插图或图标），或者希望它是透明的，我建议导出为 PNG。 确保您具有正确的图像尺寸，并寻找另存为 PNG-24 的选项（或 8，如果没有质量损失）。

动图

第三种最常见的 Web 图像格式是 GIF。 它们仅支持 256 种颜色，因此您必须选择这种文件类型！

要为您的网站优化 GIF，请认真考虑它们的持续时间、它们是否需要循环播放以及在给定页面或网站上您真正需要多少。

3. 上传前调整图片大小

优化网络图像的最简单方法之一是在将它们上传到您的站点之前调整它们的大小。 特别是如果您正在处理来自 DSLR 相机的原始图像，尺寸通常比您实际需要的要大得多。

例如，假设您正在将图像添加到您网站上的博客文章中。 如果您的 WordPress 主题以 500 x 500 显示图像，但您正在上传分辨率为 1024 x 1024 的图像，那么所有这些额外的像素只会增加文件大小并降低站点速度，而不会提供真正的好处。

通过在上传之前裁剪图像，您将减小文件大小，这将有助于您的网站加载速度更快一点，并为更多图像节省磁盘空间。

要调整图像大小，只需打开您选择的图像编辑软件。 Photoshop 效果很好，或者您也可以使用更简单的工具，例如 Preview（适用于 Mac）、Paint（适用于 Windows）或 Canva（一种浏览器工具）。

4.压缩图像以减小文件大小

一旦您拥有最终图像，以正确的格式保存并裁剪为适当的尺寸，您可以在上传到您的网站之前再采取一个步骤来优化它：压缩它。

此过程将帮助您减小文件大小，而不会损失明显的图像质量。 有两种主要类型的压缩：有损和无损。

无损压缩将在压缩前后保持相同的质量水平。 有损压缩会丢弃照片的某些元素，但通常以人眼不会注意到的方式进行。 要了解有关这些压缩类型的更多信息，我推荐 Imagify 的本指南。

如果您在网站上看到特定图像加载并慢慢进入视野，这可能表明它需要压缩、调整大小或两者兼而有之。

要压缩图像，您只需要一个图像压缩工具。 我的最爱包括：

• TinyPNG：基于浏览器的免费工具，用于压缩 PNG 和 JPEG 图像。
• ImageOptim：用于压缩图像的免费开源应用程序。
• JPEGmini：适用于 Mac 和 Windows 的照片重新压缩应用程序。
• RIOT：用于优化图像的免费 Windows 应用程序。
• Image Optimizer：本地的免费插件。

小PNG

这个基于浏览器的工具使用智能有损压缩优化图像，通过减少使用的颜色数量来减小文件大小。 （但不用担心，您甚至不会注意到！）它可以免费且快速地用于 PNG 和 JPEG。

图像优化

这是一个免费的 Mac 应用程序，它通过消除不必要的膨胀来压缩图像，同时尽可能多地保留图像质量。

JPEG迷你

JPEGmini 是一个强大的付费选项，可帮助您减小文件大小，同时保持质量和格式。 它确实有免费试用版，因此您可以在购买前对其进行试运行。

暴动

Radical Image Optimization Tool (RIOT) 是一款用于减小图像文件大小的免费 Windows 应用程序。 它具有并排视图，因此您可以比较压缩前后的图像质量。

Image Optimizer，一个免费的本地插件

如果您使用 Local 作为本地开发环境，则可以使用 Image Optimizer Add-on 自动离线压缩图像。 它会扫描您的站点以查找所有图像文件，从而节省您单独压缩它们的时间并在此过程中加快您的站点速度。

5. 使用 WordPress 插件自动优化图像

在这一点上，您可能开始认为图像优化是一项繁重的工作——而且确实可以！ 但是还有一种简单的方法可以简化其中的一些步骤，那就是在您的 WordPress 网站上安装图像优化插件。

我有一些建议，它们每个都有独特的功能。 但通常，当您上传到 WordPress 网站时，图像优化插件会压缩和调整图像大小。 这意味着您可以跳过这些步骤而不是手动执行它们，从而节省大量时间。

要优化 WordPress 网站上的图像，我推荐这些插件：

• EWWW 图像优化器云
• 压缩 JPEG 和 PNG 图像
• 克拉肯.io
• 想象一下

EWWW 图像优化器云

当您将图像上传到您的网站时，此 WordPress 插件会自动优化您的图像，或者它还可以优化您过去上传的图像。 如果您正在使用具有未优化图像的现有站点，这将非常有益。

压缩 JPEG 和 PNG 图像

TinyPNG 团队的这个 WordPress 插件可以在上传时优化 JPEG 和 PNG 图像。 如果您是基于浏览器的工具的粉丝，请使用他们的免费插件简化流程！

克拉肯.io

Kracken.io 插件可以优化 WordPress 网站上的新图像和现有图像。 它还支持无损和有损压缩模式，让您可以对最终结果进行大量控制。

想象一下

这个 WordPress 插件将帮助优化您的图像而不会降低质量。 如果您使用这些插件，它还与 WooCommerce 和 NextGen Gallery 兼容。

注意：在选择插件之前，请务必查看它们的操作方式。 有些使用可能会导致您的网站出现问题的服务器繁重操作，而另一些则使用 FTP 选项来减轻您的 Web 服务器上的负载。

6.使用“模糊”技术首先加载较低质量的图像

即使完成了之前的所有优化步骤，在某些情况下，您仍然可能会处理较大的文件大小或页面上的大量图像，从而降低您的网站速度。 在这些情况下，有时不仅可以优化图像，还可以优化加载体验，让网站访问者认为您的媒体文件加载速度比实际速度快。

这就是接下来的两个步骤的全部内容 - 提供更快加载图像的外观，因此用户在文件加载时不会只是盯着空白页。

一种方法是首先加载较低质量的图像 (LQI)。 通过在加载完整尺寸之前加载图像的较小版本，它可以让用户在等待所有细节时看到一些东西。 这给人一种更快的加载时间的感觉，即使从技术上讲，一切都以相同的速度加载。

一种流行的方法是“模糊”技术，您可以通过本 CSS-Tricks 教程学习如何实现。

7. 延迟加载您的网站图片

与“模糊”技术类似，还有一个技巧可以帮助您获得更快加载图像的外观：延迟加载。

当有人登陆您的网站时，他们会从页面顶部开始。 他们可能需要一点时间来滚动整个页面，尤其是在他们订婚的情况下。 延迟加载不是尝试一次加载所有图像，而是假设用户最关心他们可以看到的内容。 因此，浏览器视图中的图像首先完全加载，而其他图像首先加载占位符，直到用户滚动到页面的该部分。

延迟加载本身就是一项很棒的技术，与这些图像优化技巧的其余部分配合使用时，它甚至更强大！ 而且，由于 BJ Lazy Load 插件，在 WordPress 网站上执行此操作非常容易。

通过优化图像来提高网站性能的分步指南到此结束！ 要查看这对您的站点产生的影响，请运行另一个速度测试。 你怎么做的？

在优化的工作流程和正确的图像优化工具之间，您将能够立即从优化的图像中看到更好的网站性能！

超越图像：了解如何提高网站速度以获得极快的性能

Flywheel 的托管 WordPress 托管平台经过优化，可让 WordPress 网站快速运行，但您的服务器只是其中的一部分。 使用我们的 Performance Insights Add-on，您将深入了解您的网站的性能（因此您确切知道在哪里进行改进！）同时能够随着时间的推移跟踪指标以查看何时、是否以及如何事情会改变的。

学到更多

本指南由 Flywheel 的幸福工程师 Tyler Stokes 撰写。 我们每天帮助创意人员优化他们的网站，以获得闪电般的性能。

单击此处了解有关 Flywheel 托管 WordPress 托管平台的更多信息！