ffmpeg 制作webp动图

Posted 2023-05-02

参考技术A 我的博客原文

众所周知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制作也很方便快捷。

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

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

将视频制作为一个animated webp

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

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

记录一下折腾webp 的过程

最近有客户想要处理webp 的动图，情况当然是我们并不能处理webp 格式的图片。这事就交给了我来折腾，一开始想着用瑞士军刀ffmpeg。结果是折腾了差不多一天，前前后后编译了几十次ffmpeg 源码后才发现，并不支持decode 带动画的webp....坑爹啊。 不过也算熟悉了一下源码编译的过程，大体上就是：

./configure
make
make install

在运行configure 的时候通常要根据需要带上一些参数，比如在折腾ffmpeg 的时候，因为需要enable webp 的一些选项而这些选项又有依赖的库文件

./configure --extra-cflags=-I/usr/local/include --extra-ldflags=-L/usr/local/lib

这里的--extra-cflags 是告诉编译器去哪里搜索头文件，--extra-ldflags 是告诉编译器去哪里找需要链接的库文件，believe me 这两参数很重要...

 

ffmpeg 没戏以后我又找到了谷歌自家的libwebp， 下载源码编译过程大同小异，值得一提的是如果想要编译出的工具支持多种输入输出格式和其他附加功能的话，必须要求系统上安装相应的库，比如如果想让dwep 工具把webp 图片转成jpg 和png 格式的话就要求机器上装了libpng。我刚好就有这种需求，于是再一次下载源码编译安装，一切看似顺利。但是在编译libwebp 本身的时候却发现dwep 的png 支持并没有开启，查看configure 打印的日志发现他在调用libpng-config 脚本的时候出错：

/bin/sh^M: bad interpreter:

一脸瞢逼的我去网上搜了一下，发现原因是此文件是在dos 模式下编辑的，所以换行是\r\n，所以在linux 环境下导致无法解析，还好解决方法很简单，只用vim 打开这个文件输入命令:

:set ff=unix

保存后重新运行configure，发现png 支持已经打开了，终于可以愉快的make 了。