在本课中，我们将探讨优化图像的重要性。
构建网站时，最好尝试将页面大小保持在 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”。
要执行测试，我们现在必须刷新页面，在我们这样做之前确保您启用了“禁用缓存”，因为我们不希望我们的浏览器保存任何以前的数据。
如您所见，我们的英雄形象已经花了……几秒钟来加载。请记住，Google 建议您的整个页面加载时间应少于 3 秒，因此这不是一个好的开始，因为它只是需要加载的众多元素中的一个。
我们还可以看到文件大小为 3.4MB，这对于网页上的图像来说太大了。如果我们点击瀑布统计，我们可以详细查看有关图像的更多信息以及整个加载时间的计算方式。
虽然还有其他方法可以优化已上传到网站的图片（主要是使用第三方插件，我们稍后会介绍），但对于任何网站创建者来说，最好的选择是在图片上传到网站之前对其进行优化. 这将使您更好地控制图像的大小和质量，确保它适合您的项目。
我们将从 Photoshop 开始，它是 Adobe 的高级图像编辑工具。Photoshop 是您工具包中的一个很棒的程序，因为它不仅可以让您调整图像大小，还可以在保持图像质量的同时为您压缩图像。
启动 Photoshop 并打开您的图像。
现在虽然有几种方法可以优化和从 Photoshop 导出图像，但以下步骤提供了一种优化 JPG 的万无一失的方法。
导航到文件 > 导出 > 导出为，您现在应该会看到“导出为”屏幕。
如您所见，我们当前的图像显示为 2753×1856，文件大小为 3.1MB，似乎通过简单地将我们的图像导入 Photoshop，我们已经削减了 300kb，这至少是一个开始。
接下来，让我们选择“2-up”选项，以便我们对优化后的图像和原始图像进行并排比较。我们的优化图像将显示在左侧，因此请确保我们选择了那个图像。
我们可以使用加号和减号图标放大图像来真正测试差异。
在右上角，我们拥有的第一个选项是格式。如果需要，我们可以在这里切换图像类型，让我们将其保留为 JPG，因为它是照片的最佳选择。
接下来我们有“质量”。在这里我们可以调整图像质量以减小文件大小。Photoshop 在保持非常高的图像质量方面做得很好，所以不要害怕尝试较低的设置。如您所见，我们可以将其一直降低到 40%，而不会降低图像质量。
如果我们现在检查图像文件大小，您会发现它已从 3.1GB 减少到相当可观的 548kb。
我们鼓励您尝试使用质量设置，因为有时您可以根据图像进一步减小文件大小，同时将图像质量损失降至最低。
导出图像之前的最后一步是更改图像大小。目前它是 2753 像素宽，而实际上我们网站需要的最大图像是 2000 像素。
在“图像大小”设置下，在宽度字段中输入 2000px，高度将自动更新。
现在，当我们查看文件大小时，我们可以看到它现在已经进一步减小到令人印象深刻的 310kb。这是一个非常好的结果，我们现在准备导出我们的图像并将其上传到我们的网站。
单击导出按钮并将优化后的图像保存到您的计算机。
如前所述，有多种方法可以在 photoshop 中优化和导出图像。
另一种流行的方法是使用“另存为”选项。
在执行此操作之前，让我们首先通过转到“图像”>“图像大小”并修改此处显示的字段来调整图像大小。
我们将我们的设置为 2000 像素宽，这也会自动更新高度并在完成后选择“确定”。
现在，如果我们转到文件 > 另存为，我们可以保存和优化我们的照片以在网站上使用。
首先选择保存图片的位置，添加图片文件名，然后选择“保存”。
您现在将看到 JPG 选项屏幕。
在这里我们可以调整图像的几个设置。
确保选择预览，以便您可以实时见证更改，并在进行更改时留意图像大小。
有一个下拉菜单提供了一些预设选项，您也可以手动修改它。
在格式选项下，确保选择“渐进式”，因为这将进一步帮助优化加载时间，因为它在页面加载时显示分辨率较低的图像。
完成调整后，保存图像，现在就可以上传到您的网站了。
PhotoPeo 的一个很好的免费替代品是一个名为 PhotoPea 的网站。Photopea 有许多类似的功能，最重要的是我们可以优化和导出 JPG 图像。
让我们首先打开我们的图像，然后前往“文件 > 导出为 > JPG”。
不幸的是，我们没有看到 Photoshop 提供的相同的并排比较，但我们可以看到图像的实时视图，当我们调整配置时它会更新。
如您所见，Photopea 自动将 70% 应用于质量字段，这产生了很好的结果，我们现在看到的图像大小为 552kb。提醒一下，我们的原始图像大小为 3.4MB。
与 Photoshop 非常相似，我们鼓励您根据图像尝试质量设置，您会看到截然不同的结果，这是单独微调图像以获得最佳质量和文件大小的情况。还值得注意的是，质量滑块与我们在 Photoshop 示例中看到的滑块并不完全相同。像我们在 Photoshop 中所做的那样将其降低到 40% 会使我们的图像变得有点模糊，所以我们将其保留在 70%。
现在，如果我们将图像大小调整为 2000 像素宽，我们可以看到文件大小进一步减小到 285kb。
让我们保存这张图片并返回我们的网站。
回到 Elementor 编辑器，我们现在要用新优化的图像替换我们的图像，并重新运行我们之前执行的测试。
让我们选择该部分，切换到样式选项卡并单击背景图像以替换它。
在媒体库中，上传您的新图片，为其添加替代描述并插入到您的页面中。
现在让我们更新我们的页面并返回我们已经打开 Chrome 开发者工具的实时网站。
我们需要执行刷新，但请确保我们通过按住“shift & refresh”来清除所有浏览器缓存。
正如您所看到的，我们新优化的英雄形象显示出一些更好的结果。
我们已经将图像大小从 3.4MB 减少到 270kb，加载时间从 6.23 秒减少到 656 毫秒。
这是一个很大的改进，如果我们继续处理我们网站上的所有图像，我们将能够显着提高性能。
接下来我们将看看如何优化我们网站上使用的 PNG 图像。如果我们向下滚动，您可以看到我们有这些公司徽标。虽然这些徽标看起来很棒，但如果我们仔细观察，您会发现这些 PNG 图像非常大，每个大约 25-50 KB。我们当然可以减少这些数字以帮助缩短页面加载时间。
第一步是调整 PNG 图像的大小。它们目前大约有 2000 像素宽，但该网站最多只能显示 300 像素宽。为此，我们将再次打开 Photoshop，导入我们的 PNG，然后使用“导出为”选项调整它的大小。
打开导出窗口，确保格式设置为 PNG 并选中透明度选项。
现在将宽度调整为 300px，如您所见，我们刚刚将 PNG 从 19.9 KB 减少到 3.4 KB。这是我们 PNG 优化的良好开端，但我们仍然可以做得更好。
让我们保存新调整大小的 PNG 并转到 TinyPNG。TinyPNG 是一款免费工具，可在压缩 PNG 的同时保持质量以缩短加载时间。
在 TinyPNG 网站上，我们只需将 PNG 放到上传按钮上，让 TinyPNG 发挥它的魔力。
我们立即可以看到我们新优化的文件减少了 56%。我们已将文件大小从 3.4 KB 减少到 1.5 KB。
如果我们现在下载并并排查看我们的两个 PNG 文件，您会发现 TinyPNG 做得非常出色，两个版本之间几乎没有区别。
我们现在将对其他图像重复该过程，完成后，我们会将这些优化的 PNG 上传到我们的徽标轮播以替换未优化的版本。
我们要看的下一个图像类型是 SVG。
SVG 代表可缩放矢量图形，是一种非常有用的图像类型，其工作方式与 JPG 和 PNG 不同。JPG 和 PNG 是光栅图像，这意味着它们由像素组成，如果尺寸过大可能会像素化或模糊。
SVG 图像是基于 XML 的矢量格式图像。这基本上意味着它可以扩展到任何大小而不会损失任何质量。但它们并不适合所有图像类型，最适合用于徽标、图标和计算机生成的图形。它们还保持非常小的文件大小，这在查看网站性能时非常有用。
请注意，要能够在 Elementor 中上传 SVG，您必须先在 Elementor 设置中启用它。只需导航至 Elementor > 设置 > 高级，然后启用未过滤的文件上传。
回到我们在第 1 课中改进的优化网页，我们可以看到两次使用 SVG 来提高网站性能的情况。
第一个是徽标。以前它由两个小部件组成，一个图像和一个标题。通过将两者组合成 SVG，我们能够显示更清晰、可扩展且加载速度更快的徽标。
我们使用 Adobe Illustrator 来创建和导出我们的徽标，但您可以使用任何基于矢量的软件来获得相同的结果。
在这里您可以看到我们以矢量格式重新创建的徽标文件。
要将其另存为 SVG 文件，只需转到“文件”>“导出”>“导出为”，选择一个位置并根据需要修改文件名。
选择“导出”，现在我们会看到一些额外的选项。
此处显示的默认 Illustrator 选项效果很好。确保选择缩小选项，因为这将通过确保生成的 SVG 代码具有最少的 ID、缩进、行和空格来进一步减小文件大小。
完成后选择“确定”，您的 SVG 现在已准备好用于您的网站。
在第二个示例中，我们使用图标框小部件将一个 4 列布局（其中每列包含一个图像、标题和文本编辑器小部件）转换为相同的布局。图标小部件的优点在于您可以上传 SVG 图标，进一步缩短我们的加载时间。
将这种类型的图像显示为 JPG 并不理想，如果图标图形是 SVG 会更适合。
我们在这里使用一个名为 Inkscape 的免费工具。
如您所见，我们已将图标图像重新绘制为矢量图形。
我们现在可以将它们导出为 SVG 并将它们上传到我们的图标框小部件，这不仅可以提供更快的加载时间，还可以提供更清晰、更清晰的图像。
在 Inkscape 中前往“文件”>“另存为”，选择一个位置，根据需要修改文件名，然后从下拉列表中选择“优化的 SVG”。
Inkscape 的默认设置做得很好，但您可以在这里随意试验以获得更多自定义结果。
新图标现已保存，我们可以将它们上传到我们的图标框小部件，以进一步优化我们的网站。
在图像优化课程的最后一章中，我们将了解第三方图像优化插件。
正如我们之前提到的，最好在将图片上传到您的网站之前对其进行优化。
但是，在某些情况下，您可能在一个已经上传了图片的网站上工作，而这些图片可能没有经过优化。
这是第三方插件可以派上用场的地方。我们可以使用图像优化工具来优化网站上已有的图像，而不是下载、优化和重新上传网站上使用的图像。
我们将要使用的插件称为 Smush，它是 WPMU DEV 提供的高度评价的免费图像优化插件。
Smush 将自动压缩您的图像以实现更小的文件大小，同时保持出色的图像质量。文件越小，加载时间越快！
让我们先安装这个插件，看看它能为我们做什么。
前往插件 > 添加新插件并搜索“Smush”。
选择“立即安装”，然后选择“激活”插件。
激活插件后，您现在将看到一个名为“Smush”的新菜单项。将鼠标悬停在它上面，让我们前往仪表板。
如您所见，Smush 有一个设置向导，可以帮助配置插件。选择“开始设置”开始。
第一个选项允许您应用“自动压缩”选项。一个非常方便的功能，它会自动将您的压缩设置应用于您将来添加到您网站的任何新图像。
接下来我们可以选择从您的照片中去除 EXIF 元数据。通常不需要此数据，因此如果这与您相关，请启用此选项以帮助减小图像的文件大小。
Smush 还具有内置的延迟加载功能，可应用于您的页面和帖子。延迟加载将停止加载离屏图像，直到它们进入视图。这确实有助于加快您的网站加载时间。
最后，我们将选择“完成设置向导”以完成初始设置。
Smush 现在将对您的图像进行扫描，以收集有关需要压缩的图像的一些数据。
如您所见，我们有 49 张图像需要压缩。
然而，在我们压缩这些之前，让我们仔细检查我们的配置。
向下滚动到“设置”区域，我们看到的第一个选项是我们的图像尺寸。如此处所述，WordPress 会为上传到您网站的每个图像生成多个图像缩略图。如果您不希望压缩特定尺寸，您可以在自定义选项卡中选择它。
我们还可以修改在设置向导期间所做的任何配置，最后我们可以修改图像大小调整设置。
我们将选择此选项并将宽度更改为 2000 像素，因为这是我们网站上需要的最宽图像。
完成后，选择“更新设置”，现在是时候压缩我们的图像了。
选择“Bulk Smush Now”按钮并等待插件发挥它的魔力。请注意，您需要保持此窗口打开才能使按压成功。
完成后，您应该会看到一条警告，告诉您“所有图像都已被弄脏”。
在页面顶部，您可以看到已缩小的文件大小。
在我们的网站上，我们设法为所有图像节省了 1.4 MB 的空间。
为了进一步检查我们图像中的确切尺寸减小，让我们转到媒体库。
如果我们选择我们的英雄图片，您现在将在文件 URL 下方看到一个名为“Smush”的新选项。
我们可以看到这张图片和它的缩略图已经减少了 13.1 KB，减少了将近 3%。
我们还可以选择“查看统计信息”链接来查看有关图像每个缩略图版本的更多信息。
在您的网站上使用图像优化插件对于未优化的图像至关重要，但对于已经在 Photoshop 等工具中优化的图像也可以帮助减少几千字节。
请务必尝试使用可用的工具来找到最适合您的配置。
确保您的图像针对性能进行全面优化很可能是您可以对网站做出的最大改进之一。
更快的加载图片会对您网站的性能产生很大影响，也会改善用户体验。
在我们的下一课中，我们将探索可以应用于我们网站的其他性能提升，以进一步提高您的网站性能。
