在线图片抛弃 PNG 和 JPG：使用 WebP

图片来源

Opensource.com

WebP 是 Google 在 2010 年开发的一种图像格式，可为网络上的图像提供卓越的无损和有损压缩。使用 WebP，Web 开发人员可以创建更小、更丰富的图像，从而提高网站速度。更快的网站加载速度对于用户体验和网站的营销效果至关重要。

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

WebP 无损图像通常比 PNG 小至少 25%。 WebP 有损图像通常比具有同等 SSIM（结构相似性）质量指数的 JPEG 图像小 25-34%。

无损 WebP 也支持透明度。对于可以接受有损 RGB 压缩的情况，有损 WebP 也支持透明度，通常比 PNG 提供小三倍的文件大小。

Google 报告称，从动画 GIF 转换为有损 WebP 的图像文件大小减少了 64%，转换为无损 WebP 时减少了 19%。

WebP 文件格式基于 RIFF（资源交换文件格式）文档格式。文件签名是 52 49 46 46 (RIFF)，您可以使用 hexdump 查看

$ 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

独立的 libwebp 库用作 WebP 规范的参考实现，可从 Google 的 Git 仓库或作为 tarball 获取。

WebP 格式与全球使用的大多数 Web 浏览器兼容。在撰写本文时，它与 Apple 的 Safari 浏览器不兼容。解决方法是同时提供 JPG/PNG 和 WebP，并且有一些方法和 Wordpress 插件可以做到这一点。

为什么这很重要？

我的部分工作是设计和维护我们组织的网站。由于该网站是一种营销工具，并且网站速度是用户体验的关键方面，因此我一直在努力提高速度，而通过将图像转换为 WebP 来减小图像大小是一个不错的解决方案。

为了测试其中一个页面的速度，我使用了 web.dev，它由 Lighthouse 提供支持，该 Lighthouse 在 Apache 2.0 许可下发布，可以在 https://github.com/GoogleChrome/lighthouse 找到。

根据其官方描述，“Lighthouse 是一种开源的自动化工具，用于提高网页的质量。您可以针对任何网页（公共或需要身份验证）运行它。它具有针对性能、可访问性、渐进式 Web 应用程序、SEO 等的审核。您可以在 Chrome DevTools 中、从命令行或作为 Node 模块运行 Lighthouse。您向 Lighthouse 提供要审核的 URL，它会对页面运行一系列审核，然后生成一份关于页面性能的报告。从那里，使用失败的审核作为改进页面的指标。每个审核都有一个参考文档，解释了为什么该审核很重要，以及如何修复它。”

创建一个更小的 WebP 图像

在我测试的一个图形上，原始 Web 版本的大小为 650 KB。通过将其转换为 WebP，我将文件大小减少到 45 KB，并且质量没有明显的损失。

开源图像编辑器 GIMP 支持 WebP 作为导出格式。它为质量和压缩配置文件提供了多个选项

GIMP dialog for exporting webp, as a webp

另一张图像的放大图

PNG（左）和 WebP（右）都从 JPG 转换而来，显示 WebP 虽然尺寸较小，但在视觉质量上更胜一筹。

将图像转换为 WebP

要在 Linux 上将图像从 JPG/PNG 转换为 WebP，您还可以使用命令行

使用命令行上的 cwebp 将 PNG 或 JPG 图像文件转换为 WebP 格式。您可以使用以下命令将质量范围为 80 的 PNG 图像文件转换为 WebP 图像

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

或者，您也可以使用 Image Magick，它可能在您的发行版的软件存储库中可用。转换的子命令是 convert，所需要的只是输入和输出文件

$ convert pixel.png pixel.webp

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

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

如果您是 Photoshop 用户，则需要一个插件来转换文件，因为 Photoshop 本身不包含它。 WebPShop 0.2.1 在 Apache License 2.0 许可下发布，是一个用于打开和保存 WebP 图像（包括动画）的 Photoshop 模块，可以在以下网址找到：https://github.com/webmproject/WebPShop。

要使用该插件，请将 bin 文件夹中的文件放入您的 Photoshop 插件目录中

Windows x64—C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\WebPShop.8bi

Mac—Applications/Adobe Photoshop/Plug-ins/WebPShop.plugin

Wordpress 上的 WebP

许多网站都是使用 Wordpress 构建的（这也是我使用的）。那么，Wordpress 如何处理上传 WebP 图像？在撰写本文时，它没有。但是，当然有一些插件可以启用它，因此您可以同时提供 WebP 和 PNG/JPG 图像（适用于 Apple 用户）。

或者，您可以参考来自 Marius Hosting 的这些说明

“如何直接将 WebP 图像上传到 Wordpress？这很简单。只需在您的主题 functions.php 文件中添加一些文本行。 Wordpress 本身不支持查看和上传 WebP 文件，但我将向您解释如何在几个简单的步骤中使其工作。登录到您的 Wordpress 管理区域，然后转到外观/主题编辑器并找到 functions.php。将下面的代码复制并粘贴到文件的末尾并保存它。 "

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

如果您希望在转到媒体/库时看到缩略图预览，则必须在相同的 functions.php 文件中添加以下代码。要找到 functions.php 文件，请转到外观/主题编辑器并找到 functions.php，然后将下面的代码复制并粘贴到文件的末尾并保存它。”

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);