使用h5的video标签优化Web的GIF

<video autoplay loop muted playsinline poster="original.jpg">
    <source type="video/webm" src="original.webm">
    <img src="original.gif">
</video>

  GIF上使用的无损压缩算法未经优化，以至于MP4或WebM之类的视频格式将提供比GIF图像小的文件大小。因此，解决GIF性能问题的一种方法是完全不使用GIF，而将其替换为自动播放，循环播放HTML5视频。

autoplay：立即开始播放视频，而无需用户按“播放”
loop：无限循环播放视频
muted：尽管GIF上没有音轨，但要说明此属性，iOS Safari才能自动播放视频
playsinline ：对于iOS Safari，请确保视频未移至全屏模式
poster：指定下载视频时要显示的图像

  要将GIF转换为WebM，我们可以使用CloudConvert。或者，如果您使用Cloudinary，则可以将文件扩展名从.gif更改为.webm以获取视频格式。

---

5月24日晚更新

  似乎从来没有这么晚写过博客~
  看了同事写的博客，发现原来GIF图片好像还有不一样的点。

首先GIF可能在用户体验上的缺陷：

1. 首屏图片/gif完全加载所需时间过长
2. 下滑屏幕时，需等待卡片的图片/gif逐一加载，且有卡片长时间处于空白状态，需要等待几秒才加载完毕——即首屏达不到秒开的要求。

优化方案：

• 优先展示首帧图
  1）根据gif图加载完全与否来显示或者隐藏image元素
  2）框家——>>根据框架的属性，某些框架中有特殊的属性可以监听gif是否完全下载（某些属性可能仅仅支持IOS端。&& 根据gif加载的透明状态来保持DOM的层级顺序优先展示首帧图，gif元素放在image元素的后面。）
• 图片尺寸压缩
• 图片预加载（设置预先渲染1.5屏的元素）

深入：

• web前端
    假设预先向后台请求了10条数据，生成10条瀑布流卡片，当这10个瀑布流卡片都进入mouted生命周期后图片会立即下载。
• 客户端
    图片/gif并非在image/gif组件进入到mounted生命周期后进行加载，而是在image/gif元素被客户端挂载后才会开始加载，并且渲染。