性能优化之动图(gif和mp4的对比)

1,535 阅读1分钟

性能优化之动图(gif和mp4的对比)

背景

动图的体积一般都是非常大的,使用不当的话,很影响用户体验

动图指的是什么

页面中会动的资源,比如 gif,mp4格式的资源

gif和mp4的对比

gif格式是一种很老的格式了,压缩率不高,所以体积特别大

我用mac录屏5秒钟

  • mp4格式, 500kb+
  • 转成gif后,9M+

不处理gif的话,体积差不多相差20倍。即使对gif做压缩和抽帧处理,体积也会比mp4格式大一些,并且播放没有mp4清晰

gif和mp4的使用区别?

  • gif -> img标签
  • mp4 -> video标签

video除了本身的正常使用外,也可以做到跟gif一样的效果 codepen.io/bigtree/pen…

<video autoplay loop muted playsinline width="320" height="240" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"> 
</video>

video的注意点

video标签本身的兼容性没有问题,但需要注意的是:

  1. 里面的一些属性的兼容问题,比如
    1. autoplay自动播放
    2. loop循环播放
    3. muted静音
    4. playsinline指明视频将内联(inline)播放,即在元素的播放区域内。请注意,没有此属性并不意味着视频始终是全屏播放的
  2. 以上属性如果没设置的话,他们的表现在不同的端上可能不会一样,需要充分测试chrome safari 和 移动端等场景

mp4用多少分辨率合适?

一般如果是想替代gif的使用场景的,用360p即可

  • 基本上360p就足够了
  • 如果觉得不够清晰,可以适当调整,但会增大体积;如480p 540p 720p 原画等。

码字不易,点赞鼓励