页面加载性能之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> 标签会自动播放、静音、内嵌播放(非全屏),表现的就跟GIF一样。

最后我们给 <video> 配上 <source> 源,这样如果浏览器不支持WebM,就会fallback到MP4。

总结

平时项目中可能GIF用的不多,但一旦有使用场景,尽可能的优先考虑video,因为可以极大的节省带宽,提升加载性能。

参考

https://web.dev/replace-gifs-with-videos/


本文为我原创

本文禁止转载或摘编

-- --
  • 投诉或建议
评论