乐趣区

关于web:页面加载性能之video替换GIF

jiezi

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

退出移动版