Elementor 中的网站性能优化 [02] 优化图像

[02] 优化图像

文章来源  https://wpeyes.com/elementor/academy/

在本课中，我们将探讨优化图像的重要性。

构建网站时，最好尝试将页面大小保持在 1MB 或更小。影响这一点的最大因素之一是您在网站上使用的图像。

没有图像的网站是罕见的，这是正确的。图片可以将网站变成一件艺术品，提供更好的用户体验，并且通常可以真正使网站栩栩如生。

然而，随着图像的使用，您的网站可以加载更多元素。这并不意味着您不应该使用它们，恰恰相反。通过一些简单的规划和优化，在您的网站上使用图片对您的网站加载时间影响很小。

在我们讨论如何优化图像之前，让我们先看看网站上使用的常见图像类型。

首先我们有。其中包括 JPEG、GIF 和 PNG。

光栅图像由像素组成，每个像素都分配有一种颜色。如果我们将光栅图像扩展到超出其原始大小，它就会变得像素化或模糊。

JPG 是使用最广泛的格式之一，最适合用于照片和大型网络图像。JPG 可以轻松压缩，使其成为许多网站项目的理想选择。

接下来，我们有 GIF（或 JIFF——随便你怎么发音）。当您需要创建文件非常小的网络动画时，此图像格式很有用。

我们最后一个常见的光栅图像是 PNG。PNG 具有内置透明度，还可以支持 1600 万种颜色，使其成为在网站上使用的完美选择。

我们将介绍的下一个常见图像类型是 SVG。

SVG 代表可缩放矢量图形，是一种基于 XML 的矢量图像格式。这种令人难以置信的多功能图像类型非常有用，因为它可以放大到任何尺寸，同时保持其原始质量，同时保持较小的文件大小。常见的用例是徽标、图标和计算机生成的图形。
我们要优化的第一种图像类型是 JPG。正如您在我们的网站上看到的那样，我们使用了几张照片，这些照片都是 JPG。

在我们的英雄区域，我们有一个非常大的 JPG，它设置在我们部分的背景中。虽然这张图片漂亮清晰，但尚未优化，因此加载的图片版本比所需的大得多。

现在让我们做一些测试，看看这张图片加载需要多长时间。

我们使用的是 Chrome，将通过键入 Option + Command + J（在 macOS 上）或 Shift + CTRL + J（在 Windows/Linux 上）打开 Chrome 开发人员工具。

切换到网络选项卡，然后选择“Img”。

要执行测试，我们现在必须刷新页面，在我们这样做之前确保您启用了“禁用缓存”，因为我们不希望我们的浏览器保存任何以前的数据。

如您所见，我们的英雄形象已经花了……几秒钟来加载。请记住，