如何优化图像以提高网站的页面速度和 SEO

已发表: 2022-02-07

在为他们的 SaaS SEO 策略查看实时和当前起草的网页时，我看到的一个常见错误是，图像总体上没有针对网站健康和速度进行优化。 我们都听过这句话：“一张照片胜过一千个字”。 尽管这是陈词滥调，但它是真实的，也许更值得。

图像抓住了我们的注意力并帮助我们与所看到的事物联系起来。 他们构建了一个故事，并且往往给人留下更持久的印象，而不仅仅是一大段文字。 许多人喜欢从 Unsplash 等无版权的图库摄影网站获取库存图片。

谷歌高度优先考虑快速页面。 通过忽略图像优化的必要步骤，您正在为一场艰苦的战斗做好准备。 添加到页面的图像数量直接影响加载速度时间。 页面的图片越多，加载速度就越慢。 在本指南中，我们将介绍我在针对页面速度和搜索引擎优化图像时所经历的 5 个步骤。

裁剪和调整图像大小

默认情况下，我们下载的照片非常大且质量很高。 决定该图像的大小或分辨率取决于您的图像将被查看的最大尺寸。 人们认为他们拥有最高质量的形象来打动他们的客户甚至他们自己，但他们没有意识到这种非常负面的影响。 在决定图像的尺寸时，请考虑查看图像的最大尺寸。

如果仅用于以 300 x 300 像素显示的小轮廓图像或头像，则不需要图像尺寸为 6000 x 6000 像素。 根据我的经验，我发现页面上最大的图像将是顶部的英雄图像。 在保持质量的同时保持安全的尺寸是使其成为 1920 x 1080 像素的标准高清尺寸。

提示和技巧：如果博客或网页的横幅图像显示质量略低于您的预期，请考虑应用透明覆盖。 这将使它看起来像是设计的一部分，并使任何文本更易于阅读。

下面，我使用 Figma 来调整和裁剪我的图像。 这个过程非常简单，因为您所要做的就是拖放然后根据自己的喜好更改图像。 这是在 Windows 上使用 Figma 正确编辑图像所需的两个控件。

  • Shift + Drag - 将在保持相同比例的同时向上或向下缩放整个图像。
  • Ctrl + 拖动 - 仅更改高度或长度而不拉伸图像。

导出为不同的文件类型

重要的是要考虑要使用哪种文件格式。 许多格式可以用于不同的目的。 根据用户的观点，每个都有自己的优缺点。 以下是我经常看到的一些最常见的：

  • PNG - 适用于您需要查看小细节的图形设计或图像 这是以更大的文件大小为代价的。
  • JPEG - 用于人物和地点的真实摄影。 它可以压缩得更多，但会丢失更多信息，因为您不需要这些细节。
  • SVG - 非常适合图标和徽标，因为它们可以放大和缩小而不会损失任何质量。 这仅适用于创建的图像文件。
  • WEBP - 可以替换 PNG 和 JPEG 的较新版本的图像。 WEBP 具有与两者相似的图像质量，同时能够节省 25%-40% 的空间。 唯一的缺点是目前，Apple 的 Safari 浏览器不支持此功能，因此您需要备份 JPEG 或 PNG 才能加载。
  • GIF - 这些是倾向于循环播放的视频或动画剪辑。 这些对于捕捉场景或展示产品界面的工作方式非常有用。 本文提供了一些很好的示例来说明如何使用它们。 由于它们是一系列动画图像，因此与单个图像相比，它们的文件大小通常会更大。

我喜欢尽可能使用 JPEG，因为它需要的数据最少，但在这里我使用 PNG 来使屏幕截图更加清晰。 与 WEBP 一样，可能还有更新的格式，因此最好的做法是不断研究 Google 如何查看和排名每个可用的格式，以便为您的网页找到最快和最佳的答案。 以下是有关最流行图像类型的更深入指南的链接。

使用图像压缩器

下一步是尝试通过压缩和减小文件大小来使您拥有的文件尽可能小。 通过使用图像压缩器并处理图像，我们有时可以将图像的文件大小缩小多达 90%。 我喜欢使用的一个非常有用的工具叫做 Compressor。 通过使用此工具，您可以在其免费计划中每天最多压缩 50 张图像。

在这里，我正在拍摄我导出的图像，并将其拖入图像放置部分。 几秒钟后，新图像就可以下载了，大约只有原始大小的十分之一。 您还可以导入多个图像并一次下载它们，如底部的选项所示。

“懒惰”与“渴望”加载图像

既然您的图像格式正确并压缩到正确的大小，您可能会认为一切顺利，但还有一些事情需要确保您这样做。 在许多模板和网站中，图像加载速度设置为由浏览器默认加载，这可能会导致页面上的所有图像同时加载。 对此的解决方案是延迟加载图像。

“延迟”加载延迟加载元素，直到它在页面上可见。 当您拥有多个图像时，这可以提高站点性能。 与此相反的是“急切”加载，它会立即加载元素。 这通常与默认的 Web 设置一致，因为没有设置首先或最后加载哪个图像的首选项。

这是 HubSpot 博客编辑器中的示例。 导航到插入图像的高级选项后，我们可以看到我们可以设置其加载设置。 选择“懒惰”并点击应用。 现在，只要用户滚动得更近，图像就会出现，并减少了那些宝贵的加载时间。

记得添加替代文字

最后要访问的是在图像中包含 Alt 文本。 这可能不会影响您的页面加载速度，但始终需要考虑和添加。 当您将该部分留空时，您会错过许多提高 SERP 排名的机会。

需要注意的重要一点是，Alt 文本解释了图像与内容相关的“原因”。 它被谷歌索引，并为视障人士通过文本到语音朗读。 如果您只是在图像中塞入一个无法解释正在发生的事情的关键字，那么这可能不是最好的方法。

在这里，我将替代文本添加到图像中。 我基于短语 SEO 页面速度健康。 不仅包括关键字，还解释图像中的操作方式或内容。 我决定使用“使用图表检查 SEO 页面速度健康”这一短语来详细说明。

这对于图像可能对 Google 索引有什么影响提供了更多信息，并为视障者提供了更大的可访问性。

让我们回顾一下创建/优化图像的步骤：

  1. 将图像拖到 Figma 等图像编辑器中进行裁剪和调整大小。
  2. 将其导出为适当的图像类型（PNG、JPEG、SVG、WEBP 等）
  3. 将其带到图像压缩器站点，例如 Compressor 或 Image Resizer Online
  4. 将压缩图像作为延迟加载插入到您的内容中。
  5. 添加描述页面上图像的替代文本。
  6. 您现在拥有适合您网站的完美图片！
  7. 查看 Google Search Console 以检查您的性能提升。

按照这些步骤，您将正确地维护和优化您的图片以进行 SEO 并加快您的页面速度，创造出色的用户体验！