WordPress 图像优化:终极指南

已发表: 2020-11-13

WordPress 图像优化涉及减少或压缩 WordPress 网站上图像的文件大小,而不会对图像在屏幕上的显示方式产生负面影响。 当您努力优化 WordPress 中的图像时,您将加快您的网站和页面速度,这最终有助于吸引更多新的网站访问者。

在本指南中,我们来看看 WordPress 图像优化是什么,为什么要优化图像和图像优化技术。 我们还研究了 WordPress 图像优化插件、图像分辨率和图像格式。 最后,我们将总结 WordPress 图像优化如何影响 SEO。 我们走吧!

在本指南中

    要了解图像优化的重要性,请问自己一个简单的问题:当您访问一个新网站并且页面加载不快时,您会怎么做?

    如果你和很多人一样,你可能会关闭它并继续前进,对吧? 至少,您会对网站加载所需的时间感到不耐烦和沮丧。 或者,如果你确实留下来,那只是因为你真的对那个特定的内容感兴趣。 阅读完这篇文章后,您可能再也不会回到那个网站了。 该网站简直太慢了。

    这种经验与为什么需要在 WordPress 中优化图像有什么关系? 页面加载时间通常受图像大小的影响很大。 因此,在改善用户体验甚至您的 SEO 排名方面,WordPress 图像优化发挥了重要作用。

    什么是 WordPress 图像优化?

    WordPress 图像优化是一种减少图像文件大小的技术,而不会对图像在屏幕上的肉眼显示方式产生负面影响。 WordPress 图像优化的目标是缩小图像文件大小,而不会注意到图像质量有任何损失。

    可以使用不同的工具和技术以多种方式为 WordPress 网站优化图像。 利用较小的文件大小意味着您可以用更多图像填充您的网站,而不会降低其重量或使其运行速度变慢。

    在优化 WordPress 网站时,优化所有 WordPress 网站图像应该是您优先考虑的事项。 图像优化过程将使您的网站比以往任何时候都更轻,加载速度更快,吸引更多新用户并让他们回来查看更多内容。

    毕竟,无论您的内容有多棒,用户是否在消费之前离开都无关紧要。

    为什么要在 WordPress 中优化图像?

    您应该在 WordPress 中优化图像有四个主要原因。

    1. 加快页面加载时间
    2. 改进 SEO(搜索引擎优化)
    3. 减少服务器负载
    4. 减少整体网站大小,以减少所需的资源
    5. 掌握重要的 WordPress 维护任务
    获得奖励内容:终极 WordPress 维护清单
    下载 PDF

    让我们来看看 WordPress 图像优化时页面加载时间的一些细节。

    在 2020 年,一个需要 10 秒或更长时间加载的网站根本不会吸引用户的注意力。 虽然没有最佳目标页面加载速度的确切定义,但最近的专家研究表明:

    1. 前十秒极大地影响了用户在网页上停留的时间。 如果所有内容没有在这么短的时间内显示出来,读者就会从您的页面或帖子中跳出。
    2. 在 79% 的情况下,如果用户对网站速度不满意,他们将永远不会返回该网站,因为速度是杀手。
    3. 更糟糕的是,整整 47% 的不满意用户不仅会亲自拒绝您的网站,还会通过与朋友谈论他们的体验来劝阻其他用户。 他们也更容易在社交媒体和谷歌上留下负面评论。

    所有这些统计数据意味着将您网站的页面加载时间保持在 10 秒以下绝对至关重要。 实际上,您的目标应该少于三秒。 这就是 WordPress 图像优化的用武之地。

    影响 WordPress 页面加载速度的因素

    您希望您的 WordPress 网站加载速度更快,但您不确定从哪里开始。 今天的主要焦点是图像优化,您将在本文末尾有一个透彻的了解。

    但作为 WordPress 优化更大努力的一部分,了解影响您网站速度的所有因素非常重要。

    对于闪电般快速的网站,重要的是:

    1. 使用轻量级的图像

    使用“轻量级”的图像是通过图像优化来实现的。 目标是在不损失任何质量的情况下将图像压缩到最大。 这个过程被称为无损压缩(我们稍后会详细介绍)并且需要使用图像优化器。

    2. 优化您的网站缓存

    WordPress 缓存通过减少站点访问者的浏览器、站点的 WordPress 数据库和站点的 Web 服务器之间的数据传输量来帮助您的站点更快地加载。 一个 WordPress 缓存插件,可在必要时手动和自动保留和清除您的站点缓存。

    3. 使用优质的 WordPress 主机

    严肃的 WordPress 网站所有者出于某种原因不会以每月 4 美元的托管计划运行他们的网站。 虽然这些对于运行个人博客使用很少资源(并且没有获得大量流量)的个人来说可能很好用,但对于负载更高且需要更快网站速度的网站所有者来说,它们并没有削减它。

    花一些时间寻找数据中心分布在多个地区的优质托管托管服务提供商。 此外,在购买主机时比较服务器级别的响应时间。 这些因素肯定会影响您的网站为用户加载的速度。

    4. 优化代码

    为您的网站提供支持的代码也需要优化,以加快页面加载时间。 一般来说,优化 WordPress 网站上的代码意味着:

    • 使用高质量的插件和主题
    • 保持您的主题和插件更新到最新版本
    • 不使用功能或特性重叠的插件
    • 卸载/删除任何未使用的插件或主题。

    开发人员需要通过以下方式缩小代码:

    • 删除格式和注释
    • 摆脱多余的空间
    • 删除未使用的逗号和代码

    缩小所有资源中的代码非常重要,包括 HTML、JavaScript 和 CSS。 为了缩小你的 HTML,一个强大的工具是 HTMLMinifier。 对于 JavaScript,试试 UglifyJS。 Closure Compiler 也值得研究。 说到你的 CSS,CSSNano 是一个不错的选择。

    5. 减少重定向

    有时需要设置重定向以避免那些讨厌的 404 错误。 但如果可能,请始终避免所谓的“多用途重定向”。

    这意味着您的重定向来自例如 example.com > example.com/subdomain > example.com/subdomain/redirect.html。 在运行这些多个重定向的情况下,目标页面在三秒或更短的时间内加载将非常困难。

    一个重定向没问题。 不止一个通常不是。

    现在您已经了解了影响网站速度的其他因素,让我们专注于优化您的 WordPress 图像。

    归根结底,无论您是运行一个小型企业网站还是为多个客户管理多个 WordPress 网站,WordPress 图像优化都是您想要实施的过程。

    WordPress 会自动压缩图像吗?

    是和否。 随着 WordPress 5.3 的发布,WordPress 核心引入了对上传高分辨率图像的改进支持。 其中包括您使用高质量相机或智能手机拍摄的图像。

    • WordPress 5.3 中引入的图像压缩功能会检测大图像何时上传,然后自动生成图像的网络优化版本。
    • 上传后,图像会自动调整为 2560 像素,这是 WordPress 中的新全尺寸。
    • 当您上传的图像调整大小时,“缩放”一词会添加到您的文件名称中。
    • 如果由于服务器超时而自动调整图像大小失败,WordPress 将不断重试,直到生成优化的图像。

    对 WordPress 核心的这次更新对于开发人员来说是一个重要的更新,他们可能没有意识到他们的大图像文件拖慢了他们网站的速度。 然而,WordPress 提供的内置图像优化并不是一个很好的全面解决方案,也不是单独为每个 WordPress 开发人员量身定制的。 这是一个很好的第一步,但要完全最大化您的图像优化,您需要走得更远。

    如何在 WordPress 中优化图像?

    在 WordPress 中完全优化您的图像并不太难。

    为您的 WordPress 网站优化图像的主要方法有以下三种:

    1. WordPress 图像优化插件,可让您直接从 WordPress 管理仪表板完成工作。
    2. 预上传图像优化器软件/应用程序——这些应用程序可以是像图像优化器这样的开源软件,或者至少是一个照片编辑器,或者提供图像尺寸调整功能的付费应用程序。 Photoshop 是高级软件应用程序的一个示例,它允许您调整图像分辨率以压缩图像以供 Web 使用。
    3. 在将图像上传到 WordPress 之前压缩和优化图像的免费在线服务

    使用上传前图像优化器

    通常,优化图像意味着对其进行压缩。 图像优化器或压缩器是一种软件程序,您可以将其安装在个人设备上或通过 Web 浏览器在线访问。

    要使用图像优化器,您只需上传图像并允许程序对像素进行轻微更改。 这些电荷无法用肉眼检测到,这就是该过程有时被称为无损压缩的原因。

    当您将音频文件压缩为 MP3 时,会应用相同类型的技术。 在这个过程中,高频以一种耳朵无法检测到任何变化的方式被策略性地降低。

    上传前图像优化工具选项

    在将图像上传到 WordPress 之前,您有很多工具可以压缩和优化图像。

    1. 桌面照片编辑器

    如果您是 Photoshop 的普通用户,则可能不需要进一步压缩图像。 这是因为您可以以您喜欢的任何分辨率导出新创建的图像。

    大多数其他桌面照片编辑器的原理相同。 但实际上,如果您还没有使用 Photoshop 为您的网站创建图像,那么您可能不会花时间学习这样一个仅用于压缩图像的复杂程序。

    但是,像 Photoshop 这样的桌面照片编辑器是压缩和优化图像的独立选项。

    2. 移动应用程序和在线照片编辑器

    照片编辑应用程序和在线照片编辑器(如 Fotor 和 Pixlr)用于进行基本的照片编辑。 其中许多工具还包括在将图像上传到 WordPress 之前优化图像的选项。

    然而,就像使用 Photoshop 来完成这项工作一样,使用这些类型的工具几乎感觉有点矫枉过正。 其中一些解决方案是有代价的,您可能不会使用它们的大部分其他功能。

    3. 基于 Web 的图像压缩器

    如果您想在将图像上传到 WordPress 之前对其进行优化,那么基于 Web 的专用软件可能是您的最佳解决方案。

    只需在 Google 上搜索“在线图像压缩器”一词,然后选择名称最有趣的免费压缩器即可。 它们中的大多数以完全相同的方式工作。

    选择您喜欢的一种后,您需要做的就是上传图像并选择要应用的压缩类型。

    此外,许多基于 Web 的服务提供批量优化选项,如果您需要优化大量文件,这些选项非常有用。

    WordPress 图像优化插件

    如果您想要一个在您的 WordPress 内容管理系统中正常工作的 WordPress 图像优化器,那么图像优化插件就是您的最佳选择。

    使用 WordPress 图像优化器插件,您只需将图像上传到 WordPress,插件就会自动将其压缩为您预定义的设置。 如果您愿意,您还可以手动压缩和优化每个图像。

    在 WordPress 插件库中,您会发现许多用于优化图像的插件。 一些最好的 WordPress 图像优化插件选项是:

    Smush – 延迟加载图像、优化和压缩图像
    EWWW 图像优化器
    压缩 JPEG 和 PNG 图像

    选择最容易使用的一种,并根据您的需要进行定制。

    注意:我们只建议使用这些 WordPress 图像优化插件之一。 正如我们之前提到的,最好不要在具有类似功能的插件上加倍。

    什么是最佳图像分辨率?

    通常,基于 Web 的图像分辨率的理想目标是 72 PPI。 然而,网站并没有一个公认的、通用的“完美图像分辨率”。 基本上,如果压缩图像在上传后在您的网站上没有出现像素化或扭曲,则图像分辨率非常适合在您的网站上使用。

    与打印行业不同,打印行业所需的图像分辨率为 300 DPI(每英寸点数),您需要在继续之前检查上传的图像在大型计算机显示器上的显示效果。

    尺寸重量比怎么样?

    颜色在图像“重量”方面起着重要作用。 一张大小为 1000×800 像素且元素很少的简单黑白照片可能重约 100 KB。 但是,具有高对比度和鲜艳色彩的完全相同像素大小的照片有时会超过该数量的八倍。

    您的站点主机可能会限制您的最大重量并限制您可以上传的文件大小。 但是大小重量比将始终依赖于图像的结构。

    也就是说,WordPress 图像没有最佳的大小重量比。 在不牺牲视觉质量的情况下,尽最大努力将它们保持在尽可能低的水平。

    什么图像格式最适合 WordPress 网站?

    有关图像大小和质量的官方 WordPress 文档建议您在 WordPress 驱动的站点上使用 JPEG 或 PNG 文件。 因此,这些是所有 WordPress 网站上发布的最常见的图像格式。

    根据您发布的具体内容,JPEG 和 PNG 文件的工作方式略有不同。

    JPEG(或 .jpg)文件非常适合所有光栅(由像素而不是线组成的图像)​​。 特别是照片几乎总是保存为 JPEG 文件。

    当您将照片另存为 JPEG 时,它通常会自动按一定百分比进行压缩。 顶级照片编辑器允许您准确控制压缩过程删除了多少细节。

    最好在这里选择绝对最小压缩量,然后稍后使用我们已经讨论过的图像优化器之一压缩图像。 这有助于避免图像失真。

    PNG 文件用于艺术线条和照片。 当您将图像保存为 PNG 时,它将被压缩而不会丢失任何细节。 但是,PNG 文件通常比 JPEG 大得多。 这种文件格式最适用于矢量文件。 无论大小,它们都不会变形。

    WordPress 也支持 GIF 格式的图像。 但是,这不是我们推荐使用的格式,因为无论您转换文件多么小心,它都会导致最大程度的失真。

    WordPress 网站是否受益于图像优化?

    这个问题的简单答案是肯定的。 例如,您的网站是否在每个页面的顶部显示您的专有徽标并在您的网站上发布? 您可能不相信该图像文件有多么沉重,或者仅凭这一点就会降低您网站的性能。 尝试优化它并检查它在站点速度和性能方面的差异。

    您是否几乎每天都将新图片上传到您的博客? 您目前是否正在管理拥有数百张产品图片的电子商务商店? 如果是这样,请不要忘记在 WordPress 上安装一个插件,它会自动优化您上传的新图片以及您网站上已有的图片。

    事实是,您的网站属于哪个类别并不重要。 如果可能,请在您仍在设计网站时开始考虑优化其速度。 不要等到它准备好启动。

    如果您的网站已经启动,请使用上面提到的简单插件之一来批量优化您网站上的所有图像。

    图片优化和搜索引擎优化

    虽然优化图像并不是完善不断变化的 SEO 规则的唯一答案,但网站的速度仍然是一个主要的决定因素。 这就是为什么 WordPress 图像优化对您的 SEO 策略如此重要的原因。

    图片的大小可能会以多种方式对您网站的搜索结果产生负面影响。

    跳出率

    我们已经讨论过使用大图像文件会如何降低您的网站速度。 但是您是否知道像 Google 这样的主要搜索引擎实际上会测量您的平均页面加载时间,并将加载速度最快的网站在搜索结果中排名最高?

    搜索引擎还会测量他们抓取的每个网站的跳出率(当用户登陆您的网站但没有访问第二页或帖子就离开时)。 高跳出率的一个主要决定因素是网站速度慢。

    如您所见,高跳出率会使您的网站一落千丈到搜索引擎结果的底部。 然而,较低的跳出率会让你在名单上名列前茅。

    更快的网站速度几乎总是等于更低的跳出率。

    页面优先级

    谷歌曾多次表示,页面速度是网站排名和页面优先级的一个非常重要的因素。 图片平均占整个网站存储空间的 60% 以上。

    如果您不优化图像,该数字可能会高得多。

    同样,这意味着一个较慢的网站和较低的谷歌排名因素。

    这对企业不利。

    图像元数据优化

    将元数据视为提供有关其他信息的更多信息的信息。

    对于图像,元数据是您编写并保存在图像文件中的文本信息。 此信息对 Google 和其他搜索引擎可见。

    作为 WordPress 开发人员,优化图像元数据所需要做的就是在将图像上传到媒体库时填写小表单。

    您需要输入数据的区域是:

    • 替代文字
    • 标题
    • 标题
    • 蛞蝓

    通过在这些字段中应用对搜索引擎最友好的文本,您的图片将更有可能出现在 Google 图片搜索中。

    在 Google 图片搜索中排名更高会为您的网站带来比您想象的更多的流量。

    WordPress 图像优化变得容易

    在阅读本文之前,您可能还没有完全了解 WordPress 图像优化可以在多大程度上提高 WordPress 网站性能的各个方面。 当您使用上面详述的方法和技巧优化图像时,您的网站将能够以与大男孩相似的水平执行。

    但是,当您的网站流量开始增加时,您准备好应对随之而来的安全威胁了吗? 像 iThemes Security Pro 这样强大的 WordPress 安全插件可以在这些威胁成为问题之前将它们扼杀在萌芽状态。

    获取奖励内容:WordPress 安全指南
    点击这里

    如果最坏的情况确实发生并且您需要在安全漏洞(或其他灾难)后恢复您的站点,您会很高兴您有一个可靠的 WordPress 备份计划,使用 WordPress 备份插件(如 BackupBuddy)。 相信我们,它将为您节省数小时的劳动和挫折。

    现在,让 WordPress 图像优化开始吧!