新图片格式WebP可以提升网站性能吗？

网页设计师不遗余力地提高性能。毕竟，每千字节都能减少页面加载时间，带来更好的用户体验。

图像是主要关注的领域。即使是基本的优化技术也可能意味着性能更好。在努力保持质量的同时，设计师们争相压缩每一个空间。

这家致力于提高网站性能的公司已经发布了一种图像格式来提供帮助。Google的WebP格式为设计师提供了大量有益的功能——包括较小的文件大小。

如果听起来很吸引人，请继续阅读，我们会带你去理解的 WebP 所有内容。我们还将进行一些测试，看看这种格式是否真的符合宣传要求。

两全其美？

图像优化通常需要一些困难的决定。例如，以更简洁的文件大小为名应该牺牲多少质量？

这变成了无损(24) 位 PNG）或有损（JPG、8 位 PNG）图像格式之间的选择。部分难题是 PNG 通常更适合光栅图形， JPG 适合摄影。

WebP 它旨在成为一种可以做到这一切的图像格式。它内置了对无损和有损压缩的支持。不管怎样，你都可以节省一些费用。谷歌声称格式与同类相比 PNG 文件小 26%，比 JPG 小 25%-34%。

此外，两种压缩类型都支持图像透明度。就像你得到的 JPG 和 PNG 格式的最佳属性 - 启动量少。

测试 WebP 的有效性

那么，WebP 现实世界中图像的表现如何？我们进行了一些基本的测试，以了解使用无损和有损压缩可以节省多少空间，以及使用透明度的例子。

我们的配置

我们所有的测试都将通过 Adob??e Photoshop CC 将图像保存到执行中。

在撰写本文时，Photoshop 尚不支持 WebP 格式。所以，我们安装了它 Google 的免费WebPShop插件。这允许在古代照片编辑软件中打开和保存 WebP 图像。采用默认压缩设置。

我们用旧格式保存图像时 Photoshop 值得信赖的"保存为 Web"功能。尽量使用相同的图像质量设置。在以下括号中设置图像质量。

示例 #1：自然照片

我们的第一次测试涉及一个测试 1024×768 自然照片。保存质量最高 JPG 文件，它占用 1.15 MB 的空间。

无损webp图片：https://assets.codepen.io/1077685/webp-format-nature-lossless.webp

有损webp图片：https://assets.codepen.io/1077685/webp-format-nature-lossy.webp

有损jpg图片：https://assets.codepen.io/1077685/webp-format-nature-lossyj.jpg

优胜者：有损 WebP 图像节省了大量空间，同时保持了可接受的质量。无损 WebP 这有点令人惊讶，大小比原来增加了。无损 WebP 有点令人惊讶的是，它的大小比以前增加了。但这表明，尝试压缩设置是值得的。

示例 #2：矢量图

接下来是彩色的 640×356 矢量图。原始文件另存为 24 位 PNG 文件，大小为 187 KB。因为它有如此多的颜色，所以 8 位 PNG 和有损 WebP 无法很好的比较。相反，我们将使用它 JPG 对抗无损的格式 WebP。

无损webp图片：https://assets.codepen.io/1077685/webp-format-vectortriangles-lossless.webp

有损jpg图片：https://assets.codepen.io/1077685/webp-format-vectortriangles-lossyj.jpg

优胜者：有损 JPG 图像节省了更多的空间，但留下了明显的伪影。无损 WebP 它保持了锐利的外观，文件的大小仍然明显低于原始文件。无损 WebP 保持锐利的外观，文件的大小仍然明显低于原始文件。这表明有利于 WebP 的天平。尽管如此，这些类型的图像可能需要一些权衡。

示例 #3：具有透明度的矢量图

我们的最终图像是一个 350×350 的矢量图。它保存为透明度 24 位 PNG 文件，大小为 64.09 KB。

无损webp图片：https://assets.codepen.io/1077685/webp-format-vector-lossless.webp

有损webp图片：https://assets.codepen.io/1077685/webp-format-vector-lossy.webp

有损png图片：https://assets.codepen.io/1077685/webp-format-vector-lossyp.png

优胜者：无损 WebP 能满足你的期望 在保持质量的同时缩小文件的大小。这显然是赢家。这显然是赢家。然而，损害 WebP 也很可靠，前提是你能忍受一些轻微的图像伪影。

支持浏览器和应用程序

当然，WebP 节省宝贵的带宽真是太棒了。但是有多少浏览器和应用程序支持呢？超过 91% 的 Web 完全支持浏览器 WebP，另外 3% 部分支持。

微软和苹果是唯一缺乏支持的主要浏览器。Internet Explorer 支持为零，Edge 12-17 版本也是如此。但是，更新版本 Edge 图像格式可以很好地处理。

Mac 用户必须将 Safari 14 或更高版本和操作系统 Big Sur 结合使用版本。自 14.6 版起，iOS 上的 Safari 全面支持用户。

支持范围非常可靠。但是，如果你想为你做的话 Web 如果项目提供退货，可以使用Modernizr检测等工具 WebP 支持。

说到图像编辑器，上面提到的 Adob??e Photoshop 需要一个插件来检查或保存 WebP 文件。

WebP 值得你考虑

总的来说，WebP 图像格式有很多值得喜欢的地方。在大多数情况下，它平衡了简化文件的大小和高视觉质量。这是一个全面的图像优化选项。

浏览器支持也很好——只是不通用。人们总是担心一定数量的用户可能会被排除在外。幸运的是，有工具可以创建和提供后备选项。因为图像很重要，额外的工作可能值得努力。

假如你正在考虑加入 WebP 现在是时候开始实验了。掌握压缩设置，您可能会大大降低网站的加载时间。