WebP Animated WebP

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],详细参考官网

CATALOG
    FEATURED TAGS
    Andorid
    FRIENDS