《《PNG格式介绍》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《PNG格式介绍》PPT课件.ppt（11页珍藏版）》请在金锄头文库上搜索。
1、PNG格式介绍 矢量图 完美的几何图形 矢量图是通过组成图形的一些基本元素 如点 线 面 边框 填充色等信 息通过计算的方式来显示图形的 就好比我们在几何学里面描述一个圆可以 通过它的圆心位置和半径来描述 当然还可以通过边框的粗细 颜色以及填 充的颜色等数据去描述它的样式 而电脑在显示的时候则通过这些数据去绘 制出我们定义的图像 矢量图的优点在于文件相对较小 并且放大缩小不会失真 缺点则是这些完 美的几何图形很难表现自然度高的写实图像 需要强调说明的是我们在web页面上所使用的图像都是位图 即便有些称为 矢量图形 如矢量icon等 也是指通过矢量工具进行绘制然后再转成位图格 式在web上使用的
2、 区别于像素绘制的图形 位图 神奇的拼图 位图又叫像素图或栅格图 它是通过记录图像中每一个点的颜色 深度 透 明度等信息来存储和显示图像 一张位图就好比一幅大的拼图 只不过每个 拼块都是一个纯色的像素点 当我们把这些不同颜色的像素点按照一定规律 排列在一起的时候 就形成了我们所看到的图像 所以当我们放大一幅像素 图时 能看到这些拼片一样的像素点 如下图 位图的优点是利于显示色彩层次丰富的写实图像 缺点则是文件大小较大 放大和缩小图像会失真 矢量图与位图 尽管我们在web页面中所使用的JPG PNG GIF格 式的图像都是位图 即他们都是通过记录像素点的数 据来保存和显示图像 但这些不同格式的图
3、像在记录 这些数据时的方式却不一样 这就是涉及到有损压缩 和无损压缩的区别 有损压缩与无损压缩 有损压缩 你看到的不一定是真实的 按照我的理解有损压缩就是在存储图像的时候并不完全真实的 记录图像上每个像素点的数据信息 它会根据人眼观察现实世 界的特性 人眼对光线的敏感度比对颜色的敏感度要高 生物 实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动 填补缺失的颜色 对图像数据进行处理 去掉那些图像上会被 人眼忽略的细节 然后使用附近的颜色通过渐变或其他形式进 行填充 这样既能大大降低图像信息的数据量 又不会影响图 像的还原效果 无损压缩 最精确的拼图 相对有损压缩而言无损压缩则会真实的记录图
4、像上每个像 素点的数据信息 但为了压缩图像文件的大小会采取一些 特殊的算法 无损压缩的压缩原理是先判断图像上哪些区 域的颜色是相同的 哪些是不同的 然后把这些相同的数 据信息进行压缩记录 例如一片蓝色的天空之需要记录 起点和终点的位置就可以了 而把不同的数据另外保存 例如天空上的白云和渐变等数据 PNG是我们最常见的一种采用无损压缩的图片格式 无损 压缩在存储图像前会先判断图像上哪些地方是相同的哪些 地方是不同的 为此需要对图像上所有出现的颜色进行索 引 如上图 我们把称这些颜色称为索引色 索引色就 好比绘制这幅图像的 调色版 PNG在显示图像的时候则 会用 调色版 上的这些颜色去填充相应的位
5、置 这里大家可能会疑惑既然PNG采用的是无损压缩为什么我 们保存的PNG格式图片还会有失真呢 这是因为无损压缩 只是说它的压缩方式会尽可能真实的还原图像 但从它的 压缩原理我们可以知道它是通过索引图像上相同区域的颜 色进行压缩和还原的 这就意味着只有在图像上出现的颜 色数量小于我们可以保存的颜色数量时 我们才能真实的 记录和还原图像 否则就会丢失一些图像信息 PNG8最 多只能索引256种颜色 所以对于颜色较多的图像不能真实 还原 PNG24则可以保存1600多万种颜色 基本能够真实 还原我们人类肉眼所可以分别的所有颜色 PNG格式最多 可以保存48位颜色通道 而对于有损压缩来说 不管图 像上
6、的颜色多少 都会损失图像信息 PNG的特性 1 能在保证最不失真的情况下尽可能压缩图像 文件的大小 2 PNG用来存储灰度图像时 灰度图像的深度 可多到16位 存储彩色图像时 彩色图像的深度 可多到48位 并且还可存储多到16位的 通道数 据 3 对于需要高保真的较复杂的图像 PNG虽然 能无损压缩 但图片文件较大 不适合应用在 Web页面上 格式最高支持色彩通 道 索引色编辑 支持透明支持 PNG8256色支持支持布尔透明 PNG24约1600万色不支持支持8位 256阶 alpha透明 PNG8与PNG24 提到PNG格式就不得不提到PNG8和PNG24 这种叫法并非官 方定义 不过由于普
7、遍使用已经被大家广泛接受了 通过前面 的介绍我们知道PNG采用无损压缩是通过索引色去存储和还原 图像的 PNG8和PNG24后面的数字则是代表这种PNG格式最 多可以索引和存储的颜色值 8 代表2的8次方也就是256色 而24则代表2的24次方大概有1600多万色 不仅如此 PNG8还支持1位的布尔透明通道 所谓布尔透明指 的是要么完全透明要么完全不透明 而PNG24则支持8位 256 阶 的alpha通道透明 也就是说可以存储从完全透明到完全不 透明一共256个层级的透明度 即所谓的半透明 什么时候应该使用PNG 下图是淘宝网最常见的一个图片即 立刻购买 按钮 这里我尝 试用JPG和PNG8
8、格式分别进行保存 可以看到保存的结果有 两个值得注意的地方 1 JPG保存的文件大小是PNG保存的文件大小的2倍 2 JPG不仅文件更大并且还出现了噪点 如图中红色方框标 注的 那么是什么原因造成这样的差异呢 首先我们可以看出 立刻购买 这个按钮是在photoshop中 用矢量工具绘制出来的 其渐变填充是非常规则的线性 渐变 文字颜色和描边等都是采用纯色 所以这个图像 所包含的色彩信息非常有限 根据前面我们介绍的无损 压缩的特性 当用PNG存储这个图像时 只需要保存很 少的色彩信息就可以真实还原这个图像 而对于JPG格式 来说大小主要决定于图像的颜色层次 所以在这种颜色 较少但对比强烈的情况下 反而不能很好的压缩文件大 小 另外根据有损压缩的压缩算法JPG会在图像中通过渐变或 其他方式填充一些被删除的数据信息来对图像进行压缩 图中红色和白色的地方由于色差较大 JPG在压缩过程 中就会填充一些额外杂色进去 反而影响的图像的质量 这也是为什么JPG不利于存储大块颜色相近区域以及亮 度差异十分明显的图像的原因
