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

时间：2024-05-16 17:30:01 | 来源：建站知识

时间：2024-05-16 17:30:01 来源：建站知识

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

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

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

如果这听起来很诱人，请继续阅读，我们将带您了解 WebP 的全部内容。我们还将进行一些测试，看看这种格式是否真的符合宣传的要求。

两全其美的？

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

这就变成了在无损（24 位 PNG）或有损（JPG、8 位 PNG）图像格式之间进行选择的问题。部分难题是 PNG 通常更适合用于光栅图形，而 JPG 则适合摄影。

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

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

测试 WebP 的有效性

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

我们的配置

我们所有的测试都将通过在 Adobe 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 的大小比原来增加了，这有点令人惊讶。但这表明尝试压缩设置是值得的。

示例 #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 的天平。尽管如此，这些类型的图像可能需要一些权衡。

示例 #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 支持。

谈到图像编辑器，前面提到的 Adobe Photoshop 需要一个插件来查看或保存 WebP 文件。



WebP 值得你考虑

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

浏览器支持也很好——只是不通用。人们总是担心可能会将一定数量的用户（无论多小）排除在外。值得庆幸的是，有工具可以创建和提供后备选项。由于图像非常重要，因此额外的工作可能值得付出努力。

如果您正在考虑加入 WebP 潮流，现在是开始试验的时候了。掌握压缩设置，您可能会大幅减少网站的加载时间。