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

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

像素 – 图像元素

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

像素量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、GIMPIllustrator、CorelDRAW
常见格式jpg、png、gifsvg、ai、eps
修改难以修改容易修改

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

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

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

参考

小结

  • 像素是图像的最小单位,是一个点,单个像素没有具体的尺寸,但是具备亮度和色彩变化。
  • 像素量px = 像素密度ppi × 屏幕尺寸inch。
  • 点阵图是由像素点组成的图像,常见格式有:jpg、png、gif、bmp等。
  • 矢量图是由数学公式定义的图像,常见格式有:svg、pdf、ai、eps、cdr等。
  • 点阵图和矢量图的区别:点阵图放大会失真,文件大小随像素增加;矢量图放大不失真,文件大小不随像素增加。
  • 36
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值