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

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

引用

CSDN

1.

https://blog.csdn.net/JackZhouMine/article/details/139809837

像素、像素密度、位图和矢量图是前端开发中经常遇到的概念。本文将对这些概念进行详细的梳理和对比，帮助读者更好地理解它们的含义和应用场景。

像素 – 图像元素

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

像素量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 矢量图

看看两者的区别：

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

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

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

小结

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