放弃在线图像的PNG和JPG格式：使用WebP

图片来源：

Opensource.com

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

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

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

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

谷歌报告称，将动态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 规范的参考实现，可从谷歌的 Git 仓库或 tarball 获取。

WebP 格式与全球范围内使用的大多数网络浏览器兼容。在撰写本文时，它与 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

或者，您也可以使用 ImageMagick，它可能在您的发行版的软件仓库中可用。转换的子命令是 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

WebP 在 Wordpress 上

许多网站都是使用 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);