图像
图形格式
图像格式分为位图图形格式和矢量图形格式。
定义
位图(bitmap)图形格式是以像素点阵来描绘图像。
矢量图片格式是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。
引用:图片格式中的小较真
矢量图 是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述,当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。
矢量图 的优点在于文件相对较小,并且放大缩小不会失真。缺点则是以完美的几何图形表现出来的图片很难表现自然度高的写实图像。
位图 又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点,当我们把这些不同颜色的像素点按照一定规律排列在一起的时候,就形成了我们所看到的图像。所以当我们放大一幅像素图到一定程度时,能看到拼片一样的像素点。
位图 的优点是利于显示色彩层次丰富的写实图像。缺点则是文件较大,放大和缩小图像会失真。尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图,即他们都是通过记录像素点的数据来保存和显示图像,但这些不同格式的图像在记录这些数据时的方式却不一样,这就是涉及到有损压缩和无损压缩的区别——是否失真。
图形格式实现
参考:图形格式具体格式
位图:JPEG/JPG、PNG、WEBP、GIF等
矢量图: SVG等
图形存储
位图存储即像素点的存储。将五颜六色像素点使用计算机二进制(0/1)来进行描述。进而引出图像模式。
图像模式分为:位图模式、RGB模式、索引颜色模式
位图模式 是1位深度的图像。它只是黑和白两种颜色。
RGB模式 是三原色模式,一个像素点用8位3通道即24位(3个字节)来进行描述,表示的颜色范围有1677万种颜色,我们也称之谓“真彩色”。
索引颜色模式 生成最多256种颜色的8位图像文件。当转换为索引颜色时,Photoshop 将构建一个颜色查找表 (CLUT),用以存放并索引图像中的颜色。如果原图像中的某种颜色没有出现在该表中,则程序将选取最接近的一种,或使用仿色以现有颜色来模拟该颜色。
矢量 又称为「向量」,矢量图形中的图形元素(点和线段)称为对象,每个对象都是一个单独的个体,它具有大小、方向、轮廓、颜色和屏幕位置等属性。例如SVG(可缩放矢量图形)是一种基于 XML 语法的图像格式,是对图像的形状描述。
通道
作者认为通道出现更多是技术层面方式实现颜色变化表示所产生的。
通道作为图像的组成部分,是与图像的格式密不可分的,图像颜色,格式的不同决定了通道的数量和模式,在ps通道面板中可以直观的看到。
位图模式和索引模式的图片是单通道图片,而RGB模式的图片是三通道图片,通过为R通道、G通道、B通道,RGBA模式图片是四通道图片,是在RGB三个通道上额外增加的一个Alpha通道。
1 | 安卓支持的颜色模式: |
颜色深度(色彩深度)
色彩深度简称色深,在计算机图形学领域表示在位图或者视频帧缓冲区中储存每一像素的颜色所用的位数,常用单位为位/像素(bpp)。色彩深度越高,可用的颜色就越多。
eg: JPEG颜色深度:24位 png-8颜色深度:8位
参考:https://zh.wikipedia.org/wiki/%E8%89%B2%E5%BD%A9%E6%B7%B1%E5%BA%A6
Alpha透明和索引透明
讲述索引透明,需要先说明下索引颜色(Indexed Color)。
在计算中,索引颜色(Indexed color) 是一种以有限的方式管理数字图像颜色的技术,以节省计算机内存和文件存储空间,同时加速显示刷新和文件传输。它是矢量量化压缩的一种形式。
当以这种方式对图像进行编码时,颜色信息不直接由图像像素数据携带,而是存储在称为调色板的单独数据片段中:颜色元素阵列。数组中的每个元素表示一种颜色,由它在数组中的位置进行索引。单个条目有时被称为颜色寄存器。图像像素不包含其颜色的完整规范,但仅包含其在调色板中的索引。这种技术有时被称为伪彩色或间接彩色,因为颜色是间接处理的。
索引透明是基于索引颜色上增加一位来标识透明。
通常使用索引颜色的情况下,图像深度的值即为 8,因而调色板里存放的颜色就只有 256 种颜色,长度为 256 * 3 个字节。再加上 1 位布尔值表示透明像素,这就是我们常说的 png8 图片了。
摘抄至:png 的故事:获取图片信息和像素内容
Alpha透明即阿尔法透明,通常我们会使用一个通道来单独表示Alpha透明。因此对于8位的Alpha通道可以表示256种不同程度半透明色。
图像逐行扫描算法和隔行扫描算法
字面上意思逐行扫描算法是像素点一行一行行的扫描显示的,隔行扫描算法是每次扫描会跳过一些像素点进行多次扫描显示。
从图片展示效果:逐行扫描算法上看到图像是一行一行的展示出来,隔行扫描算法是整体模糊展示逐步清晰显示出来。
photoshop上设置这两种编码算法是基准(逐行扫描算法)和连续(隔行扫描算法)。
在网速相对较慢情况下,图片即刻展示。
有损压缩和无损压缩
有损压缩是对图像数据进行处理,去掉那些我们人眼分辨不出来的颜色,然后周边颜色通过渐变或者其他形式补充进来。这样既然降低图片质量大小,又不会影响图片的还原效果。(eg:JPEG)
无损压缩是先判断图像上哪些区域颜色是相同的,哪些是不同的,然后把这些相同数据信息进行压缩记录,而把不同数据另外保存。(eg:PNG)
参考:有损压缩和无损压缩
从编码图片工具性能角度
这篇文章分析很到位移动端图片格式调研
总结
各类主要图像格式突现时间线:GIF-1987,JPEG-1992,PNG-1996,APNG-2004,WebP-2010
参考资料:
png 的故事:获取图片信息和像素内容
索引颜色(Indexed Color)
图形文件格式比较
图像模式
AdobePhotoshop用户指南-图像和颜色基础知识-颜色模式
什么是位图和矢量图
图片格式中的小较真
图形文件格式比较