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

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 -ss 00:00:01 -t 5 -i IMG_2021_pkutAEA.MOV -vcodec libwebp -lossless 0 -qscale 75 -preset default -loop 0 -vf scale=320:-1,fps=10 -an -vsync 0 output.webp
  • -ss  起始时间,时分秒

  • -i 输入的文件

  • -codec 指定编解码器

  • -t  要分割出来的时间长度

  • -y 如果存在,就直接覆盖

参考:

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

附件: