像素、像素密度、位图和矢量图

像素、像素密度、位图和矢量图

像素、矢量图等概念在前端开发中经常遇到，这里做一个简单的梳理。

像素 -- 图像元素

做前端开发的经常遇到它。像素是图像的最小单位，是一个点，单个像素没有具体的尺寸，但是具备亮度和色彩变化。相同屏幕，像素越多，屏幕越清晰，反之越模糊。

像素量px = 像素密度ppi × 屏幕尺寸inch # ppi -- Pixels Per Inch

都是 14 寸的 1080P 和 4K 的笔记本电脑屏幕对比，（1080P是全高清 19201080；4K是 38402160 是1080P的4倍）明显是 4K 屏幕更清晰，更细腻。也就是在屏幕尺寸一定的情况下，密度越大，像素数量越多，显示效果就会越清晰。

通常我们说一张 100kb 大小的图片，其实指的是图片的体积。一张图像在存储时，会描述每个像素点的颜色信息、位置、数量，这些描述数据就是图像的体积，如果像素越多自然图像体积越大。像素可以用来描述显示器的分辨率和图像的尺寸。

pt

pt（point）也是一个点，一个物理单位。是一个专用的印刷单位"磅"，大小为 1/72 英寸 =0.35mm，大小固定。

现在来计算一下，什么情况下1px=1pt呢？根据公式，像素量px = 像素密度ppi × 屏幕尺寸in，当像素量为1px，屏幕尺寸为1/72英寸时，分辨率ppi为72，此时，1px=1pt。也很容易算出，当分辨率为144ppi时，1pt=2px。

它们的换算关系是：1pt = 1px × (ppi / 72)。

分辨率

分辨率(英语：resolving power)又称解析度(resolution)，泛指量测或显示系统对细节的分辨能力。此概念可以用时间、空间等领域的量测。影像分辨率(image resolution)则专指影像、图像记录物体细部能力的一种度量。

常见的分辨率的单位两种：ppi 和 dpi。前端开发和设计中常涉及到图像分辨率。分辨率决定了位图图像细节的精细程度。

ppi

图像分辨率，即每英寸所包含的像素数目（Pixels per inch），单位是 ppi，即每英寸像素数。密度单位它不能实质地衡量一个物体，它必须和其他的单位结合才能描绘出一个物体的大小。ppi也一样，像素不是固定大小的，它是随着密度变化而变化的，ppi越大，像素越多，图片显示越清晰。

通常情况下，图像的分辨率越高，所包含的像素就越多，图像就越清晰，印刷的质量也就越好。同时，它也会增加文件占用的存储空间。

dpi

DPI（Dots Per Inch）是打印机的分辨率单位，指每英寸所包含的点数，密度单位。打印机的分辨率越高，打印出来的图像就越清晰。用在打印设备上，它描绘的是打印精度，1英寸所能打印的墨点数量，值越大，印刷越精细。

位图 - bitmap

电脑图像主要分两类：位图和矢量图。明白它们的区别，就能更好地选择合适的图像格式。

位图(Bitmap)正如它的名字一样，是由无数个像素点组成的。这些一个个带有色彩或灰度的点组成的矩阵，就形成了丰富多彩的图画。每个像素点都有自己的颜色值，像素的密集程度决定了图像的清晰度和细节。

位图放大的效果对比：

放大250倍后的局部效果。正如你所看到的，图像由无数个色块组成，它们都有着独立的颜色，类似于马赛克的效果，每一个色块被称作一个像素（Pixel），在扫描图片时我们需要选择分辨率的高低，这里的PPI（Pixel Per Inch，每英寸中的像素数量）就是代表分辨率，每英寸中的像素点越多，则代表图像越清晰，随之所产生的电子文件也越大。我们的肉眼并不能分辨出每个像素点，因此当图片处于1比1的显示状态下，我们所看到的物体边缘是平滑的。确定每英寸中像素点的多少取决于图片用在什么样的环境中，例如在网络与印刷中，它们的分辨率就是大相径庭的。

常见的类型

位图可以包含上千万种颜色，但是主要分为四类：

线状图

类图形只有两种颜色，通常是黑与白。它们有时被归于位图范畴因为电脑使用了一个比特（1=黑，0=白）来描述它。

灰度图

包含深浅不一的灰色层次，当然也包括纯黑与纯白。

多通道图

包含两种以上的色彩通道。最常用的形式是包含黑色与另外一种色彩（从印刷的角度讲，一般是另一种潘通专色）。下面的图例既包含黑色与潘通暖红。

真彩图

根据不同的色彩组成方式，全彩图又可以细分为RGB、CMYK、LAB等模式。它们有着不同的用途，因此必须被恰当地使用，例如我们绝不可以在网页设计中包含有CMYK模式的图片，因为IE并不支持这一显示模式，而在印刷中必须将图片严格规范为CMYK模式，否则印刷出来的效果会大大偏离你的预想。

位图图又叫点阵图、栅格图、像素图，是由一个个像素点组成的图像。常见的位图格式有：jpg、png、gif、bmp等。

矢量图

矢量图是一种完全用数学公式定义的图形图。

图像本身

矢量图的本来面目 -- 轮廓线组成

每一根线都是由众多的节点或者一些控制点连接起来的，把它称作贝塞尔曲线（Bezier Curve），贝塞尔曲线是众多矢量软件通用的绘图方式。

矢量图形并不是由像素点组成的，而是由数学公式定义的，这意味着矢量图形可以无限放大而不失真。矢量图形通常用于绘制图标、标志、文字、巨幅广告等。

矢量图又叫向量图，是由数学公式定义的图像。常见的矢量图格式有：svg、pdf、ai、eps、cdr 等。

位图 vs 矢量图

看看两者的区别：

	位图	矢量图
图形表示	由像素组成的图像	由数学公式定义的图像
放大	失真，出现锯齿	不失真，无锯齿
文件大小	随着像素增加	不随像素增加，较小
适用场景	照片、图像	图标、标志、文字、巨幅广告
优点	逼真、细节丰富	放大不失真、文件小
缺点	放大失真	逼真度不高、细节不丰富
作图软件	Photoshop、GIMP	Illustrator、CorelDRAW
常见格式	jpg、png、gif	svg、ai、eps
修改	难以修改	容易修改

需要处理复杂图像或者在不同的分辨率下显示的时候，矢量图更适合。

通过软件，矢量图可以轻松地转化为位图。

而位图转化为矢量图就需要经过复杂而庞大的数据处理，而且生成的矢量图的质量绝对不能和原来的图形比拟。

参考

• 位图和矢量图介绍
• 位图和矢量图的区别，一般是这3点
• 不明白px、pt、ppi、dpi、位图、矢量图？
• 究竟什么是位图

小结

• 像素是图像的最小单位，是一个点，单个像素没有具体的尺寸，但是具备亮度和色彩变化。
• 像素量px = 像素密度ppi × 屏幕尺寸inch。
• 位图是由像素点组成的图像，常见格式有：jpg、png、gif、bmp等。
• 矢量图是由数学公式定义的图像，常见格式有：svg、pdf、ai、eps、cdr等。
• 位图和矢量图的区别：位图放大会失真，文件大小随像素增加；矢量图放大不失真，文件大小不随像素增加。