在 WordPress 中优化图像以提高页面加载速度的 7 种方法
图像是任何网站不可避免的一部分。 正如流行的名言所说——“一张照片胜过一千个字”。 图像在表达思想方面非常有用，特别是对于教程、摄影和如何访问网站。 随着社交媒体的嗡嗡声，您有必要为每个帖子提供特色图片以吸引人地分享。 现在你可能会想到这个问题——我在我的 WordPress 网站上使用了大量图片，我应该做什么优化？
简单的答案是页面上的每个图像都会影响加载速度，从而直接影响用户体验。 没有人喜欢加载缓慢的网站，因此您需要以最高优先级处理图像优化问题。
我如何知道图像优化问题？
这非常简单，并且有很多免费工具可以检查页面加载速度。 谷歌有专门的 PageSpeed Insights 工具 衡量页面上影响加载速度的问题。 在工具上输入您的页面 URL 以查看如下结果：
在 Google PageSpeed Insights 中优化图像
当您的图像未压缩时，您应该将“优化图像”视为首要问题。 图像压缩是您将在 Google PageSpeed Insights 工具上看到的主要问题之一。 但是在使用诸如 密码域 和 GTmetrix 如下。
- 跨主机名并行下载
- 提供来自无 cookie 域的静态内容
- 指定图像尺寸
- 提供缩放图像
所有这些问题都可以通过插件和遵循简单的指南轻松解决。
如何优化 WordPress 中的图像以提高页面加载速度？
以下是提高页面加载速度的优化技术总结：
- 减少服务器上的图像数量
- 使用插件压缩图像以节省大小
- 提供来自子域的图像
- 使用正确的图像尺寸
- 避免在 HTML / CSS 中调整大小
- 尽可能使用矢量图标
- 选择合适的图像格式
1.减少图像数量
页面上的每个图像都会向您的服务器发送单独的 HTTP 请求，并需要一些时间来下载。 谚语“一张图片胜过一千个单词”可能看起来不错，但实际上只在需要时才使用图片。 更少的图像意味着更少的服务器请求和快速加载页面。
另一方面，图像会占用您服务器上的空间并增加托管主机。 特别是 WordPress 会根据安装的主题和插件生成大量缩略图。 查看有关如何减少 WordPress 网站上的缩略图的文章。
2.压缩图像以节省大小
页面加载时，浏览器需要从您的服务器下载图像。 减少每 KB 的大小取决于性能； 因此确保在适当压缩后提供图像。 例如，图像具有位置、相机详细信息等元数据。除非您明确需要，否则请使用插件删除这些数据以减小图像的大小。
图像可以通过两种方法压缩——有损和无损。 简单来说，有损压缩是一种不可逆的方式，会从图像中删除一些数据像素。 无损压缩是一种可逆方式，它可以在不删除任何像素的情况下压缩图像。 根据图像格式（PNG / JPEG / GIF）、质量和所需的压缩，您可能需要尝试使用不同的插件来查看适合您的插件。
如果您要优化的网页或图像很少，那么我们建议您通过图像压缩工具来完成。 以下是您可以使用的一些图像压缩工具：
WordPress 有许多免费和高级的图像压缩插件。 两个这样的流行插件是 – EWWW 图像优化器 和 WP-Smushit. EWWW Image Optimizer 有很多设置，并在您自己的托管服务器上进行压缩。 虽然 WP-Smushit 简单明了，但它会压缩外部服务器上的图像。 一旦安装并激活，这些插件将有助于在上传图像时自动压缩图像。 这是关于如何使用 WP-Smushit 插件的完整教程。
WP Smush WordPress 插件
请记住，图像压缩插件会消耗大量服务器资源。 不要一次压缩数百张图像，这将导致违反托管公司的条款。 以足够的间隔压缩较少的图像以避免服务器上的高负载。
3. 提供来自子域的图片
建议在单独的子域上托管图像。 这将有助于将图像与主域中的内容并行加载。 由于图像是从不同的地方加载的，因此您页面上的内容将加载得更快。
提供来自不同服务器的内容
查看我们关于如何将 WordPress 图像文件夹移动到子域的文章。
4.使用正确的图像尺寸
准备与在网站上显示的大小完全一致的图像。 当您需要 600×350 的图像时，不要准备 1200×700 的尺寸。 由于大小，浏览器需要很长时间才能下载较大的图像文件。 WP-Smushit 插件还有一个选项来设置上传图像的最大尺寸。 这将有助于将上传的图像调整到最大尺寸限制并减小图像尺寸。
5. 避免在 HTML/CSS 中调整大小
人们在将图像下载到浏览器后使用 HTML 和 CSS 来调整图像大小。 这只会增加一些加载时间，因为浏览器需要额外的时间来将图像渲染到所需的大小。
例如，上传 90×90 像素的图像并尝试使用以下 HTML 代码减小大小不是一个好习惯。
<img src="https://www.webnots.com/how-to-optimize-images-in-wordpress-to-improve-page-loading-speed/your image URL" height=45 width=45>
6.使用矢量图标
普通图像（称为光栅图像）有不同的格式，在放大到更大尺寸时无法正确渲染。 最好的方法是使用 SVG 可缩放字体图标，例如字体真棒图标而不是图像。 例如，导航菜单上的图标应该使用 SVG 字体图标。 将图像用于此类较小的图标不仅会扭曲外观，还会增加页面加载时间。 下面是使用字体图标的示例：
确保在服务器级别启用 GZIP 压缩以减小 SVG 图像和其他内容的文件大小。
7. 选择合适的图像格式
共有三种普遍支持的图像格式——GIF、PNG 和 JPEG。 每一个都有其一个优点和缺点。
- 需要动画时使用 GIF
- PNG可用于高分辨率和高质量的图像，如摄影图像。 但是PNG图像的尺寸会更大。
- JPEG 更适合普通的截图和图片尺寸较小、质量较低的网页图片（与 PNG 相比）。
选择所需的图像格式并使用插件对其进行压缩，然后再提供给用户。
结论
当您开始一个网站时，我们建议您尝试多种组合并检查哪个适合您。 如果您有一个已经运行的包含大量图像的站点，则使用插件来压缩所有现有图像。 使用 Google PageSpeed Insight 工具检查“优化图像”问题是否已消除，您的页面速度得分是否有所提高。 通过遵循上面列出的所有优化技术，将有助于将页面加载分数大幅提高到绿色区域。
