目录
图像是每个网站的关键元素：它们使帖子和页面更有趣、更有吸引力，但它们同样会成为性能和 PageSpeed 分数的负担。
这就是为什么我们在这里分享有关 WordPress 图像优化的简介！
下面是如何调整图像大小和压缩图像、保持图像质量以及如何选择最佳在线图像优化器的所有内容，如何通过延迟加载进一步提高网站的性能。
大图像消耗了加载时间
图像通常是最大（且被忽视）的性能问题之一。即使使用缓存和 CDN，未优化的图像仍然会拖慢页面加载时间并影响最大内容绘制分数（核心 Web 指标之一）。
但是，作为网站所有者，图像完全在您的控制之下。因此，如果您能够掌握如何使用和优化图像，则可以提高网站的速度并优化 Core Web Vitals 的性能。
最常见的问题之一与精美的页面有关，这些页面有时包含高分辨率图片、照片小部件和大量图像滑块。
给您一个想法：图像平均占页面总加载时间的 30% 左右。通常，这是影响加载时间的最大因素。在极端情况下，加载时间可能接近 60%。
以下是未优化的图像会对您的网站造成的影响的示例：
加载时间为12秒，页面大小为8MB。在这 8MB 中，图像占 6.7MB。这已经失控了！
HTTP 请求的数量通常被认为是加载时间的一个因素，虽然它很重要，但最终，页面大小才是速度或缓慢的真正指标。您可以有少量的 HTTP 请求，但如果这些请求召唤巨大的图像，那就会带来问题。
| 🚀 通过减小图像大小来减小页面大小是缩短加载时间的简单而有效的策略。它可以真正改变您的 WordPress 网站性能。 |
文件大小很重要：为什么应该调整图像大小和压缩图像
了解图像尺寸和文件大小
图像的尺寸（即图像在屏幕上占据多少空间）以像素为单位进行测量，虽然它们不能 100% 决定文件大小，但它们是相关的。图像的尺寸越大，文件大小就越大。
文件大小以千字节 (KB) 和兆字节 (MB) 为单位
1MB = 1024KB
如果您使用智能手机拍照，根据您的设置，该照片的宽度可能在 2500 像素（甚至更大），文件大小为 3MB（或 3072KB）。如果我用手机拍照并将其上传到此博客而不进行任何编辑，我将上传一个大约是所需大小的 3 倍的文件 – 完全浪费资源并且拖沓页面加载时。
因此，虽然拍摄手机照片并上传到您的博客可能很简单，但如果您想要一个快速的网站，那么通过增加大量不必要的重量就会产生真正的问题。
在上传照片之前，您需要做两件事：调整其大小并压缩它。
如何在线调整图像大小
因此，您需要做的第一件事是将图像大小调整为适合您网站的正确尺寸。对于博客图像，请计算出博客内容区域的宽度，并且切勿上传比该宽度更宽的图像。如果要在滑块中使用它，请确保首先确定滑块的尺寸。
如何知道内容区域有多宽？
可以使用 Chrome 或 Firefox 内置的开发人员工具，或者您可以安装适用于 Chrome 的简单 Page Ruler 插件。如果您使用的是 Mac，则有一个内置的屏幕捕获工具 Grab，当您在屏幕上勾画出一个区域时，它会告诉您像素。
一旦确定了图像的尺寸，您就可以使用以下任何工具来相应地调整图像的大小：
调整应用程序和工具的大小
- Photoshop
- GIMP – 免费，Windows 和 Mac
- Irfan View – Windows 下免费
- Preview for Mac
- Mac 还有一个命令行工具
在线调整大小工具
- Picmonkey.com
- Pixlr.com（还有一个移动应用程序）
- Fotor.com（也有一个移动应用程序）
无论您使用哪一个应用程序，您所需要做的就是找到调整大小功能。您将能够输入所需的像素宽度，应用程序将通过自动调整高度来确保图像保持比例。
常见图像格式
网络上的图像应保存为 .jpg、.png 或 .gif
- JPEG最适合用于不需要任何透明度的照片和通用图像。您可以轻松压缩它们并获得适合网络的较小文件。
- PNG通常会生成较大的文件，因此仅当您的图像需要透明度时才应使用它。
- GIF不太常用。它们的颜色范围有限，因此只能用于非常简单的图像，但可以生成较小的文件。
| 💡性能提示：您应该将图像转换为 WebP 格式，以便加载速度更快。WordPress 不支持 WebP，您不能直接上传它们，但您可以使用插件并轻松减小图像的大小。 |
如何压缩图像
我们已经处理了图像的物理尺寸，现在让我们处理图像的“重量”。我们希望压缩图像以使其尽可能精简且快速加载。目标是减小文件大小。对于每个图像应该是多大，并没有固定的答案，因为这取决于它的使用方式。横幅或滑块中使用的图像会更大，一般来说，尽量将图像减小到 100KB 或更少。
用于缩略图、徽标等的小图像将会小得多。例如，该博客顶部的徽标为 3.8KB。
压缩可能会造成轻微的质量损失，因此您需要在质量和文件大小之间寻求平衡。但请永远记住：文件越小，加载时间就越快。
压缩图像的应用程序
- Photoshop – 确保使用“另存为网洛格式”选项
- GIMP
- ImageOptim (Mac)
在线工具
使用 Photoshop 或 Gimp 等专业图像优化工具确实是管理图像并为网络做好准备的非常有效的方法：但这些工具的学习难度有时可能令人难以承受。
大多数时候，倾向于在线图像优化工具是最好和最实惠的选择。
使用WordPress 插件
大多数在线图像优化工具的缺点是，您在优化后无法完全控制图像。下载优化后的图像后，您必须在文件夹中手动对它们进行排序。
此外，一些在线工具并没有说明您的图像在其服务器上的存储方式以及存储时间：不太方便！更自然的做法是优化图像并将其存储在原来的位置。
事实上，最好先调整图像大小并压缩图像，然后再将其上传到 WordPress。
另一方面，如果您的网站已经上线，您将需要处理已经存在的图像。
对于网站每个页面上加载的关键图像（例如徽标、标题和其他图像），最好制作新版本的图像，然后安装启用媒体替换插件。这将允许您简单地用新的、优化的图像替换媒体库中的现有图像，而不会破坏任何链接。
对于媒体库中的其他图像，单独检查并修复它们是不现实的，您可以查看WordPress 的最佳图像优化插件。
延迟加载使您的页面速度更快
调整图像大小和压缩图像和是将文件上传到网站之前需要执行的重要操作。
但是优化后的图片上传后会发生什么呢？性能方面还有提升空间吗？
即使页面里有多个图像，如何才能获得更快的加载速度？
找到一种可以节省用户额外几毫秒等待时间的技术可能是关键。当我们在网站之间浏览时，都没啥耐心，并且几乎从未意识到我们正在访问的网站的真实加载时间。
在这种情况下，答案是：延迟加载图像。
这是一项有益的技术，可以推迟屏幕外图像（被视为非关键资源）的加载，并将它们保留在“屏幕外”，直到用户需要它们为止。如果用户不滚动页面，则不会加载底部的图像。
发表回复