JEPG、PNG、WEBP、GIF、SVG的学习使用、 各种网络图片格式学习-PNG

吐槽、建议、解惑入口网址

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两种图片格式都有哪些特点和区别

不曾拥有,所以努力。(坚持原创技术分享,您的支持将鼓励我继续创作!)