WebP 图像指南:如何在 WordPress 中使用 WebP 格式
已发表: 2022-07-29我们都喜欢好的 GIF,但自 1987 年 GIF 推出以来,图像格式已经走过了漫长的道路。精明的网页设计师已经开始接受 JPEG、PNG 和现在的 WebP。
虽然 GIF 作为 Slack 频道和短信的素材正在享受第二次生命,但新的 WebP 格式开始接管网络。
在这篇文章中,我们研究了 WebP 的发展,并提供了有关如何将其用于您的网站的提示。 您将学习:
- 格式的工作原理
- WebP 图像的好处
- 使用 WebP 的限制
- 如何为 WordPress 启用 WebP 图像
WebP 格式的工作原理
最初来自 On2 Technologies,Google 正在将 WebP 开发为一种开源图像格式,并希望使其成为新的网络图像公认标准。
WebP 提供增强的图像压缩。 您可以减小文件大小而不会损失任何图像质量。 WebP 在支持有损和无损压缩方面是独一无二的。
无损压缩允许您在保持原始图像质量的同时减小文件大小。 原始数据不会丢失,因此您可以将图像恢复为其原始质量和大小。
使用有损压缩会产生更小的文件大小。 有损压缩仅保留以缩小尺寸显示图像所需的数据。 您将无法调整大小并保留原始质量。
要充分利用 WebP,请对需要缩放到不同大小的图像(例如背景图像)使用无损压缩。 对具有固定尺寸的图像使用有损压缩。 如果您知道您网站的特色图片或产品图片的最大宽度,则可以通过有损压缩将其保存到这些精确尺寸。
WebP 的好处
那么是什么推动了 WebP 的发展呢? 该格式提供了许多优点,包括易用性和性能。 让我们探索在您的网站上使用 WebP 的最大优势。
轻松转换现有图像
您可以将站点中的任何现有 PNG、GIF 或 JPEG 转换为 WebP 文件。 您不会牺牲质量,通常会减小文件大小。
更好的压缩
如果将 PNG 或 JPEG 转换为 WebP,WebP 文件大小将比原始文件小 30% 到 50%。 较小的图像应该可以帮助您的页面加载更快,这就是为什么我们建议将图像压缩作为加快 WooCommerce 网站速度的最佳方法之一。
更好的网站性能
更快的加载图像和页面可以创造更好的用户体验。 您还可以通过优化您的网站的速度来提高您的搜索引擎排名。 搜索引擎非常重视您的网站加载速度。 加载速度较快的网站往往比速度较慢的网站排名更高。
以 WebP 等下一代格式提供图像是我们提高 Google PageSpeed Insights Score 的 12 种行之有效的方法之一。
支持透明度和动画
谁不喜欢动画 GIF? 使用 WebP,你很幸运。 WebP 支持动画和透明度。
广泛的浏览器支持
大多数现代浏览器都支持 WebP。 Apple 的 Safari 浏览器是唯一的坚持者,但最终在去年 Safari 14 中引入了 WebP 支持。
WebP 的局限性
WebP 的主要限制是确保您使用图像的所有方式的兼容性。 如果您使用网站数据输入电子邮件活动或移动应用程序,您可能会遇到问题。
请务必测试图像将出现的所有位置,以确保 WebP 格式可以正常工作。 您还可以考虑提供两个版本的图像。 在允许时使用 WebP,在不支持 WebP 时使用后备 JPEG 或 PNG。
如何使用 WordPress 启用 WebP
WordPress 从 5.8 版开始提供 WebP 支持。 如果您的服务器支持 WebP,您应该能够像任何其他受支持的图像类型一样上传和使用 WebP 图像。
在 WordPress 中使用 WebP 图像的选项包括:
- 手动转换图像。 使用CloudConvert等在线工具将图像转换为 WebP。 这是一项耗时的手动任务,因为您必须将文件上传到转换器,然后将新文件上传到您的 WordPress 库。
- 图像优化插件。 许多图像优化插件已经包含将图像转换和显示为 WebP 文件的选项。 检查您的插件文档以了解如何为您的站点启用这些选项。
- WebP 插件。 除了优化插件,您还可以使用专门设计的插件(如WebP Converter for Media )将上传的图像自动转换为 WebP。
使用 WebP 和 Pressable 更快的站点
如果您对 WebP 感兴趣,您可能希望您的网站尽可能快地加载。 使用 WebP 的出色压缩将图像文件大小减少一半是一个很好的起点。 确保您的网站尽快运行的另一种方法是选择正确的主机。
在 Pressable,我们的托管服务可为 WordPress 网站提供最佳性能。 我们基于云的托管托管服务使您的网站管理变得简单,同时提供 100% 的正常运行时间和闪电般的速度。 哦,还有 WebP 支持? 我们已经涵盖了。 我们的全球 CDN 网络还支持 WebP,因此您可以获得使用这种新图像格式的所有速度提升优势。
要了解有关 Pressable 如何使 WordPress 更好地工作的更多信息,请立即预订自定义演示。