在 WordPress 中使用 WebP 图像

已发表: 2021-03-30

您可能已经知道，在网站方面，速度很重要！您可以做的最重要的事情之一就是加快您的网站的速度是减小页面大小。它越小，需要下载的数据就越少。数据越少，页面可能加载得越快（在合理范围内！）。

图像占网页文件大小的很大一部分（有时超过 50% 的页面数据是图像）。这使得图像成为您追求更小的页面大小时节食的第一目标！传统上，网站上使用的大多数图像都是 JPEG 或 PNG。两者都是在网站上运行良好的优秀文件类型。然而，它们可能存在尺寸问题。虽然建议使用 TinyPNG 之类的工具（并且可能会对您添加到站点的图像的大小产生巨大影响），但如果存在“直接开箱即用”的较小图像格式怎么办。嗯，有，它被称为 WebP。

在本文中，我们将更详细地了解 WebP 图像，以了解它们是什么以及如何在 WordPress 网站上使用它们。所以，如果你一直想精简你的网站，那就去喝杯咖啡和一些蛋糕（没有人说我们必须像我们的网站一样节食！）然后让我们开始吧！

什么是 WebP 图像？

那么，您可能听说过人们谈论的这些 WebP 图像是什么？好吧，没有什么太复杂或太神秘了。基本上，它只是另一种文件类型。它们不是保存为 JPEG 或 PNG 格式，而是保存为 WebP。 WebP 实际上是由 Google 开发的。他们将 WebP 描述为“一种现代图像格式，可为网络上的图像提供卓越的无损和有损压缩。使用 WebP，网站管理员和 Web 开发人员可以创建更小、更丰富的图像，从而使 Web 更快。

谷歌喜欢一个快速的网站，所以他们应该带头提供一种可以帮助网站运行得更快的图像格式是有道理的。 WebP 文件通常比等效的 JPEG 文件高 25% 到 34%（根据 Google 自己的研究）。基于图像可以构成网页上的大部分数据，这是一个显着的节省。

不要担心你会失去图像的质量——WebP 的整个目标是能够以一种从视觉角度保持高质量的格式保存图像，同时保存在一个小文件中。文件格式。双赢。

因此，如果 WebP 图像尺寸较小，同时仍为您的用户提供出色的视觉体验，您可能想知道为什么它们没有得到更广泛的使用。这有几个关键原因。

可用性：目前，大多数图形设计软件（如 Photoshop 或 Illustrator）都不支持 WebP 图像。在这些程序中工作的任何人都将习惯于打开图像文件（所有描述、JPEG、GIF、PNG 等），并根据需要“开始”进行编辑。此外，在保存这些文件时，您通常可以导出为任何常见的图像格式。使用 WebP，这是不可能直接开箱即用的。相反，您可能需要从 WebPShop 下载插件才能使用“普通”图像编辑软件。在 WebP 图像变得像 JPEG 和其他格式一样无处不在之前，总是不愿意“过度复杂化”事物，许多网页设计师将继续使用更传统的图像格式。
浏览器兼容性：WebP 并非所有浏览器都普遍支持。这意味着，虽然大多数使用 Chrome 或 Mozilla 等最新浏览器的访问者查看这些图像不会有问题，但仍有相当一部分访问者无法查看保存的网站图像作为 WebP，它尤其包括 Safari，它仅根据使用的版本（在撰写本文时）提供部分支持。您需要一种解决方法（我们将在下面讨论），以确保您的所有访问者都能看到您的网站，如您所愿。

所以，问题必须是“我应该使用 WebP 吗？”。好吧，看起来人们似乎开始更多地注意到什么是一种令人难以置信的创新文件格式。而且，如果速度对您来说真的很重要，并且您有资源使用 WebP 图像创建网站，那么您为什么不呢？与所有新技术一样，有时起步可能会很慢，但最好是领先于曲线而不是竞相赶上您的竞争对手！考虑到这一点，让我们看看如何在 WordPress 网站上使用 WebP 图像。

如何在 WordPress 中使用 WebP 图像

任何在 2021 年 7 月之前直接潜入并尝试将 WebP 文件上传到其 WordPress 网站的人都会有些失望。您可能希望通过媒体中心上传的任何 WebP 图像都能正常保存。相反，您可能已经看到了这样的屏幕：

值得庆幸的是，自从 WordPress 5.8 发布以来，您现在可以将 WebP 图像直接上传到 WordPress，这使得这种出色的图像格式与 JPEG、PNG 和 GIF 格式一样易于使用。像这样的持续改进是将 WordPress 核心升级到最新版本有意义的可能原因之一。当然，如果您使用的是像 Pressidium 这样的托管 WordPress 主机，那么我们会为您解决这个问题，帮助确保您始终运行最新最好的 WordPress 版本。

在 WordPress 5.8 发布之前，使用 WebP 图像的最简单方法之一是安装一个插件，该插件将支持的图像格式（例如 PNG）转换为 WebP 文件，然后在您的站点上显示这些文件。使用 WebP 图像（我们在上面列出）有一些注意事项，并且使用合适的插件（例如 Shortpixel）可以消除这些缺点，因此仍然是值得考虑的解决方案。请继续阅读以了解更多信息！

短像素

Shortpixel 是一个很棒的插件，无论您是否选择使用 WebP 图像，都值得考虑使用。 Shortpixel 是一项成熟的图像优化服务。它运行您通过其出色的图像压缩服务上传的所有图像，通常将图像大小压缩 50% 或更多，而不会损失图像质量。它会自动执行此操作，这意味着您不必考虑在将图像上传到您的网站之前对其进行压缩。

要真正充分利用 Shortpixel，您需要为他们的计划付费。他们按“图像优化/月”收费，每月 5,000 张图像，每月只需 3.99 美元。对于许多网站来说，这个计划绰绰有余，而且考虑到与优化网站相关的性能优势，价格便宜。

Shortpixel 优化了各种图像格式，包括 JPEG 和 PNG。所以，您可能想知道，这如何帮助我将 WebP 图像添加到我的 WordPress 网站？

如果您还记得的话，并非所有 Web 浏览器都支持 WebP 格式，Safari 中仅支持部分 WebP，具体取决于所使用的版本（在撰写本文时）并且 Internet Explorer 不提供支持。创建一个不迎合这些访问者的网站根本不是一个可行的选择，即使那些使用过时或不受支持的浏览器的人可能是少数。

您可能还记得很多图像编辑软件也不支持直接开箱即用的 WebP 文件。所以，我们在两条战线上进行了一场战斗……我们不仅首先需要跳过障碍来创建或使用 WebP 文件，而且我们还需要找到一种方法来 a) 将它们添加到我们的 WordPress 网站和 b)为使用非 WebP 兼容浏览器访问我们网站的用户创建备用图片。

短像素救援

Shortpixel 有一种在 WordPress 网站上使用 WebP 图像的简洁方法。通过在他们的插件中勾选一个复选框，您可以告诉它为您上传的任何图像创建 WebP 版本。然后，您可以告诉 Shortpixel 插件在支持 WebP 的浏览器上显示这些 WebP 图像。

如果网站访问者浏览器无法显示 WebP 图像，则会自动显示替代图像格式。这为您提供了世界上最好的东西……使用小尺寸图像的网站所具备的速度，这要归功于 WebP 对于可以处理它们的浏览器，或者对于那些不能处理它们的浏览器来说是一个经过优化的替代方案。

WebP 现在是一种广泛采用的图像格式。无论您选择使用 WordPress 现在提供的本机上传功能，还是通过 ShortPixel 之类的插件生成它们，考虑将您的网站图像切换为 WebP 变体是非常有意义的，这样您的网站就可以利用减小的文件大小，这应该，反过来，转化为更快的加载网站。