可以取代GIF的APNG/WEBP格式动画是怎么回事?

?xml version="1.0" encoding="UTF-8"?

一 APNG

什么是APNG?

APNG是一个机遇PNG格式的位图动画格式图片。

APNG全称是Animated Portable Network Graphics,是PNG的位图动画扩展。目前没有得到官方认可,之前PNG组织做过一个MNG的图像格式,希望成为PNG动画的主流,但是由于MNG过多的浪费了社会资源,后来PNG组织也放弃了。

他为什么出现?

一直以来都是GIF动态展示动画为主,为了更好的在网络上传播。GIF需要降低体积。如果图像比较复杂的话,他的颗粒感会变得很明显(也就是我们平时说的虚/失真)。

APNG是PNG的升级版,他的后缀名依然是.png,包含动态的情况下体积会比普通静态png大数倍,可以无损的展示动态,但是他目前还没有得到PNG组织官方认可。

相比于GIF他的优势

GIF已经诞生三十余年,为什么一直没有被替代,原因有四点:

几乎所有的主流浏览器都支持GIF;

早期选择不多,GIF几乎是唯一的选择(GIF-1987,JPEG-1992,PNG-1996,APNG-2004,WebP-2010);

实现起来简单,制作工具多;

采用LZW的数据压缩算法,是的GIF体积比较小,比较容易在早期的网络中传播。

APNG是Mozilla在2004年推出的,由于APNG笔GIF晚出现十几年,他的优势也比较明显,下文会有介绍;APNG是PNG的扩展,第一帧储存方式和普通PNG一样在IDAT区段中,APNG只是新增了三种区段,所以如果一个软件只是支持PNG而不支持APNG的话,依旧可以显示出第一帧,只是不能动罢了。

APNG新增的三种区段分别是:

acTL(animationg control)用来存放帧数和播放次数,整个文件只有一个区段;

fcTL(frame control)用于存放每一帧的高度,宽度以及位置、延时等信息,每一帧一个区段;

fdTL(frame data)用来存放除了第一帧后面每一帧的图片数据,采用Deflate压缩,每一帧一个区段。

关于压缩率

GIF采用的是LZW,而APNG采用Deflate压缩,在加上APNG继承了PNG的filter,利用相邻像素的相似性是压缩率大大提高。

关于颜色

GIF每个像素只有 8 bit,也就是说只有2的8次方256种颜色,所以导致GIF的画质比较差。

关于透明

GIF支持全透明,不支持半透明,所以如果吧一个边缘是半透明的图片转换成GIF,就会出砸扁的问题,而APNG和WebP都支持 8 bit alpha channel;

兼容性

GIF的兼容性可能也是他唯一的优势吧,因为几乎所有的浏览器都支持GIF,但是对于APNG而言,支持的浏览器目前只有Firfox和safair,同时Chrome 59 页支持APNG,但是对于微软的IE或者EDOG目前还不支持。

二.WebP

目前APNG的前景不太乐观,现在要提到另外一个图片格式WebP,他是2010年Google推出的全部通吃的图片格式;

为什么说webP全部通吃呢?

因为webP既可以有损(替代JPEG)也可以无损(替代PNG),还可以动(替代GIF),并且在压缩率上全面超越了这三种常用的格式,目前支持webP的纸哟Chrome和Opera,据说Firfox也即将支持WebP,据说Sanfair也在测试WebP的支持,至于IE个EDOG可能也不太可能实现兼容了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容

  • 说到动图,大家首先想到的肯定是 GIF。但 GIF 最大的缺点是,图像是基于颜色列表的(存储的数据是该点的颜色对应...
    Coder_老王阅读 32,540评论 1 15
  • 图片通常是移动端流量耗费最多的部分,并且占据着重要的视觉空间。合理的图片格式选用和优化可以为你节省带宽、提升视觉效...
    傻傻小萝卜阅读 747评论 1 9
  • GIF(Graphics Interchange Format) Gif图像互换格式(GIF,Graphics I...
    Android_冯星阅读 952评论 0 0
  • 因为有两个女儿,所以看到这本书的时候,觉得很适合这个一直散养孩子的我,看完确实很受用。 001. 好女孩应该是什么...
    欣儿麻阅读 267评论 0 0
  • 今天晚上上了桃计划开营后的第二堂课,易仁永澄老师给桃花岛的小伙伴们带来了非常精彩的课堂,在此谢谢老师啦,么么哒。 ...
    情感后花园阅读 550评论 7 3