PNG格式种类及应用实例使用详解

/PS教程：PNG格式种类及应用实例使用详解１PNＧ格式种类ＨYPERLＩNK＂"\ｌ”arｔiclｅ_briｅf＂\t"＂【PＣonｌinｅ教程】PNG是图像文件存储格式，在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它，如常用CSS雪碧图.而ＰNG的使用不仅仅如此，PＮG有多少种格式，有哪些特点，ＰC端中常用的PＮG格式是哪些,手机端最合适的PＮG格式是什么呢?如果你对这些问题有疑问，那么很开心的告诉你，这里有你需要的答案。PNＧ的格式和透明度这个Fireｗｏｒks会比较清楚，打开Fiｒeworkd优化面板，可以清楚看到ＰNG有3种不同深度的格式：PNG８、PNG24、PNG３2.

图0１其中,在优化面板选择ＰＮG8,可发现ＰNG8包括不透明、索引色透明、ａｌｐｈａ透明３种格式.

图02PNＧ8８位的PNＧ最多支持２56（2的8次方)种颜色,8位的PＮＧ其实8支持不透明、索引透明、alpha透明。PNG2４支持2的24次方种颜色，表现为不透明。ＰNG32支持2的32次方种颜色，３2位是我们最常使用的格式，它是在PNG在24位的ＰNG基础上增加了８位的透明信息，支持不同程度的半透效果。其实PNG8的３种格式不透明、索引透明、alｐｈa透明，正好把ＰNＧ的所有格式都归类好了：『PNＧ不透明』格式『PNG索引透明』格式『ＰNGalｐha透明』格式『PNG不透明』格式说到不透明，就像jpg格式一样,『PNＧ不透明』只能为不透明，代表格式有:『PNG8不透明』和『PNG24』，导出软件有：Photｏshoｐ、Fireworｋs.不推荐使用『ＰNG不透明』格式,建议用ｊｐg图片来代替它。可能会有同学会问为什么PNG24是不透明的,我使用Phｏtoshop导出来的就是PＮG24啊？ＰNG2４实际为不透明图片打开Ｐhｏtｏsｈop，任意打开一个带透明的psd文件，存储为ｗｅb所有格式(ｃtrl+shifｔ+alt+s）,如下面板所示:ﻫ图03不勾选透明度单选框，图片的透明背景会被默认的白色填充ﻫ图04导出来的PNG图片深度为24位，图片为不透明，表现跟jｐg图片相似

图05如果勾选了透明度（alｐha通道），导出深度为32位的透明图片

图０62PNG索引透明HYPＥRLIＮK＂”＼l”article_brief"\t”"『PＮG８索引透明』产生杂边锯齿原因从Ｐhｏtoｓhoｐ存储为web所有格式面板中这样理解，PNG2４深度其实为24位，再勾选上8位的aｌｈｐa通道,24+8＝３２，即『ＰNG32』=『ＰＮG２４+alpｈa』，这也许是Photoｓｈoｐ软件开发者不添加PＮG32位格式的原因,下图为Phoｔoshop存储为wｅb所有格式界面的图片格式选择,并没有PNG32位的选项～ﻫ图07『PNＧ索引透明』格式说到索引颜色透明，我们可以了解下什么是索引颜色,『PNG索引透明』代表格式有『PNＧ８索引透明』,导出软件有：Phｏｔoshｏｐ、Firewoｒkｓ，它的特点总结如下：挑选一副图片中最有代表性的若干种颜色（通常不超过256种)只能为不透明或全透明文件体积小带有杂边锯齿支持ＩE６如何使用Photｏshoｐ导出『ＰNG8索引透明』ﻫ图０８使用Phｏtoｓhｏp，存储为weｂ所有格式，按照如下图片的红色边框配置,可导出PNG8索引透明注:使用Photoshoｐ导出『PNG8索引透明』的效果比Fｉreworkｓ导出的效果良好,这里不介绍使用Fiｒｅwｏrｋs导出『ＰＮG8索引透明』『PＮG8索引透明』只有透明索引颜色，没有半透明索引颜色，下图左侧为带半透明像素的图片,在浏览器中打开不会有锯齿,而右侧图片为全透明或不透明的像素，在浏览器打开后有锯齿。

图０9由于『ＰＮＧ８索引透明』没有半透明索引颜色，使用Phoｔosｈop导出时，原有的半透明转化为不透明，从而产生锯齿.

图10如何避免『ＰNG８索引透明』的杂边锯齿方法：设置杂边与背景色颜色一致可达到视觉上透明。相信不难理解,利用杂边与背景色一致,可以来满足视觉上的透明,缺点是只能适应一种背景色，在其它背景色下同样会产生杂边.ﻫ图１1

图１2３ＰNG应用实例HYPEＲLINK”＂\l”article_brｉef”\ｔ”＂怎么设置呢，打开Photoｓhｏp，在存储为ｗeb格式面板中进行如下操作，在杂边选项中选择与背景色一致的颜色。

图１3『PNGAｌphａ透明』格式说到aｌpｈa透明，我们可以了解下什么是ａｌpha通道，『PNＧａｌpha透明』代表格式有『PＮG8ａlphａ透明』和『ＰNG32』，导出软件有Ｆiｒewoｒkｓ,它的特点总结如下：一个8位的灰度通道，该通道用2５６级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域支持全透明和半透明『PNＧ8alpｈa透明』文件体积小『PＮG8ａlpha透明』在IE6下有毛边如何使用Fｉrewｏｒks导出『PNG8alpha透明』Fiｒewokｓ中,在优化面板,按照如下图片的红色边框配置，可导出ＰNG８ａlpha透明。注：Ｆirewoks支持导出『PNG8aｌｐｈa透明』，Ｐｈoｔoshoｐ不支持导出『PＮG8aｌｐha透明』ﻫ图14ﻫ图15手机端选择哪种PNG说到手机,考虑流量的问题是必不可少的，所选PNＧ需要满足体积小和视觉效果良好，那么哪种PＮG格式符合这2个要求呢？做个实验吧~不同PNG格式测试测试平台:ios&androiｄｗｅbkiｔ浏览器测试图片：彩种雪碧图１23０＊82ﻫ图16测试内容:同一张雪碧图导出不同PNＧ格式的大小、透明度、杂边以及在reｔina显示屏和普通显示屏下的对比测试结果：

图17从上图可见PNG32和PＮG24体积太大了,十分消耗手机用户流量，不是我们选择的范围，那么可以锁定目标在『PNG8alphａ透明』和『ＰNG8索引透明』中,2者对比，可以看出『PNG8alpha』在手机端的支持是良好,可能有童鞋会认为，单凭一张图片也不能下结论~而经过笔者使用多张雪碧图测试后使用Firｅworkｓ导出的『PNG8alpha』，在手机端的支持是比较好的~不仅文件体积小，节省流量，而且半透明效果良好于是，移动端采用『PNG8alｐha透明』，相信『ＰＮG８ａlｐha透明』是未来的一种趋势~PC端选择哪种ＰＮＧPC端使用哪种PＮG，其实这个话题很早就有结论了,这里简单介绍下。使用PNＧ8的方案使用Phｏtoｓｈｏp打开雪碧图,分别导出一张PNG32和一张『PNＧ8索引透明』的图片，高级浏览器使用PNＧ３２位图片，针对IE６使用『PＮG8索引透明』，并设置『PNG8索引透明』杂边与背景色颜色一致可达到视觉上透明注:为啥使用PＮG32而不使用『ＰNＧ8ａlpha透明』？因为pc端的网速大多良好,建议使用表现更佳的PNＧ图片,显然ＰNG3２是最合适的，当然你也可以使用『PNＧ8alpha透明』,但是在高清显示器下的质量不如PNG32ﻫ图1８.bg｛backgrｏund：url（ｇｌobal。PNG？ｖ=2０1３0５30)no—repｅａt;_bacｋgrouｎd：url(gloｂal_PＮG8。PＮＧ？ｖ＝20１３０530）nｏ-ｒｅpｅat;/／IE６使用的背景图}使用ＩE滤镜的方案比较耗性能,而且存在不支持背景平铺,导致链接失效等缺点,不推荐该方案,不要为了IE而把自己搞得像IＥ～.bg{filteｒ：progid