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)工具。

从libwebp存储库下载libwebp-0.6.0.tar.gz。

解压,将创建一个名为libwebp-0.6.0/的目录:tar xvzf libwebp-0.6.0.tar.gz。

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 :_)

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200605A0R6EJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券