使用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元素被客户端挂载后才会开始加载,并且渲染。
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读