用FFmpeg制作WebP动图

2020/10/20 07:04
阅读数 70

之前写过一篇文章,是教大家用FFmpeg制作GIF动画的。今天在讨论到项目中碰到的一个.apng动画素材引起的程序崩溃时,有位同学建议:我们为啥不用WebP来代替.apng?是啊,why not?

网上搜到一篇文章。自己试了一下,发现强大的FFmpeg果然支持制作WebP动图,于是顺手做了些笔记。

先来试一下这条命令:

ffmpeg -ss 25 -t 5 -i D:\Media\bear.wmv -vf scale=240:-1 -r 10 -lossless 1 -loop 0 -y D:\bear-lossless.webp

意思是:D:\Media目录下的源文件bear.wmv,从第25秒的位置开始,截取5秒长度的视频,画面宽度按比例缩放到240像素,并且控制输出帧率为10fps后转成webp文件,最终保存为D:\bear-lossless.webp。注意到,我们这次用的是无损压缩(-lossless 1),并且生成的动画是无限循环播放的(-loop 0)。

当你迫不及待地找到新鲜生成的bear-lossless.webp文件,双击鼠标,弹出了系统默认的看图软件——呃,怎么不是动画呀?莫急!那只是因为你用的看图软件太菜了。将bear-lossless.webp文件拖进Chrome浏览器吧,马上就看到效果了!

既然提到了无损压缩,接下来我们再试试有损压缩吧,这时用到了qscale质量因子,它的取值范围为0-100,数值越高图像质量越好。我们用80来试试,命令行如下:

ffmpeg -ss 25 -t 5 -i D:\Media\bear.wmv -vf scale=240:-1 -r 10 -qscale 80 -loop 0 -y D:\bear-q80.webp

作为对比,我们用相同的这段视频生成一个GIF动画,命令行如下:

ffmpeg -ss 25 -t 5 -i D:\Media\bear.wmv -vf scale=240:-1 -r 10 -y -f gif D:\bear.gif

对比后发现,无损压缩的bear-lossless.webp文件最大,有1.3MB;采用有损压缩后,bear-q80.webp文件变小了很多,只有177KB;而同样较小的bear.gif文件(仅154KB),图像质量明显差于bear-q80.webp。说明什么问题?WebP压缩算法优秀啊!

bear-lossless.webp bear-q80.webp bear.gif

回到实际的软件项目中来,我们要用的WebP能从视频中抽取出来吗?通常情况不是这样的。设计师往往会制作完整动画过程所对应的一系列静态图片。那么,怎样把这个图片序列生成一个WebP动图呢?其实也很简单,命令行如下:

ffmpeg -f image2 -framerate 10 -i D:\Media\pics\cache_loading_%02d.jpeg -loop 0 -y D:\loading.webp

意思是:将设计师制作的动画单帧图片分别按照cache_loading_xx.jpeg格式命名,其中xx是连续的两位整数,并把这些文件都放在同一个文件夹下。执行上述命令后,这些静态文件按照帧率10fps生成一个WebP动图文件D:\loading.webp。

设计师制作的原始素材统一命名后放在同一个文件夹里

很棒哦,快把loading.webp拖进Chrome浏览器看看吧!

loading.webp

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部