WebP、Animated WebP使用

WebP格式转换,动态WebP

Posted by Felix on October 19, 2017

WebP是一种现代图像格式,为网络上的图像提供出色的无损和有损压缩。 使用WebP,网站管理员和Web开发人员可以创建更小,更丰富的图像,使网络更快。

与PNG相比,WebP无损图像的尺寸小26%。 相当于SSIM质量指数,WebP有损图像比同类JPEG图像小25-34%。

无损WebP支持透明度(也称为Alpha通道),只需额外增加22%的字节。 对于有损RGB压缩是可以接受的情况,有损WebP也支持透明度,通常比PNG提供3倍更小的文件大小。

13年底Google正式推出 Animated WebP,即动态WebP,既支持 GIF 转 WebP,同时也支持将多张 WebP 图片生成 Animated WebP。

目前国内外各大互联网公司已逐步使用WebP,科技博客GigaOM曾报道,YouTube的视频缩略图采用WebP后,网页加载速度提升了10%;谷歌网上应用商店采用WebP后,每天可节省几TB的带宽,页面平均加载时间大约减少1/3;谷歌移动应用市场采用WebP图片格式后,每天节省了50TB的存储空间。


对于WebP格式图片编解码性能,请参考移动端图片格式调研,评测数据表格:image_benchmark.xlsx,优势非常明显,此处只讲解如何使用。


MAC安装WebP

  1. 下载安装macports,下载链接
  2. 安装成功后在Terminal中输入port会成功打印出版本号
  3. 更新MacPorts,运行命令:sudo port selfupdate
  4. 安装webp,运行命令:sudo port install webp
  5. 安装成功后运行命令:cwebp -version会成功打印出版本号

至此,webp在Mac上已成功安装,接下来就是如何使用啦

webp命令使用

webp包含cwebp、dwebp、vwebp、webpmux、gif2webp命令,下面我们详细说明每个命令的使用。

cwebp-将一个图片文件转成WebP格式

命令格式:cwebp [options] input_file -o output_file.webp,[options]选填,具体参数有哪些稍后介绍,下面先简单的将一张png图片转成webp,看下图(一图胜万言)
cweb 成功生成一张.webp文件,就是如此的简单~

常用的[options]及功能

  1. -size int指定目标大小(以字节为单位),以尝试和到达压缩输出。 压缩机将进行几次部分编码,以尽可能接近该目标。 如果同时使用-size和-psnr,则将以-size值为准。
  2. -lossless编码图像没有任何损失。 对于具有完全透明区域的图像,仅当使用-exact选项时,才会保留不可见像素值(R / G / B或Y / U / V)。
  3. -q float指定0和100之间的RGB通道的压缩因子。默认值为75。在有损压缩(默认)的情况下,较小的因素产生较小的文件质量较差。 通过使用100的值实现最佳质量。在无损压缩(-lossless)的情况下,一个小因素可以实现更快的压缩速度,但会产生较大的文件。 通过使用值100来实现最大压缩。
  4. -resize width height调整源文件的尺寸。 如果宽度或高度参数中的任何一个(但不是两个)为0,则将计算保留宽高比的值。

这些[options]可以连在一起使用,例如将我们刚才的那张png图片宽高压缩为原先的1/2(原图大小:750*1334),压缩因子指定为50,则使用如下命令:
cwebp -resize 375 0 -q 50 demo.png -o demo_webp.webp
就不上图了,自己动手尝试吧!

dwebp-将WebP文件转成其他格式图像文件

命令格式:dwebp [options] input_file.webp -o output_file.png,[options]选填,下面我们就来用这个命令将用cwebp转成的wepb文件转回png文件。 此命令不常用,不做过多介绍

vwebp-查看WebP文件

命令格式:vwebp [options] input_file.webp,[options]选填。查看WebP文件不必多此一举,Mac有强大的预览功能,所以这个命令也略~

webpmux-静态WebP文件转动态WebP

这个命令就强大了,制作webp动画,让移动端除了gif又有了新的选择,Gif虽然使用范围广,但是有一个致命的弱点,它通常只支持256色索引颜色,这导致它只能通过抖动、差值等方式模拟较多丰富的颜色;它的 Alpha 通道只有1bit,这意味着一个像素只能是完全透明或者完全不透明。所以对于色彩丰富,清晰度要求比较高的动画gif完全满足不了,这时候就该Animated WebP出马了。
命令格式:webpmux -frame FRAME_OPTIONS [ -frame ... ] [ -loop LOOP_COUNT ] [ -bgcolor BACKGROUND_COLOR ] -o OUTPUT,看起来有点麻烦,写了个shell脚本帮助我们快速装换,下载链接

解压后包含三个文件,cwebp.sh将文件夹中所有非webp图片文件转成webp,webp_mux.sh将文件夹中静态webp文件压缩成一个动态webp文件,png2animation_webp.sh将文件夹中所有png文件压缩成一张动态webp文件,下面介绍如何使用。

  • 批量转换WebP文件,./webp school_girl/ [options],[options]可选项,详细查看上面cwebp介绍,该命令将文件夹school_girl下的所有png文件转成WebP,生成文件目录school_girl/webp/
  • 将多张静态webp文件转成一张动态webp,./webp_mux.sh school_girl/webp/ 50,该命令将school_girl/webp/文件夹下的所有webp文件压缩成一张动态webp,动态webp文件路径school_girl/webp/anim_webp,每帧动画50ms。
  • 将文件夹中所有png文件压缩成一张动态webp文件,./png2animation_webp.sh school_girl/ 50 [options]

gif2webp-gif图转Animated Webp

这个命令实在是不想讲,不是本人偷懒~如果你真的想用gif转Animated Webp的话,我也只能是大写的I 服了 You

至此webp已讲的差不多了,讲了几个常用的[options],详细参考官网