一张图告诉你不要再用GIF了 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
GIF动图统治网上娱乐世界已经很长一段时间了，作为一种“古老”的文件格式，GIFs与1989年首度与公众见面。而Twitter和Facebook却在两年前放弃了GIF格式，imgur.com也已经准备全面放弃GIF格式。 为什么GIF会遭到这些网络巨头的抛弃 ？答案： MP4
下面来做个简单的实验：
（cnode只允许上传1M图片，不足以演示这个例子，所以贴个地址）
上面两个地址内容完全一样，只是不同的格式。来看下这两种格式在网络上的表现吧
GIF的大小：8MB，加载时间：31s
MP4的大小：630KB，加载时间：173ms
相比GIF，MP4的体积减小了12倍左右，加载时间更是减少到了不到1秒
MP4有什么优势？
GIF动图的压缩算法很成问题。原始的GIF体积超过500kb，而转换成mp4后，体积只有100kb。一个GIF动图实际上就是一组连续的图片装到一个图片里。而mp4视频可以利用各种强大的压缩技术，例如keyframe和预测帧技术。
如果你是经常使用手机上网的用户，那你是最大受益者。即使是桌面用户，当一个页面是有太多的GIF动图时，你也会从这种MP4转换措施中感受到明显的性能上的提升。
播放控制：
让GIF动图暂停播放是绝对不肯能的。当然。有些技术可以从播放的动图中提取一些静态帧，但这不是浏览器的原生功能。视频播放完全可以受浏览器的控制。也就是说，你可以暂停播放、跳跃播放、定位时间，还可以慢速播放等很酷的效果。你的GIF动图特别有趣吗？从想重放一遍慢动作？
NODE如何将GIF转成MP4？ 来看一个简单的小例子：
环境准备：
node转成MP4还是用到了ffmpeg（ 需要下载对应平台的ffmpeg文件并且配置好环境变量。（ 这个地址是centos下安装ffmpge的教程）
安装node-fluent-ffmpeg
这里用到了来调用ffmpge
$ npm install fluent-ffmpeg
一个简单的例子
下面写一个简单的例子，文档很全面，大家有空可以仔细阅读。
var ffmpeg = require('fluent-ffmpeg');
ffmpeg('\tmp\video.gif')
.videoCodec('libx264')
.size('400x310')
.outputOptions(['-pix_fmt yuv420p'])
.on('error', function(err) {
console.log('An error occurred: ' + err.message);
.on('end', function() {
console.log('Processing finished !');
.save('\tmp\video.mp4');
下图是转换后的结果：
最后打个广告：
我的小网站：上线了，是一个搞笑图片分享社区网站，可以打发无聊时间看好玩图片。其中用到了将gif转成MP4技术。
随后我会把得瑟网用到的相关技术整理成文章发布，也希望大家能喜欢
MP4还有一个比较明显的缺点，在IPhone和IPad下回自动全屏播放，折中的解决方案：
在view标签中使用webkit-playsinline属性控制不全屏播放，并且在OC代码中设置webview.allowsInlineMediaPlayback = YES;
&video id=&player& src=&widget://res/video.mp4& loop autoplay webkit-playsinline&&/video&
(此方法仅限于app内置的webview，对于大多数ios浏览器是没用的。微信的页面设置了webview.allowsInlineMediaPlayback = YES，可以在微信中打开页面测试)
还有一个解决方案：
主要是用canvas来处理，单测试了一把非常烧机器，cpu会飙升，所以不推荐
apng大势所趋…
好像很有用。 网站也看了，个人感觉里面MP4做成自动播放好点，不然用户每次都得手动点一下。
嗯，做成自动播放体验要好得多。 改进一下，多谢
apng好像有浏览器不支持的问题？ 不是很了解
来自酷炫的
在做MP4的时候，遇到了一个比较简单的问题，不知道怎么解决，那就是透明问题。虽然gif也不能做到完全透明，但是至少可以接近透明。可是MP4能做成背景透明吗？还是我们用的工具不对？
我的理解是MP4做播放工具，而GIF对一个网站还是必不可少的装饰性工具。我想需要用到透明的应该都是网站装饰的地方，这里个人觉得还是可以用GIF。而MP4则作为播放工具是一个利器。两者可以配合使用
嗯，同意，不过用mp4肯定是希望能替换掉gif了，最理想的就是能用Css3搞定一些基本的装饰动画
自豪地采用
不是每个网站都支持
网站只要想支持随时可以支持，主要是浏览器吧。有的浏览器不支持
是的！不好意思 我没表述清楚
用MP4还有一个问题，在ios浏览器中会自动全屏，这点体验就不是很好
我想问的是 -。 -
说好的一张图呢 0. 0
没用过MP4啊
标题党，哈哈哈哈哈
我看到了蜀，
但是您的嘚瑟网已经打不开了…
我打开了，看见了些少儿不宜的
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的我想用gakki一个动图做微信表情，但我这个gif太大了，谁能帮帮我
1M大小就可以存为微信表情了
扭曲的gakki粉
引用1楼 @ 发表的:1M大小就可以存为微信表情了太好了谢谢老哥
引用2楼 @ 发表的:扭曲的gakki粉哈哈哈哈哈哈
这打扮，应该是拍乱马时的造型吧
为什么有点像花泽香菜
您需要登录后才可以回复，请或者
2680人参加团购729.00元&969.00元
405人参加团购509.00元&999.00元
102人参加团购549.00元&1099.00元
1215人参加团购739.00元&1399.00元
221人参加团购350.00元&1499.00元
334人参加团购279.00元&449.00元
584人参加团购628.00元&999.00元
491人参加团购398.00元&999.00元
449人参加团购249.00元&499.00元
933人参加团购348.00元&1199.00元
751人参加团购398.00元&1499.00元
110人参加团购479.00元&999.00元如何把制作gif动态图片 我想把视频中的某一片段如何制作成gif动图
现在我们行走在街上，大部分的商家门口都贴出了二维码图像供用户扫描关注。街上发的宣传单、小杂志，包装袋、饮料瓶、统统都有二维码的图像。从2013年开始就是一个二维码盛行的
现在我们行走在街上，大部分的商家门口都贴出了二维码图像供用户扫描关注。街上发的宣传单、小杂志，包装袋、饮料瓶、统统都有二维码的图像。从2013年开始就是一个二维码盛行的时代。发展到今日像样子的商户都有了自己的二维码。二维码的背后就是微信公众平台。而且现在微信公众平台也越来越火热，不少开着实体店的小伙伴都会在微信上开着公众号，在公众号上宣传着自己的产品。但粉丝少也是个头疼的问题，不少小伙伴们都表示不知道通过什么方式来推广公众号来吸粉。别急，今天呢小编将教大家把微信小视频制作成GIF图，在GIF图片上添加公众号的名字来做推广。相信大家每天都会收到群里或朋友分享到朋友圈的搞笑视频或者其它娱乐视频，把这些视频制作成GIF动态图片添加上我们的公共号，再分享出去。让人欢乐的同事又能推广自己，何乐而不为呢。下面开始我们今天的教程吧。PS：如果不会把小视频下载到桌面上，点击：观看
& && &视频转GIF添加广告软件下载：
& && &点击上面地址下载小视频转GIF加广告的软件，下载过程中大家可以先把手机微信里的小视频下载到桌
面上储存好，方便待会操作。下载好后，打开这款软件，点击左上角红圈处，选择打开视频文件，找到储
存好的视频添加进去。注意该视频的格式，如果在储存的地方找不到视频，只需要下载个狸窝视频转换器
把它转换成下面图中支持的格式即可。&&
& && &小视频添加进去后，可以看到最下面由小视频分解成的每张图片帧。接着我们选择第一张有人物的图
片，点击左上角红圈处的&T&，然后在图中鼠标左键点击一下，接着弹出一个文本条目框，在框下面把
公众号的名字输入进去，接着在上面可以调整文字的大小和颜色，没问题的话点击确认。
& && &可以看到第一张帧图中已经有了公众号名字广告，其余的帧数如果一张一张的添加会很麻烦，而且浪费
时间。别急，自然会有更快捷的方法。按着键盘左下角里的&shift&键，在帧图里拉至最右边，点击一
下最后一张帧，可以看到全部帧已经选中。再点击左上角红圈中的眼睛。
& && &接着把图中的公众号名字调整到图片里合适的位置。接着在右边广告帧处鼠标右键，点击&相同的对
象&。下面可以看到所有的帧都已经添加上了公众号名字。
& && &拉回一帧可以看到右上角有2段公众号名字，我们在右侧把最上面的二张删除掉就好了，鼠标右键，点
击删除对象即可。删除后可以点击上方的预览，看看完成后的效果，觉得不需要更改什么了，点击左上角
红圈处保存，选择好储存的地方。保存为GIF图片即可。&&
& && &接着登录电脑板微信，进去聊天界面后，点击下图的红圈处的文件图标，把刚才制作好的GIF图添加进
去点击确定即可，可以看到成功发送出去了~& &
& && &以上就是今天教程的全部内容啦，学会制作的小伙伴可以多制作几个发给朋友们看看。或者发送到朋
友圈中，由于GIF图片不能直接发送到朋友圈，我们可以打开录制小视频的功能，对着GIF图拍摄然后发送
到朋友圈就行了，是不是很简单。
& && &想学习更多关于视频制作好玩效果的小伙伴们可以百度我们官网狸窝宝典进网站学习噢，遇到一些看
不懂的教程，可以添加我们客服的QQ，会帮大家解答教程步骤。
相关推荐：
微信语音合成mp3格式:
视频拼接软件哪个好:
快速批量提取pdf中的图片:
pdf怎么转换成psd:
开心一刻：
跟女友逛街,看到一个人在酒店喝酒喝醉了,不小心从二楼的窗户边掉了下来,引来了很多路人围观,一个警察过来问:发生什么事了?那个喝醉的人回答道:不晓的,我也是刚到的!
狸友回眸一笑：
男友郁闷道:&我有两个坏习惯,令我感到很困扰。&朋友问:&是吗?说来听听。&男友:&第一个坏习惯是裸睡。&朋友安慰道:&这也没什么呀!别人又看不到。&这时,男友忍不住痛哭道:&关键我第二个坏习惯是梦游!!
------分隔线----------------------------
有没有人跟我有一样的烦恼，中午午休睡不着觉，想要休息好下...
div align= 喜欢音乐的朋友，不知道你对手机...匿名用户不能发表回复！|标签： , , , , , , , , , , , , , ,
赞助商推荐()：
想学到点真东西？
如果你有1~3年前端开发经验，不妨
想高薪入职阿里？
想要免费一对一编程辅导？
热门总排行}