缓慢的网站会损害您的搜索引擎排名并关闭访问者。此外，具有大图像文件是加载时间慢的主要原因之一。幸运的是，有几种方法可以优化图像以获得更好的网络性能。
在本文中，我们将讨论图像对网站性能的影响。然后，我们将分享一些不同的方法来有效优化您的图像。
让我们开始吧！
图像对网络性能有多大影响？
图像可以显着影响您网站的整体性能。为了提供最佳用户体验 (UX)，您需要确保您的内容以 Google 的 Core Web Vitals 为目标。
Core Web Vitals 是 Google 用来评估您网站性能的指标。当您运行页面速度测试时，Google 会根据多种因素生成报告，包括：
- First Content Paint (FCP)：当浏览器在您的页面模型 (DOM) 上呈现第一个文档对象时元素。
- 最大内容绘制 (LCP)：您的网站在页面上呈现最大元素（通常是图像或视频）所花费的时间。
- 首次输入延迟 (FID)：从用户第一次与您的页面交互（例如单击按钮）到浏览器响应该操作的时间量。
- Cumulative Layout Shift (CLS)：您网站的内容在加载时在页面上移动了多少。例如，图像和按钮等元素可能会在屏幕上移动，从而阻止用户与您的网站进行交互。
您可以使用 PageSpeed Insights 或 GTMetrix 等在线工具。您所要做的就是输入您的网址，您将收到一份包含分数的报告：
该报告还为您提供了有关如何提高性能的建议。此建议可能包括需要优化以缩短加载时间的图像。
例如，报告可能会将页面上最大的内容元素标识为主图像。如果是这种情况，您可以调整图像文件的大小和压缩以提高您的 LCP 分数。
图像也会影响您的 CLS 分数。高 CLS 分数表示您的站点包含未指定高度和宽度属性的图像。
因此，浏览器会花时间尝试适当地调整图像大小。此过程会导致元素在页面加载时发生变化，从而破坏用户体验。您可以通过为您上传到网站的每张照片设置尺寸来轻松做到这一点。修复此问题。
优化图像的 2 种方法
正如我们所见，图像会影响您的核心网站生命体征评分。让我们看看优化图像以提高网络性能的两种有效方法！
1.压缩图像
压缩是减小图像文件大小的过程。主要有两种压缩方法：
- 有损：此方法从图像中删除大量数据，从而显着减小文件大小。
- 无损：这种压缩技术可以减小文件大小，而不会从图像中删除任何数据。
大图像文件会给您的加载时间带来很大压力，从而导致您的网站运行缓慢。它们还会占用您服务器上的大量空间。
因此，我们建议您压缩所有上传到网站的图像：
有损压缩往往比无损压缩更高效。这是因为它可以让您更灵活地减小尺寸。唯一的缺点是有损压缩可能会影响图像的质量。
2.调整图像大小并使用正确的尺寸
另一种优化图像以提高网络性能的有效方法是调整图像大小。通常，尺寸越大，文件就越大。
因此，您可能需要考虑在将图像上传到您的网站之前裁剪图像。您可以使用您选择的图像编辑软件来完成此操作。
此外，当您将图片上传到您的网站时，WordPress 会自动为图片生成不同的尺寸。这些通常包括大、中、小版本以及缩略图：
这样，WordPress 使您能够为读者提供最合适的图像尺寸。它还可以帮助浏览器根据访问者的设备显示正确的图像大小。因此，这些设置使您的网站更具响应性。
在您的帖子中添加图片时，您可能希望将尺寸设置为大而不是全尺寸。同样，如果您正在设计博客提要，则可以为特色图片选择缩略图而不是较大的图片尺寸。
如果您使用比必要更大的尺寸，您将对您网站的速度施加不必要的压力。您还将在服务器上占用更多空间。
如何以正确的方式优化图像
幸运的是，您可以使用多种工具来优化图像以获得更好的网络性能。本节介绍一些帮助您入门的最佳实践。
1.使用图像压缩工具或插件
如前所述，压缩有助于减小图像文件的大小。您可以使用多种工具压缩照片，包括图像编辑软件，如 Adobe Photoshop 或 Microsoft Photos。
也可以使用在线工具，比如小PNG：
此工具使用有损压缩来减小 WEBP、JPEG 和 PNG 文件的大小。您所要做的就是上传您的图像，TinyPNG 会为您压缩它们。
或者，您可以使用像 Imagine 这样强大的图像优化插件：
在您的网站上安装并激活插件后，您可以转到“设置”>“想象”来设置压缩首选项：
我们建议将压缩级别设置为激进。此设置将显着减小文件大小，而图像质量没有任何明显差异。
准备就绪后，单击“保存更改”。现在，Imagify 将自动压缩您上传到站点的所有图像。
2.在 WordPress 编辑器中调整图像大小
我们还讨论了调整图像大小以加快加载速度的重要性。在将照片上传到您的 WordPress 网站之前，您可以在计算机上调整照片大小。
但是，您也可以在 WordPress 中调整图像大小。只需在您的帖子或页面中选择一张图片，然后从右侧的设置面板调整宽度和高度：
或者，您可以在媒体库中找到图像并选择编辑图像。这会将您带到一个窗口，您可以在其中裁剪图像并设置新尺寸：
如您所见，WordPress 编辑器还允许您选择自动生成的图像大小。如果您在博客文章中使用图片，我们建议您选择大尺寸而不是全尺寸。此设置将在不影响质量的情况下呈现更小的图像尺寸。
3.更改最大上传限制
WordPress 具有最大上传文件大小。此金额可能会有所不同，具体取决于您的托管服务提供商分配的资源。
要检查您当前的最大文件大小，请在您的 WordPress 仪表板中导航至媒体 > 添加新文件。在这个页面，你会看到上传限制：
通常，您不需要更改此值，除非您要上传更大的文件。但是，您可能希望降低文件大小限制以防止其他用户上传过大的图像。如果您运行多作者博客，此设置会很方便。
为此，您只需联系您的托管服务提供商并要求他们更改最大上传文件大小。或者，您可以通过编辑 php.ini 文件来更改 WordPress 上传限制。
4.延迟调整脚本
另一种针对网络性能优化图像的方法是调整脚本在 HTML 代码中的位置。 JavaScript 非常耗费资源，嵌入 HTML 中的任何形式的交互都可能导致加载延迟。
在代码底部链接到外部 JavaScript 页面是标准做法。这允许在激活任何交互元素之前完全加载文档对象模型 (DOM)。
但是，一些 JavaScript 片段在整个 DOM 中普遍使用。一个例子是事件侦听器“onclick”，它告诉按钮在用户单击它时要做什么。
因此，如果您使用脚本来优化您的图像，它的时间可能会影响您页面的加载时间。可以使用插件解决这个问题，比如飞行脚本：
此工具使您能够延迟运行特定脚本，直到没有用户活动为止。此设置有助于减少加载页面所需的时间。
结论
优化图片可以加快网站速度并改善用户体验。此外，Google 的 Core Web Vitals 在评估您网站的质量和性能时会考虑图像大小。
在本文中，我们研究了几种优化图像以提高网络性能的有效方法。这些方法包括使用插件压缩图像和在 WordPress 编辑器中调整照片大小。
您对如何优化图像以获得更好的网络性能有任何疑问吗？在下面的评论部分让我们知道！
图片来源：pixel2013/pixabay.com，特色图片来自 elenabsl/shutterstock.com
来源
