2024年4月23日发(作者：)

可编辑

PS教程：PNG格式种类及应用实例使用详解

【PConline 教程】PNG是图像文件存储格式，在网页设计中已经不是一个陌生

的名词，在前端开发中经常使用到它，如常用CSS 雪碧图。而PNG的使用不仅

仅如此，PNG有多少种格式，有哪些特点，PC端中常用的PNG格式是哪些，手机

端最合适的PNG格式是什么呢？如果你对这些问题有疑问，那么很开心的告诉

你，这里有你需要的答案。

PNG的格式和透明度

这个Fireworks会比较清楚，打开Fireworkd优化面板，可以清楚看到PNG

有3种不同深度的格式：PNG8、PNG24、PNG32。

图01

其中，在优化面板选择PNG8，可发现PNG8包括不透明、索引色透明、alpha

透明3种格式。

图02

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)，如下面板所示：

图03

不勾选透明度单选框，图片的透明背景会被默认的白色填充

图04

导出来的PNG图片深度为24位，图片为不透明，表现跟jpg图片相似

精品文档，欢迎下载