为您的站点优化图像的提示：提高性能和用户体验

已发表: 2022-04-28

您不希望 Google 鄙视您的网站，相信我们。幸运的是，您可以优化图像，从而提高网站的效率。格式化它们的一个问题是更改会影响它们的质量（这反过来可能会使访问者讨厌您的网站）。

如果你不让它们看起来很糟糕，那并不是一件可怕的事情。有一些技巧和技巧可以让您减小图像的文件大小，同时仍然保持它们足够吸引人以自豪地展示在您的网站上。

因此，让我们看看如何格式化您的照片而不让它们看起来很糟糕，以及如何针对网络和性能优化它们。

优化图像意味着什么？

看膝上型计算机屏幕的惊奇的正式男性

大图像会导致您的网页加载缓慢，从而导致用户体验不佳。通过使用图像优化，也就是使用插件或脚本减小文件的大小，您不仅可以保持它们的质量，还可以缩短加载时间。两种常用的压缩方法是有损压缩和无损压缩。

为什么首先需要格式化照片？有什么优势？对照片进行性能优化有多种优势。根据 HTTP Archive 的数据，截至 2018 年 11 月，图片占网页总权重的 21%。

这使其成为您需要优化的网站中第二重要的部分，仅次于视频。

它优先于脚本和字体。尽管正确的图像优化程序是最容易建立的事情之一，但许多网站所有者都错过了它。

以下是一些最重要的优势：

使用 MacBook Pro 的人

图像格式化的主要目的是在质量和文件大小之间找到平衡。几乎所有这些优化都可以通过多种方式完成。在上传到您的 WordPress 网站之前压缩它们是最常用的方法之一。这通常在 Adobe Photoshop 或 Affinity Photo 等程序中完成。

文件格式和压缩类型是您必须始终考虑的两个因素。要找出最适合每种图像或文件类型的方法，您必须进行探索。

在开始编辑照片之前，请确保您已为照片选择了最佳文件类型。您可以使用多种文件，包括：

还有一些其他的，例如 JPEG XR 和 WebP，尽管并非所有浏览器都支持它们。对于有很多颜色的照片，您应该使用 JPEG 或 JPG，对于普通图像，您应该使用 PNG。

黑色耳机旁的 Macbook pro

有两种可接受的图像压缩方式，称为有损和无损。

术语“有损”是指删除一些数据的过滤器。因为这会损害图像，所以您需要谨慎对待将其最小化的程度。要执行此类优化，您可以使用 Adobe Photoshop、Affinity Photo 等软件。上面的示例中使用了有损压缩。

术语“无损”是指数据压缩过滤器。这对图像质量的影响很小。在您的 PC 上，您可以使用 Photoshop、FileOptimizer 或 ImageOptim 等应用程序进行无损压缩。

最好尝试几种压缩策略，以找出哪种压缩策略对每种图像或格式表现最佳。

有多种工具和应用程序可供付费和免费使用，可帮助您优化照片。一些公司为您提供工具来执行您自己的优化，而其他公司则为您提供。

我们是 Affinity Photo 的大力支持者，因为它价格低廉，并且具有与 Adobe Photoshop 几乎相同的功能。

以下是一些需要研究的资源和举措：

过去，提交照片以按比例缩放而不是让 CSS 调整它们的大小是至关重要的。由于 WordPress 4.4 现在支持响应式图像，这不再是问题。添加到媒体库的每个图像都会由 WordPress 自动调整大小。通过指定图像的所有潜在尺寸，浏览器现在可以选择最合适的尺寸并忽略其他尺寸。

如果您想在清理媒体库的同时节省空间，您可以使用 Media Cleaner 来查找不需要的媒体文件。该插件将扫描您的所有媒体文件，并在 Media Cleaner Dashboard 上显示任何未使用的文件，供您查看和删除。

平面显示器

值得庆幸的是，您不必使用 WordPress 手动处理所有格式或压缩。您可以利用插件为您自动完成至少部分工作。有许多可用的插件可以在您提交图像文件时对其进行优化。他们甚至会提高您已经发布的照片的质量。

一旦您准备好照片以获得更好的性能并遵循最佳实践，您的网站将更受搜索引擎、浏览器和网络的喜爱，并且将为您的读者加载更快。

您是否准备好照片以使它们运行得更快？您是手动完成，使用插件还是同时使用两者？是否有您建议的程序或插件？你还有什么想说的吗？

在评论部分告诉我们您的策略和最佳实践。