ffmpeg 制作webp动图

我的博客原文

众所周知webp 出自google，它是一种图片的格式， webp减少图片体积，按照官方的说法，在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。 起初webp并不支持动图，直到后来在0.2.0的版本上加上了动图，称为animated webp。

最早接触webp是因为公司要减小app包的体积，因为公司是做地图导航的，有很多图片资源文件，而且Android和iOS都有相应的解决方案，所以觉得将所有图片资源替换为webp，经过几天的折腾最终减少了将近20m。
这次我要使用animated webp作为客户端动图，是因为其效率和压缩比上都有一个比较好的权衡，抓包过抖音的动图发现其格式为webp，再者animated WebP支持24bit的RGB色，能有很好的色彩空间，服务端使用ffmpeg制作也很方便快捷。

项目实战:

• iOS客户端
• 服务端

ubuntu安装ffmpeg

我是在linux(Ubuntu)下使用的ffmpeg，下面为安装ffmpeg

sudo add-apt-repository ppa:kirillshkrogalev/ffmpeg-next
sudo apt-get update
sudo apt-get install ffmpeg

ffmpeg 制作webp

将jpg图像的格式转换为webp非常简单，直接使用命令就可以实现转码。这条命令未设置任何参数，使用的默认的参数：

ffmpeg -i test.jpg -vcodec libwebp test.webp

• -vf scale=w:h
  如果需要调整webp的大小，可以加上参数-vf scale=w:h，其中w是宽度，h是长度。默认都是-1，表示和原图一样大。可以设置其中一个为具体的值，另一个为-1，这样表示另一个是根据长宽比例自动计算出来的。也可以都设置为具体的值。还可以设置成原图尺寸的一个计算公式，比如-vf scale=iw/2:ih/2。

ffmpeg 制作动图

将视频制作为一个animated webp

基本命令

ffmpeg -i 视频路径 -vcodec libwebp -lossless 0 -qscale 75 -preset default -loop 0 -an -vsync 0 output.webp

ffmpeg 制作animated webp 的命令参数说明:

• -lossless
  无损压缩规范。默认值：0（1是可逆压缩）

• compression_level
  指定压缩比率。可以指定从0到6，数值越高，高压缩编码所需的时间越长。
  默认值：4

• qscale（q:v）
  指定压缩质量。您可以指定从0到100.数字越大，图片质量越高。
  当在有损压缩时是高数值时，编码是长时间高图像质量和大容量。
  如果无损压缩规格为高数值，则编码时间长且容量低。
  默认值：75

• preset
  预置：下面为预置的规范，默认为default

  • none
    不使用任何预设
  • default
    自动指定
  • picture
    肖像照片
  • photo
    风景照片
  • drawing
    绘制
  • icon
    多彩与小尺寸
  • text
    文本 字符居中

• -loop 0
  动画循环 loop后面的 参数为 循环的此时（0为无限）
  默认值：1

如果要调整生成animated webp的大小或降低帧速率，可使用scale, fps，比如以下:

ffmpeg -i 视频文件路径 -vcodec libwebp -lossless 0 -qscale 75 -preset default -loop 0 -vf scale=320:-1,fps=15 -an -vsync 0 output.webp

参考:

FFmpeg Codecs Documentation :: libwebp
FFmpeg Filters Documentation : scale
FFmpeg Filters Documentation : fps