Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它,如常用CSS 雪碧图。而Png的使用不仅仅如此,Png有多少种格式,有哪些特点,PC端中常用的Png格式是哪些,手机端最合适的Png格式是什么呢?如果你对这些问题有疑问,那么很开心的告诉你,这里有你需要的答案(*^__^*) 嘻嘻……
目录:
这个Fireworks会比较清楚,打开Fireworkd优化面板,可以清楚看到png有3种不同深度的格式:png8、png24、png32
其中,在优化面板选择png8,可发现png8包括、、3种格式
8位的PNG最多支持256(2的8次方)种颜色,8位的PNG支持不透明、索引透明、alpha透明
PNG24
支持2的24次方种颜色,表现为不透明
PNG32
支持2的32次方种颜色,32位是我们最常使用的格式,它是在PNG在24位的PNG基础上增加了8位的透明信息,支持不同程度的半透效果
其实PNG8的3种格式不透明、索引透明、alpha透明,正好把png的所有格式都归类好了:
- [PNG 不透明]格式
- [PNG 索引透明]格式
- [PNG Alpha透明]格式
有不明白的地方,请往下看~
<h2 id="png2">[PNG 不透明]格式
说到不透明,就像jpg格式一样,『png 不透明』只能为不透明,
可能会有同学会问为什么png24是不透明的,我使用photoshop导出来的就是png24啊?
Png24实际为不透明图片
),如下面板所示:
,透明背景会被默认的白色填充
导出来的png图片深度为24位,图片为不透明,
如果勾选了alpha通道,导出来的深度是32位透明图片
从photoshop存储为web所有格式面板中这样理解,,这也许是photoshop软件开发者不添加png32位格式的原因,下图为Photoshop存储为web所有格式界面的图片格式选择,并没有png32位的选项~
说到索引颜色透明,我们可以了解下什么是,『png 索引透明』代表格式有『png8 索引透明』,导出软件有:Photoshop、Fireworks,它总结如下:
由于[png8 索引透明]没有半透明索引颜色,使用Photoshop导出时,原有的半透明转化为不透明,从而产生锯齿。
设置杂边与背景色颜色一致可达到视觉上透明
怎么设置呢,打开Photoshop,在存储为web格式面板中进行如下操作:
说到Alpha透明,我们可以了解下什么是,,总结如下:
- [Png8 alpha透明]文件体积小
- [Png8 alpha透明]在IE6下有毛边
Firewoks中,在优化面板,按照如下图片的红色边框配置,可导出png8 alpha透明
<h2 id="png5">手机端选择哪种Png
和,那么哪种png格式符合这2个要求呢?做个实验吧~
测试平台:ios&android webkit浏览器
测试图片:彩种雪碧图1230*82
测试内容:同一张雪碧图导出不同png格式的大小、透明度、杂边以及在retina显示屏和普通显示屏下的对比
测试结果:
从上图可见png32和png24体积太大了,十分消耗手机用户流量,不是我们选择的范围,那么可以锁定目标在[png8 alpha]在手机端的支持是良好,可能有童鞋会认为,单凭一张图片也不能下结论~
而经过笔者使用多张雪碧图测试后
于是,
<h2 id="png6">PC端选择哪种Png
PC端使用哪种png,其实这个话题很早就有结论了,这里简单介绍下
使用photoshop打开雪碧图,分别导出一张png32和一张[png8 索引透明]的图片,
使用IE滤镜的方案:
比较耗性能,而且存在不支持背景平铺,导致链接失效等缺点,不推荐该方案,不要为了IE而把自己搞得像IE~
另外还有js和打补丁的办法,这里不做介绍,大家有兴趣可以百度下:IE6支持png24
<h2 id="png7">Png的格式、颜色种类、位数、透明度、浏览器支持一览
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。