web开发前端知识（3分钟阅读webp画质感人）

引言

使用ImageMagick、cwebp和OSX，我们可以将任何图像格式转换为WebP。今天我们将把这个 YellowFlower.JPG 文件转换成一个 YellowFlower.webp 文件，并在没有太大质量损失的情况下，缩减文件大小的三分之一。

下面这张是原始图片。分辨率600×400，格式JPEG，文件大小90KB。

WebP

WebP是一种图像格式，创建于2010年，目前正在由Google开发。WebP既可以处理无损图像格式，也可以处理有损图像格式，如PNG和JPEG。

WebP无损图像文件比PNG小26%，有损变体可以比JPEG小25%到34%。

ImageMagick 与 cwebp

ImageMagick是当今业界广泛用于图像格式化的CLI工具。今天，我们将使用ImageMagick和cwebp工具将任何图像转换为WebP文件。

下载并安装ImageMagick

Macports是在OSX上安装ImageMagick的最简单方式。

sudo port install ImageMagick

port命令下载ImageMagick及其许多委托库(例如JPEG、PNG、Freetype等)。并自动配置、构建和安装ImageMagick。

但是它没有附带WebP库，所以默认情况下ImageMagick不知道如何处理WebP格式。

这就是cwebp派上用场的地方。

下载并安装cwebp

我们必须首先安装libwebp库才能使用cwebp编码器工具。libwebp库提供WebP编码(Cwebp)和解码(Dwebp)工具。

1. 从libwebp存储库下载libwebp-0.6.0.tar.gz。
2. 解压，将创建一个名为libwebp-0.6.0/的目录：tar xvzf libwebp-0.6.0.tar.gz。
3. cd libwebp-0.6.0/ 并以此执行以下指令：

./configure make sudo make install

这将构建cwebp和dwebp命令行工具。

既然我们已经具备了所有的前提条件，现在就可以将图片转换为WebP了。

JPEG 到 WebP

我们的 YellowFlower.jpg 的图像分辨率为600x400，文件大小为90KB。让我们看看当我们使用无损图像压缩将图像转换为WebP时会发生什么。

convert YellowFlower.jpg YellowFlower--WebP.webp

WebP在降低图像质量方面也做得很好。

通过将我们的图像转换为WebP并将质量降低50%，我们可以节省更多的文件大小，而不会有很大的质量损失。

当我们将JPEG转换为WebP时，图像质量会有很小但明显的下降，而当我们使用50%质量压缩时，图像质量会有更显著的变化。

决定是否转换为WebP完全取决于你的设计方向。如果优先考虑保持最佳图像质量，那么使用旧的JPEG格式很不错。

但是，如果并不极致追求图像质量，并且想要压缩三分之一的文件大小，那么简单地将图像转换为WebP是你的最佳选择。

写在最后

在使用ImageMagick和cwebp将图像转换为WebP时，使用高质量压缩(-quality)可更好。同时在HTML页面内使用 JPG 格式图片备用，以防浏览器不支持 WebP 格式。

Happy coding :_)

我是 @科技小助手 ，持续分享编程知识，欢迎关注。