页面加载性能之video替换GIF

当我们的网站需要一张动态图的时候，大部分人脑海中第一印象是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-...