共计 2998 个字符，预计需要花费 8 分钟才能阅读完成。
png 是图像文件存储格式，在网页设计中已经不是一个陌生的名词，在前端开发中经常使用到它，如常用 css 雪碧图。而 png 的使用不仅仅如此，png 有多少种格式，有哪些特点，pc 端中常用的 png 格式是哪些，手机端最合适的 png 格式是什么呢？如果你对这些问题有疑问，那么很开心的告诉你，这里有你需要的答案。
png 的格式和透明度
这个 fireworks 会比较清楚，打开 fireworkd 优化面板，可以清楚看到 png 有 3 种不同深度的格式：png8、png24、png32。
其中，在优化面板选择 png8，可发现 png8 包括不透明、索引色透明、alpha 透明 3 种格式。
png8
8 位的 png 最多支持 256（2 的 8 次方）种颜色，8 位的 png 其实 8 支持不透明、索引透明、alpha 透明。
png24
支持 2 的 24 次方种颜色，表现为不透明。
png32
支持 2 的 32 次方种颜色，32 位是我们最常使用的格式，它是在 png 在 24 位的 png 基础上增加了 8 位的透明信息，支持不同程度的半透效果。
其实 png8 的 3 种格式不透明、索引透明、alpha 透明，正好把 png 的所有格式都归类好了：
- 『png 不透明』格式
- 『png 索引透明』格式
- 『png alpha 透明』格式
『png 不透明』格式
说到不透明，就像 jpg 格式一样，『png 不透明』只能为不透明，代表格式有：『png8 不透明』和『png24』，导出软件有：photoshop、fireworks。不推荐使用『png 不透明』格式，建议用 jpg 图片来代替它。
可能会有同学会问为什么 png24 是不透明的，我使用 photoshop 导出来的就是 png24 啊？
png24 实际为不透明图片
打开 photoshop，任意打开一个带透明的 psd 文件，存储为 web 所有格式 (ctrl shift alt s)，如下面板所示：
不勾选透明度单选框，图片的透明背景会被默认的白色填充
导出来的 png 图片深度为 24 位，图片为不透明，表现跟 jpg 图片相似
如果勾选了透明度 (alpha 通道)，导出深度为 32 位的透明图片
从 photoshop 存储为 web 所有格式面板中这样理解，png24 深度其实为 24 位，再勾选上 8 位的 alhpa 通道，24 8=32，即『png32』=『png24 alpha』，这也许是 photoshop 软件开发者不添加 png32 位格式的原因，下图为 photoshop 存储为 web 所有格式界面的图片格式选择，并没有 png32 位的选项~
『png 索引透明』格式
说到索引颜色透明，我们可以了解下什么是索引颜色，『png 索引透明』代表格式有『png8 索引透明』, 导出软件有：photoshop、fireworks，它的特点总结如下：
- 挑选一副图片中最有代表性的若干种颜色（通常不超过 256 种）
- 只能为不透明或全透明
- 文件体积小
- 带有杂边锯齿
- 支持 ie6
如何使用 photoshop 导出『png8 索引透明』
使用 photoshop，存储为 web 所有格式，按照如下图片的红色边框配置，可导出 png8 索引透明
注：使用 photoshop 导出『png8 索引透明』的效果比 fireworks 导出的效果良好，这里不介绍使用 fireworks 导出『png8 索引透明』
『png8 索引透明』产生杂边锯齿原因
『png8 索引透明』只有透明索引颜色，没有半透明索引颜色，下图左侧为带半透明像素的图片，在浏览器中打开不会有锯齿，而右侧图片为全透明或不透明的像素，在浏览器打开后有锯齿。
由于『png8 索引透明』没有半透明索引颜色，使用 photoshop 导出时，原有的半透明转化为不透明，从而产生锯齿。
如何避免『png8 索引透明』的杂边锯齿
方法：设置杂边与背景色颜色一致可达到视觉上透明。
相信不难理解，利用杂边与背景色一致，可以来满足视觉上的透明，缺点是只能适应一种背景色，在其它背景色下同样会产生杂边。
怎么设置呢，打开 photoshop，在存储为 web 格式面板中进行如下操作，在杂边选项中选择与背景色一致的颜色。
『png alpha 透明』格式
说到 alpha 透明，我们可以了解下什么是 alpha 通道，『png alpha 透明』代表格式有『png8 alpha 透明』和『png32』，导出软件有 fireworks，它的特点总结如下：
- 一个 8 位的灰度通道，该通道用 256 级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域
- 支持全透明和半透明
- 『png8 alpha 透明』文件体积小
- 『png8 alpha 透明』在 ie6 下有毛边
如何使用 fireworks 导出『png8 alpha 透明』
firewoks 中，在优化面板，按照如下图片的红色边框配置，可导出 png8 alpha 透明。
注：firewoks 支持导出『png8 alpha 透明』，photoshop 不支持导出『png8 alpha 透明』
手机端选择哪种 png
说到手机，考虑流量的问题是必不可少的，所选 png 需要满足体积小和视觉效果良好，那么哪种 png 格式符合这 2 个要求呢？做个实验吧~
不同 png 格式测试
测试平台：ios&android webkit 浏览器
测试图片：彩种雪碧图 1230*82
测试内容：同一张雪碧图导出不同 png 格式的大小、透明度、杂边以及在 retina 显示屏和普通显示屏下的对比
测试结果：
从上图可见 png32 和 png24 体积太大了，十分消耗手机用户流量，不是我们选择的范围，那么可以锁定目标在『png8 alpha 透明』和『png8 索引透明』中，2 者对比，可以看出『png8 alpha』在手机端的支持是良好，可能有童鞋会认为，单凭一张图片也不能下结论~
而经过笔者使用多张雪碧图测试后使用 fireworks 导出的『png8 alpha』，在手机端的支持是比较好的~ 不仅文件体积小，节省流量，而且半透明效果良好
于是， 移动端采用『png8 alpha 透明』，相信『png8 alpha 透明』是未来的一种趋势~
pc 端选择哪种 png
pc 端使用哪种 png，其实这个话题很早就有结论了，这里简单介绍下。
使用 png8 的方案：
使用 photoshop 打开雪碧图，分别导出一张 png32 和一张『png8 索引透明』的图片， 高级浏览器使用 png32 位图片，针对 ie6 使用『png8 索引透明』，并设置『png8 索引透明』杂边与背景色颜色一致可达到视觉上透明
注：为啥使用 png32 而不使用『png8 alpha 透明』？因为 pc 端的网速大多良好，建议使用表现更佳的 png 图片，显然 png32 是最合适的，当然你也可以使用『png8 alpha 透明』，但是在高清显示器下的质量不如 png32
.bg{background: no-repeat;
_background: no-repeat;//ie6 使用的背景图
} 使用 ie 滤镜的方案：
比较耗性能，而且存在不支持背景平铺，导致链接失效等缺点，不推荐该方案，不要为了 ie 而把自己搞得像 ie~
.bg{filter:progid:dximagetransform.microsoft.alphaimageloader(src="img. png", sizingmethod="scale");} 另外还有 js 和打补丁的办法，这里不做介绍，大家有兴趣可以百度下：ie6 支持 png24
png 的格式、颜色种类、位数、透明度、浏览器支持一览
正文完
发表至： 设计相关
2013-09-29