PNG
介绍
来自维基百科介绍,便携式网络图形(Portable Network Graphics,PNG)是一种无损压缩位图图形格式,支持索引、灰色、RGB三种颜色方案以及Alpha通道等特性。PNG的开发目标是改善并取代Gif作为适合网络传输的格式而不需专利许可,所以被广泛应用于互联网及其他方面上。
PNG的特性
1、无损压缩
2、支持索引透明和Alpha透明半透明
3、支持256色调色板技术(索引颜色)以产生小体积文件
4、使用循环冗余码检测损坏文件
5、支持渐近显示和流式读写
6、最新的PNG标准允许在一个文件内存储多幅图像(APNG)。
PNG存储实现原理
这篇文章已经有较好的讲解。PNG存储原理讲解
PNG8、PNG24、PNG32差异
格式 | 简介 | 最高支持色彩通道 | 索引色编辑支持 | 透明支持 |
---|---|---|---|---|
PNG8 | 8位单通道,最多显示256种颜色 | 256种索引色 | 支持 | 支持设定特定索引色为透明色(布尔透明) 支持为索引色附加8位透明度(256阶alpha透明) |
PNG24 | 24位RGB三通道,真彩色图像 | 约1600万颜色 | 不支持 | 不支持 |
PNG32 | 32位RGBA四通道,在原有的PNG24位基础上增加了Alpha通道来描述透明度 | 约1600万颜色,外加256种半透明色 | 不支持 | 支持8位透明度(256阶alphat透明) |
PNG 索引透明和Alpha透明
索引透明只能表示透明和不透明,产生体积相对较小的,不过容易产生杂边锯齿。
Alpha透明是一个8位的灰度通道,该通道用256级灰度来记录图像中的透明度信息,定义透明、不透明和半透明区域,支持全透明和半透明。
参考:https://www.cnblogs.com/peunzhang/archive/2013/05/30/3050394.html#png1
使用场景
1、小的LOGO,颜色简单且对比强烈图片和背景
2、颜色简单、对比度强的透明小图
3、颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片
4、用于页面结构的基本视觉元素,如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储,这样才能更好的保证设计品质
参考资料
PNG特性、对比JPEG、GIF差异
png8支持透明通道(一)
png逐行扫描和隔行扫描说明
深入解析png图片解码技术
图片格式中的小较真
JPG?GIF?PNG?前端如何选择图片格式?
网站建设中使用的png和jpg两种图片格式都有哪些特点和区别