png8,png24,png32图片格式基础概念解释

in css3 with 0 comments, 2991 views

png8:这种格式类似gif,最多也是支持256种索引色,它虽然没有gif的动画效果,不过也有自己的优势,图片颜色较少且图片尺寸相对较大时用png8格式的图片文件大小要小上不少。而且它同时支持索引色透明和alpha透明【后者经常被误解说成不支持,其实是支持的,这个责任可能得推到强大的ps上,在ps上导出的png8格式只能是索引色透明,因为这个原因导致很多人新人认为png不支持alpha透明,尽管很多熟手也是如此认为。还有一种责任得追究到一种对alpha透明的错误认知,alpha透明和有无锯齿并无直接关系,不是很光滑的透明就为alpha,我所理解的alpha透明是半透明,你能透过它看到图片底下的内容就是alpha透明,而跟所谓的连续是否平滑毫无关系可言。】

我们可以试验一下,首先我们需要fireworks,画一个黑色矩形, alpha 透明度设置成30%;

优化面板上设置为alpha透明,png8格式;

最终生成图片如下:

为了作为比较我这里也顺便生成了一张索引色透明的png8图片

demo代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body style="background-color:#F60;">
<div style="position:relative; width:94px; height:123px;">
能看到文字和背景色吗
<img style="position:absolute; left:0; top:0;" src="png8_alpha.png" />
</div>
<div style="position:relative; width:94px; height:123px;">
能看到文字和背景色吗
<img style="position:absolute; left:0; top:0;" src="png8_suoyin.png" />
</div>
</body>
</html>

运行结果也证实了这两种模式png8是同时支持这两种透明模式的:

png24:这种格式的图片其实也是不支持alpha透明的,不知道为何强大的ps上导出来png24格式是透明的,我只能说ps导出的png24其实本质上是png32格式的(而且是不完整的,因为他不支持图层),这点在fireworks上就很明显,fireworks导出图时png8 png24 png32均可选择。

png32:这种格式比我们想像的要强大得多,fireworks做图的源文件就是以这种格式保存的,支持图层,辅助线等复杂数据的保存。

^-^以上就是我对png格式的理解了,如果有不妥的地方欢迎指正。


Responses ${replyToWho} / Cancel Reply