页面加载性能之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-...