了解这款开源图像编辑工具以节省时间和空间。

WebP 是 2010 年开发的一种图像格式，可为网页上的图像提供出色的无损和有损压缩。 网站开发用户可以使用 WebP 创建更小、更详细的图像以提高站点速度。更快的加载速度对于网站的用户体验和网站的营销效果至关重要。

为了在所有设备和用户之间实现最佳加载，您网站上的图片文件大小不应超过 500 KB。

与 PNG 图像相比，WebP 无损图像通常至少比 PNG 图像小 25%。在相同的 SSIM（结构相似性 ( )）质量指标下，WebP 有损图像通常比 JPEG 图像小 25% 到 34%。

无损 WebP 还支持透明度。虽然有损 RGB 压缩是可以接受的，但有损 WebP 还支持透明度，通常比 PNG 文件小三倍。

报告称，将动画 GIF 文件转换为有损 WebP 可将文件大小减少 64%，转换为无损 WebP 可将文件大小减少 19%。

WebP文件格式是基于RIFF（ File （文件））的文档格式。可以看到文件的签名是52 49 46 46（RIFF），带有：

$ hexdump --canonical pixel.webp
00000000  52 49 46 46 26 00 00 00  [...]  |RIFF&...WEBPVP8 |
00000010  1a 00 00 00 30 01 00 9d  [...]  |....0....*......|
00000020  0e 25 a4 00 03 70 00 fe  [...]  |.%...p...`....|
0000002e

独立库用作 WebP 规范的参考实现，可从 Git 存储库或 获得。

全球 80% 的网络浏览器都与 WebP 格式兼容。在撰写本文时php多图片上传代码，的浏览器尚不兼容。这个问题的解决方案是提供 JPG/PNG 图像和 WebP 图像网站优化，有方法和插件可以做到这一点。

为什么要这样做？

我的部分工作是设计和维护我们组织的网站。由于网站是一种营销工具，而网站的速度是衡量用户体验的重要指标，所以我一直在努力提高网站的速度，通过将图片转换为 WebP 来减小图片大小是一个很好的解决方案。

我使用 web.dev 来检测其中一个网页，该工具由 2.0 许可证提供，可以在以下位置找到。

根据其官方描述，“是一款旨在提高网页质量的开源自动化工具。您可以在任何公共或经过身份验证的网页上运行它。它具有性能、可用​​性、渐进式 Web 应用程序、 SEO 审计等小程序开发，你可以在浏览器的开发工具中运行php多图片上传代码，也可以通过命令行运行，也可以作为Node模块运行，你输入一个URL，它会对页面进行一系列的审计，然后生成页面的审计结果报告。报告的失败审核条目给出了页面应该如何优化的想法。每个审核都有相应的文档解释为什么该项目很重要以及如何修复它。”

创建更小的 WebP 图像

我测试的页面返回了三张图片。在它生成的报告中，它提供了建议和目标。我选择了报告 650 KB 的 app-。通过将其转换为 WebP 格式，预计将图像大小减小到 61 KB，节省 589 KB。我将其转换为 ，使用默认的 WebP 设置保存，文件大小为 44.9 KB。甚至比预期的还要好！从下面的截图可以看出，两张图片的视觉质量是一样的。

左：650 KB（实际大小）。右：44.9 KB（转换后的目标大小）。

当然，你也可以使用开源的图像编辑工具 GIMP 将图像导出到 WebP。它提供了几个质量和压缩参数：

另一张图片放大：

PNG（左图）和WebP（右图）都是从JPG转换而来的。对比两张图片可以看出，WebP 不仅文件体积更小，而且视觉质量也更好。

将图像转换为 WebP

您还可以使用命令行工具将图像从 JPG/PNG 转换为 WebP：

在命令行中使用，将 PNG 或 JPG 图像文件转换为 WebP 格式。您可以使用以下命令将PNG图像文件转换为质量参数为80的WebP图像。

cwebp -q 80 image.png -o image.webp

您也可以使用 ，它可能在您的发行版的存储库中可用。转换的子命令是 ，它需要的所有参数都是输入和输出文件：

convert pixel.png pixel.webp

使用编辑器将图像转换为 WebP

要在图像编辑器中将图像转换为 WebP，请使用 GIMP。从 2.10 版本开始，它原生支持 WebP。

如果您是用户，则需要一个转换插件，因为默认情况下不包括 WebP 支持。在 2.0 许可下发布，0.2.1 是一个用于打开和保存 WebP 图像（包括动画图像）的模块。

为了能正常使用，需要把它放到目录的bin文件夹中：

x64: C:\\\\插件\.8bi

Mac://插件/。

WebP 开启

许多网站都是用（我的）构建的。那么，如何上传 WebP 图片呢？在撰写本文时，它还不受支持。但是当然已经有插件可以满足这种需求，因此您可以在您的网站上准备 WebP 和 PNG/JPG 图像（供用户使用）。

以下说明可用于：

“直接上传WebP图片怎么样？很简单，只要在你的主题.php文件中添加几行即可。默认不支持显示和上传WebP文件，但我会告诉你如何传递几行。使其支持的简单步骤。登录到您的管理界面，转到“外观/主题编辑器”并找到 .php。复制下面的代码并将其粘贴到文件末尾并保存：

//** * for webp .*/ ($) { $['webp'] = '/webp'; $;}('', '');

如果您想在“媒体/库”时看到缩略图预览，那么您还需要将以下代码添加到您的 .php 文件中。要找到 .php 文件，请转到“外观/主题编辑器”并搜索 .php，然后将以下代码复制并粘贴到文件末尾并保存：

//** * / for webp .*/ ($, $path) { if ($ === ) { $pes = ( ); $info = @( $path );如果 (($info) ) { $ = ; } (!($info[2], $pes)) { $ = ; } 其他 { $ = 真； } } $;}('', '', 10, 2);

”

WebP 和未来

WebP 是一种强大且经过优化的格式。它看起来更好，压缩更好，并且具有大多数其他常见图像格式的所有功能。不要再等了，现在就使用它。

通过：

作者：Jeff 题目：译者：校对者：wxy

本文由LCTT原创编译，荣耀登陆中国