如何使用WEBP动图替代GIF上传Mfuns

WEBP 是什么

WebP是一种同时提供了有损压缩与无损压缩的图片格式。WebP的设计目标是在减少档案大小的同时，达到和JPEG、PNG、GIF格式相同的图片品质

webp在同等质量下，文件大小远低于png和jpg，并且支持动图和透明通道

webp支持动图，并且相比gif拥有更高的显示质量（gif仅支持256色，webp支持真彩色和透明通道），以及更小的占用空间。

目前，Mfuns已全面使用webp代替了png和jpg。

使用WEBP代替GIF上传动图

首先我们来做一个测试，我随手录制了一段视频，长度为10s ，分辨率为650x370，文件大小为 7.4mb

接下来我们尝试使用ffmpeg压制为gif，图片宽度为320

命令：

  ffmpeg -i input.mp4 -vf scale=320:-1 output-320.gif

命令解释：

输入input.mp4，将大小缩放到320px 输出保存为为output-320.gif

结果为：

我们可以看到，gif文件大小为3.4mb

接下来我们尝试转化为webp

命令：

ffmpeg -i input.mp4 -vcodec libwebp -filter:v fps=fps=30 -compression_level 6 -q:v 75 -loop 0 -preset drawing -an -vsync 0 -vf scale=320:-1 output-320-75-30.webp

命令解释：

输入input.mp4，帧率设置为30fps、压缩等级为6、质量为75%、无限循环、使用绘画预设、使用将大小缩放到320px，输出output-320-75-30.webp

看看结果：

文件大小为1.85mb，图片大小比GIF缩小了约50%，但是质量要比GIF高不少

有没有再极限一点的？

接下来我尝试了不同的参数组合，将质量设置为了21%，大小和原视频保持一致，图片大小刚好为1.98mb,刚好卡在2m以内

  ffmpeg -i input.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 0 -compression_level 6 -q:v 21 -loop 0 -preset drawing -an -vsync 0  output.webp

于是我们得到了与原视频分辨率一致，但是大小仅为1.98mb的WEBP动图

来看看效果如何？

好像还行？