当我们的网站需要一张动态图的时候，大部分人脑海中第一印象是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年就已经存在了，而WebM是2010年才新出现的一种video的格式，它比MP4体积更小，但是并非所有浏览器都支持。以下命令可以将 my-animation.gif 转换成WebM格式的video:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
比较差异
下图是各种格式的大小对比:
在上面的例子中，GIF格式是3.7M，转换成MP4之后，只剩551K，转换成WebM之后，只剩341K。
用video替换GIF
GIF较之于video，需要以下三个特征：
- 自动播放
- 循环播放
- 静音
这些 <video> 也都支持，代码如下:
<video autoplay loop muted playsinline></video>
上面的这个 <video> 标签会自动播放、静音、内嵌播放（非全屏），表现的就跟GIF一样。
最后我们给 <video> 配上 <source> 源，这样如果浏览器不支持WebM，就会fallback到MP4。
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
总结
平时项目中可能GIF用的不多，但一旦有使用场景，尽可能的优先考虑video，因为可以极大的节省带宽，提升加载性能。
参考
https://web.dev/replace-gifs-with-videos/