本文探讨如何通过将GIF转换为video（MPEG和WebM格式）来优化网页性能，节省带宽并提升加载速度。利用Lighthouse检测优化项，使用FFmpeg进行转换，并提供HTML代码示例实现video的自动播放、循环和静音功能。
当我们的网站需要一张动态图的时候，大部分人脑海中第一印象是GIF，当然也有会想到CSS3，通过设置逐帧动画来实现，不过这样的动画在用户的眼里还是不够流畅，所以一般开发还是会选择GIF，但GIF本身过大，如下图：
这是加载性能的其中一项，我们可以简单几个步骤就能让性能得到很大的提升，通过将GIF转换成video，就能省去很大的带宽。
首先是检测
Lighthouse 是我们的最常用的检测手段，如果你的页面出现了这类GIF，检测报告会告知你建议的优化项，如下：
创建MPEG格式video
有不少方法可以将GIF转换成video，FFmpeg 是我们用的比较多的一款。以下命令可以将 my-animation.gif 转换成MPEG格式的video:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
创建WebM格式的video
MP4自1999年就已经存在了&
最低0.47元/天 解锁文章
623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
