Jack Chou's blog像素、像素密度、位图和矢量图
像素、矢量图等概念在前端开发中经常遇到，这里做一个简单的梳理。
像素 -- 图像元素
做前端开发的经常遇到它。像素是图像的最小单位，是一个点，单个像素没有具体的尺寸，但是具备亮度和色彩变化。相同屏幕，像素越多，屏幕越清晰，反之越模糊。
像素量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 |
| 修改 | 难以修改 | 容易修改 |
需要处理复杂图像或者在不同的分辨率下显示的时候，矢量图更适合。
通过软件，矢量图可以轻松地转化为位图。
而位图转化为矢量图就需要经过复杂而庞大的数据处理，而且生成的矢量图的质量绝对不能和原来的图形比拟。
参考
小结
- 像素是图像的最小单位，是一个点，单个像素没有具体的尺寸，但是具备亮度和色彩变化。
- 像素量px = 像素密度ppi × 屏幕尺寸inch。
- 位图是由像素点组成的图像，常见格式有：jpg、png、gif、bmp等。
- 矢量图是由数学公式定义的图像，常见格式有：svg、pdf、ai、eps、cdr等。
- 位图和矢量图的区别：位图放大会失真，文件大小随像素增加；矢量图放大不失真，文件大小不随像素增加。