共计 1080 个字符，预计需要花费 3 分钟才能阅读完成。
当咱们的网站须要一张动态图的时候，大部分人脑海中第一印象是 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-…