如何让 WordPress 上的照片加载速度更快：6 种关键策略
已发表: 2021-06-22苦恼于如何让照片在您的网站上加载得更快？
图片可帮助您创建更具吸引力的网站，因此使用它们非常棒。 但是，如果您使用大量图像，如果不优化它们，您就有可能降低网站速度，这就是为什么您有兴趣学习如何使图像加载更快是件好事。
值得庆幸的是，您可以实施许多策略来加速您的图像，无论是否影响其照片质量。
在这篇文章中，我们将分享一份关于如何更快地加载您在网站上使用的图像的综合指南。
我们将首先分享六种加快图像加载速度的关键策略。 然后，我们将向您展示如何使用两个适合初学者的 WordPress 插件在您的 WordPress 网站上实施这些策略。
如何使照片加载更快：六种性能策略
在第一部分中，我们将讨论您可以实施的策略，以使您的图像在您的网站上加载得更快。 然后，在下一节中，我们将向您展示如何在 WordPress 上实施所有这些策略。
您可以将此部分视为“理论”，将下一部分视为“可操作的操作方法”。
如果您想知道是什么让图像加载速度更快，请继续阅读！ 以下是您可以用来加速您网站上的图片的六种策略，大致按重要性排序：
- 压缩照片。
- 调整照片大小。
- 将照片转换为 WebP 等优化格式。
- 使用内容交付网络 (CDN) 加快图像下载时间（尤其是对于远离您网站托管的访问者）。
- 延迟加载图像。
- 启用浏览器缓存以加快后续访问。
前三种策略处理优化图像文件本身，而后三种策略专注于优化您的网站加载这些图像文件的方式。
让我们来看看这些策略如何加快图像在 WordPress 上的加载速度。
1.压缩图像
照片压缩可让您在不更改其尺寸的情况下缩小图像的文件大小。 压缩通过删除冗余/不必要的信息并应用各种算法来减小文件大小来工作。
有两种类型的压缩：
- 无损– 文件大小小幅减小而质量没有变化。
- 有损– 文件大小大大减少，但图像质量可能会有所损失。 有损压缩有不同级别——有些甚至可能人眼看不到，而更激进的算法可能会产生明显的影响。
您可以在我们关于有损与无损图像压缩的文章中了解更多信息。
对于大多数网站，您可以使用有损压缩。 但是，如果您是摄影师或在图像质量至关重要的其他行业，您可能希望坚持使用无损压缩。
如果您使用有损压缩，您可以节省一些非常可观的费用。 例如，我们使用 Imagify 压缩了一个简单的 JPG 图像。 Imagify 是一个免费的图像优化工具，我们将在本指南的后面部分介绍。
在测试图像上使用有损压缩后，我们能够将大小从 133.7 KB 缩小到 36.9 KB，而质量几乎没有变化——文件大小减少了约 73% ：
2.调整图像大小
上面，我们告诉过您照片压缩可让您更改图像的文件大小而不更改其尺寸。 但在大多数情况下，您确实希望更改图像尺寸，这是调整照片大小的地方。
在所有条件相同的情况下，图像的尺寸越大，其文件大小就越大。 文件越大，图像加载速度越慢。
对于网站，您应该尝试将图像大小调整为您正在使用的确切大小。 例如，如果您网站的内容区域为 800 像素宽，您需要将图像大小调整为 800 像素（或者可能将其翻倍至 1,600 像素，以考虑 Retina 屏幕等高分辨率显示器）。
节省多少？ 这是一个快速测试示例，我们只是在不添加任何压缩的情况下调整了图像大小：
如果您将压缩与调整大小结合起来，您可以在图像大小上实现一些令人难以置信的缩小。 例如，在使用 Imagify 压缩调整大小的图像后，我们将其进一步缩小到 101 KB。
因此，仅通过调整图像大小和压缩图像，我们将其从 380 KB 降至 101 KB，质量几乎为零（假设您在网站上显示它）。
3. 将照片转换为 WebP
WebP 是一种来自 Google 的现代图像格式，它可以提供比 JPEG 或 PNG 更小的文件大小，而不会降低质量。
平均而言，WebP 图像比同类 JPEG 图像小 25-34%，比同类 PNG 图像小 26%。
为了从这些尺寸节省中受益，您可以在将图像上传到 WordPress 站点时将它们转换为 WebP。
要了解有关此格式的更多信息，请查看我们的 WebP 图像完整指南。
4. 使用内容交付网络 (CDN)
CDN 本质上只是一个遍布世界各地的全球服务器网络。 如果您将 WordPress 站点配置为使用 CDN，您可以在此服务器网络上托管您站点的所有照片（和其他静态文件）。
然后，您网站的访问者将能够从离他们最近的网络位置下载照片，而无需直接从您网站的托管服务器下载照片。
通过减少图像文件需要传输的物理距离，它们将为您的访问者加载更快。
如果您的网站的受众分布在广泛的地理区域（例如多个国家或大洲），则快速 CDN 尤其有用。
但是，如果您的网站仅针对特定地理位置的人（例如您当地的城市），那么您可能不会注意到使用 CDN 的图像加载时间有多大改善。
5. 延迟加载图片
延迟加载 WordPress 网站的图片可以限制照片对网站整体加载时间的影响。
本质上，延迟加载让您等待加载访问者可见视口之外的图像。 相反，您的网站只会在访问者开始向下滚动时“及时”加载图像。
即使页面上有很多图像，这也会导致更快的初始加载时间。
6.启用浏览器缓存
浏览器缓存不会使照片在人们第一次访问您的网站时加载得更快。 但它会为后续访问立即加快图像加载速度。
如何？ 好吧，浏览器缓存让您告诉访问者的浏览器将您网站的图像存储在访问者的本地计算机上（在浏览器缓存中）。
一旦访问者在第一次访问时下载了图像，他们将能够在后续访问时从本地浏览器缓存中加载这些图像，这将导致更快的加载时间。
如何使用 WordPress 插件加速图像加载
现在，让我们来看看如何实施六种策略来更快地在 WordPress 网站上加载图像。
您只需要两个插件即可设置所有内容：
- Imagify – 您将使用它来优化图像文件本身。
- WP Rocket – 您将使用它来优化您的网站向访问者提供这些图像文件的方式。
Imagify – 压缩、调整大小和转换为 WebP
Imagify 是一个易于使用的 WordPress 插件，可以处理我们列表中的前三个优化技巧。
配置后，它将使用以下策略自动优化您上传到 WordPress 的所有图像：
- 使用无损、中等有损或激进的有损算法压缩图像。
- 将图像大小调整到某些最大尺寸。
- 将图像转换为 WebP 并将其提供给访问者。
您还可以通过单击批量调整和压缩站点的现有照片。
首先，从 WordPress.org 安装并激活免费的 Imagify 插件。 激活插件后，它会提示您输入 API 密钥，以便您将 WordPress 站点连接到 Imagify 优化服务。
要获取您的 API 密钥，您可以注册一个免费的 Imagify 帐户。 您将能够永久免费优化每月 20 MB 的图像（每月约 200 张图像）。
如果您需要超过这些限制，500 MB（约 5,000 张图像）的付费计划每月收费 4.99 美元，无限使用每月收费 9.99 美元。 您可以在无限制的 WordPress 网站上使用付费计划。
获得 API 密钥后，您可以将其粘贴到框中，然后单击Connect Me ：
然后，转到设置 → 想象来配置您的图像优化设置。
在顶部，您可以选择所需的压缩级别。 还有一个视觉比较可以帮助您测试不同的级别：
如果向下滚动，您可以让 Imagify 自动将图像转换为 WebP并将它们显示给访问者。 对于 WebP 图片，我们推荐使用 <picture> 标签方法：
在此之下，您可以告诉 Imagify 将大图像的大小调整到某个最大尺寸（基于宽度）。 同样，我们建议将其设置为您网站内容区域的宽度（或者如果您想为 Retina 屏幕提供更高分辨率的图像，则可以将其设置为两倍）：
就是这样！ 现在，Imagify 将自动优化您上传到 WordPress 的所有新图像。
如果您的网站上有很多现有图像，您可以通过转到媒体 → 批量优化来让 Imagify 批量优化它们：
WP Rocket – 浏览器缓存、延迟加载和 CDN
WP Rocket 是一个完整的 WordPress 性能插件，可以加速您的整个网站并实施我们讨论过的其他照片优化策略。 这包括：
- 实现浏览器缓存。
- 延迟加载图像。
- 连接到 CDN。
除此之外，它还可以帮助改进非图像性能，例如页面缓存、代码优化等等。
要进行设置，您首先要购买并安装 WP Rocket。
一旦激活它，它将自动启用页面缓存和浏览器缓存。 要访问其他设置，请转到仪表板中的设置 → WP Rocket。
要启用延迟加载，您可以转到“媒体”选项卡并选中该框以延迟加载图像（和视频，如果需要）。 您还可以让 WP Rocket 添加缺失的图像尺寸，这是另一个有用的优化技巧：
要设置 CDN ，您可以转到 CDN 选项卡。 最简单的入门方法是使用 RocketCDN 服务，每月只需 7.99 美元即可获得无限带宽。 或者，WP Rocket 还可以帮助您与 Bunny CDN、KeyCDN 或 StackPath 等其他服务集成。
如果您确实使用了 CDN，并且您将 Imagify 配置为使用 <picture> 标签方法提供 WebP 图像，则您需要返回 Imagify 的设置（设置 → Imagify）并在 WebP 设置框中输入您的 CDN URL。
今天让您的图像加载更快
如果您在网站上使用大量照片，那么优化它们以使您的网站快速加载非常重要。
在这篇文章中，我们介绍了多种加快照片加载速度的方法。
首先，您应该优化图像文件本身。 使用 Imagify，您可以压缩、调整大小并转换为 WebP，以确保您的图像文件大小尽可能小。
然后，您还可以使用 WP Rocket 通过 CDN、浏览器缓存和延迟加载等策略来优化您在网站上使用和加载图像的方式。
您对如何使您的 WordPress 网站更快地加载图像还有任何疑问吗？ 让我们在评论中知道！