码迷,mamicode.com
首页 > 其他好文 > 详细

apng图片的制作原理

时间:2017-01-24 17:45:27      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:ref   ios   end   格式   apn   http   firefox   效果   显示   

Apng(Animated PNG)是png的位图动画的扩展,实现png的动态效果,没有获得png的认可,之前的mng的图像格式,当时png主推的格式,但是其过多的浪费资源,所以被废弃。

firefox一直支持apng现在支持的还有ios8。

apng的动态图片的制作一般是分好几帧,第一部分的帧的结构是png格式的,在不支持apng格式的浏览器中,但是其第一帧总会显示。

Apng样式实现的原理:

技术分享

APNG的压缩原理。

这里简单一说它的原理。我们看到,这个示例中有三幅图片,其中IDAT为图像的“正文”,即构成图片的那部分数据。这三部分数据被拿出来放到了APNG的长条中。至于IHDR与IEND,指的是一个PNG文件的头部信息与尾部信息,暂且不用管。

关键是要看明白,APNG多了哪几部分?这里有主要有3部分,即acTL(用于控制动画)、fcTL(控制框架)以及fdAT(存储框架信息)。这就是三幅(3个框架)图片组成的APNG文件。

Mng个apng的关联:

其中一个便是上面提到的动态的PNG图像,即APNG(Animated PNG)。从字面上理解,这种格式的图像就是一个“会动”的PNG图像。这个最早是由Mozilla的两名程序员设计出来的,当时Mozilla放弃了MNG图像格式,转而自己开发了APNG用以存储动态多图文件。

这个MNG文件是PNG开发组设计的用以处理动态图的“官方”算法,但在实际使用时占用了过多的资源,需要用户端加载过多的代码,显得十分笨重,所以被Mozilla抛弃。不过,PNG开发组本身就不怎么赞成“动态图”这种算法设计,因为他们觉得让一种图片格式既有静态又有动态展示是一种“糟糕的设计”。

因此,在MNG上,PNG的开发组并没有下大功夫。不过,Mozilla依然乐此不彼的想要用动态的PNG(APNG)来取代GIF成为下一代动态图的标准。

动态的gif和apng图对比的差异:

在体积相仿的情况下,APNG格式的画质就像是单反,而GIF的画质就好比普通手机,差异十分巨大。同时,在24位的情况,由于PNG容纳的颜色种类远远多出256种(实际上是1680万种颜色),所以色彩还原更加细腻、真实。

Webpng的格式图片:

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩

转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)

转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题。

Wep的应用浏览器:主要是在安卓和chrome/Opera;

Apng支持的浏览器:FF/Sarari和iOS.

apng图片的制作原理

标签:ref   ios   end   格式   apn   http   firefox   效果   显示   

原文地址:http://www.cnblogs.com/mwallace/p/6347466.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!