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

当咱们的网站须要一张动态图的时候，大部分人脑海中第一印象是GIF，当然也有会想到CSS3，通过设置逐帧动画来实现，不过这样的动画在用户的眼里还是不够晦涩，所以个别开发还是会抉择GIF，但GIF自身过大，如下图：

这是加载性能的其中一项，咱们能够简略几个步骤就能让性能失去很大的晋升，通过将GIF转换成video，就能省去很大的带宽。

首先是检测

Lighthouse 是咱们的最罕用的检测伎俩，如果你的页面呈现了这类GIF，检测报告会告知你倡议的优化项，如下：

有不少办法能够将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

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。

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-...