携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 Johnny

webp格式是一种被大部分浏览器支持的图像压缩格式，现在很多网站都开始使用这种格式的图片。将图像存储为webp可以减小网页的大小，同时保持所需的图像质量。图像大小的节省可能非常显着，这意味着页面将加载得更快。

如果想将图像转换为webp，可以在 Photoshop 等许多应用程序中执行此操作 - 但更快的方法是直接从终端执行此操作。让我们看看它是如何工作的。

webp 文件

webp除 Internet Explorer 外，所有浏览器都广泛支持。

安装 WebP 和 cwebp

要将文件转换为webp，我们需要做的第一件事是安装一个名为cwebp， 的工具，它是webpGoogle 提供的软件包的一部分。最简单的方式就是通过brew安装。

brew install webp

如果你没有brew工具，你可以通过developers.google.com/speed/webp/… 来进行安装！安装后，我们可以cwebp从终端运行命令得到以下输出：

~ % cwebp
Usage:
    cwebp [options] -q quality input.png -o output.webp

如果我们想将文件更改为 60 质量的png文件webp，我们可以运行以下命令：

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

这行命令会将 **image.png** 转换成60质量的**image.webp**。 请注意质量越低，文件越小，同时图像的清晰度越差。所以我们要在质量和大小之间找到一个平衡。

由于某些较旧的浏览器（如 Internet Explorer）不支持webp，所以我们需要兼容不同的浏览器。在 HTML 中，我们可以使用我们的文件并使用标记webp回退到原始png文件：

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.png" alt="Image for Article" />
</picture>

这意味着对于使用更现代浏览器的用户来说，他们将获得更快加载时间，同时旧浏览器上的用户仍然可以看到图像.

将所有图像转换为 webp

webp速度如此之快，所以批量将图片的转换成webp是有意义的，以便在我们想使用它们时可以使用它们。由于cwebp也保留原始文件，因此我们不会丢失图像的原始副本。

我们可以使用循环cwebp将我们所有的png,jpg和jpeg文件转换为webp使用。for下面的代码将在运行它的目录中找到所有图片，并webp为每个图片创建版本。由于它以递归方式工作，因此它将转换在您的服务器上找到的任何图像。这意味着运行有时可能会很耗时，具体取决于图片的数量。您可以在此处了解有关 find 命令的更多信息。

echo 'Converting all .png, .jpg, and .jpeg files to .webp...'
for f in $(find . -name '*.png' -or -name '*.jpg' -or -name '*.jpeg'); do 
    if [ ! -f "${f%.*}.webp" ]; then
        cwebp -q 60 $f -o ${f%.*}.webp
    fi
done