性能优化之动图（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 原画等。

---

码字不易，点赞鼓励