当前位置: 首页 > news >正文

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

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

    • 像素 -- 图像元素
    • pt
    • 分辨率
      • ppi
      • dpi
    • 点阵图 - bitmap
      • 常见的类型
    • 矢量图
    • 点阵图 vs 矢量图
    • 参考
    • 小结

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

像素 – 图像元素

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

像素量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
修改难以修改容易修改

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

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

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

参考

  • 位图和矢量图介绍

  • 位图和矢量图的区别,一般是这3点

  • 不明白px、pt、ppi、dpi、位图、矢量图?

  • 究竟什么是位图

小结

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

相关文章:

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

像素、像素密度、位图和矢量图 像素 -- 图像元素pt分辨率ppidpi 点阵图 - bitmap常见的类型 矢量图点阵图 vs 矢量图参考小结 像素、矢量图等概念在前端开发中经常遇到,这里做一个简单的梳理。 像素 – 图像元素 做前端开发的经常遇到它。像素是图像的最小单位&am…...

第二证券股市资讯:昨夜!全球新“股王”诞生

昨晚,英伟达成全球市值榜首公司。 当地时间6月18日,美股三大指数小幅收高,标普500指数与纳指再创前史新高。标普500指数涨0.25%,道指涨0.15%,纳指涨0.03%。 AI热潮推动英伟达大涨,市值逾越微软、苹果&…...

自动水位雨量站:用于水库防汛预警

TH-SW2自动水位雨量站是一种现代化的监测设备,主要用于水库等水域的防汛预警系统。它通过集成水位和雨量监测功能,为水库的管理和调度提供实时、准确的数据支持。 工作原理: 自动水位雨量站通过内置的水位计和雨量计实时监测水库的水位变化和…...

苍穹外卖---新增员工(P16-P20)

一、需求分析和设计 (1)产品原型 一般在做需求分析时,往往都是对照着产品原型进行分析,因为产品原型比较直观,便于我们理解业务。后台系统中可以管理员工信息,通过新增员工来添加后台系统用户。 新增员工…...

Windows10 利用QT搭建SOEM开发环境

文章目录 一. SOEM库简介二. 安装WinPcap三. SOEM(1.4)库安装(1) 编译32位库(2) 编译64位库 四. 运行SOEM示例代码五. WIN10下利用QT构建SOEM开发环境 一. SOEM库简介 SOEM(Scalable Open EtherCAT Master 或 Simple Open EtherCAT Master)是一个开源的…...

SpringBoot整合H2数据库并将其打包成jar包、转换成exe文件二(补充)

SpringBoot整合H2数据库并将其打包成jar包、转换成exe文件二(补充) 如果你想在cmd命令窗口内看到程序运行,即点开弹出运行窗口,关闭时exe自动关闭。 需要再launch4j上进行如下操作: 这样转换好的exe就可以有控制台了…...

【kyuubi k8s】kyuubi发布k8s执行spark sql

背景 依据上一篇kyuubi与spark集成,并发布spark sql到k8s集群,上一篇的将kyuubi和spark环境放在本地某台服务器上的,为了高可用,本篇将其打包镜像,并发布到k8s。 其实就是将本地的kyuubi,spark&#xff0…...

机械装配革新者:3D工艺大师智慧赋能,装配无忧

机械装配,简而言之,就是将各个零件和部件按照严格的技术要求组装起来,使之成为完整且符合标准的机械产品。这一过程不仅要求技术操作的精确性,更强调每个零件之间的完美配合,以确保产品的最终质量和性能达到最优。 常规…...

【C++】const和函数参数

一、const 在 C 中,const 关键字用于定义常量。将 const 关键字放在指针的不同位置,其含义也不同。 1、指向常量的指针 const int* ptr; ptr 是一个指向 const int 的指针,ptr 所指向的值不能通过 ptr 修改,但指针本身可以改变…...

2024zjb

单选331/600 下列不属于常用反爬虫手段动是() A访问频度 B验证码校验 C账号权限 D人工筛 题目答案 正确答案:D 330/600 下列不属于聚焦网络爬虫动常用策略动是 A基于深度优先动爬取策略 B基于内容评价动爬取策略 C基于链接结构评价动爬取策略 D基于语境图动爬取策略 题目答案…...

线程池的艺术:深度解析Java多线程并发性能的优化之道

1. 引言 在高并发的Java应用开发中,线程池作为管理和复用线程资源的核心机制,扮演着举足轻重的角色。合理、高效地使用线程池不仅能减少资源消耗、提高系统响应速度,还能有效控制并发线程数量,保证系统的稳定性和性能。 2. 线程池的基本概念与优势 线程池是一种管理和复用…...

Ubuntu server 24 (Linux) 新增磁盘 lvm 动态扩容磁盘空间

1 新增一块硬盘 #查看 sudo fdisk -l #重新分区,转换成lvm类型 sudo fdisk /dev/sdb 2 查看磁盘 df -h3 lvm 配置 #查看lvm逻辑卷 sudo lvdisplay #创建物理卷 sudo pvcreate /dev/sdb1 #扩展卷组 sudo vgextend ubuntu-vg /dev/sdb1 #扩展逻辑卷 sudo lvexte…...

Linux C编译器从零开发三

AST语法树 BNF抽象 expr equality equality relational ("" relational | "!" relational)* relational add ("<" add | "<" add | ">" add | ">" add)* add mul ("" …...

02-ES6新语法

1. ES6 Proxy与Reflect 1.1 概述 Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。 Proxy 可以对目标对象的读取、函数调用等操作进行拦截&#xff0c;然后进行操作处理。它不直接操作对象&#xff0c;而是像代理模式&#xff0c;通过对象的代理对象进行操作&#xff0c;…...

Vue3中VueRouter基本用法及与Vue2中路由使用差异解析

Vue Router 在 Vue3 中被重写&#xff0c;使用了 Vue3 的 Composition API。使用上跟Vue2 相比有些不同&#xff0c;需要注意。 首先&#xff0c;让我们来看一下 Vue3 中 VueRouter 的基本使用方法&#xff1a; 安装 Vue Router&#xff1a; npm install vue-routernext创建…...

10.Docker Compose容器编排

文章目录 Compose简介安装和卸载步骤核心概念compose文件两要素 使用步骤Compose常用命令微服务测试本地编码打包编写Dockerfile文件构建镜像 不使用Compose调试使用Compose调试WordPress测试验证增量更新 Compose简介 ​ docker建议我们每一个容器中只运行一个服务,因为docke…...

【算法——动态规划(从dfs回溯开始推导dp)】

基础理论 递归&#xff1a; 递&#xff1a;大问题分解子问题的过程 &#xff1b; 归&#xff1a;产生答案 dp&#xff1a;只进行归&#xff1b;用已知的最底层的&#xff08;递归的边界&#xff0c;搜索树的底&#xff09;&#xff0c;推出未知 《视频索引》 一句话&…...

不是所有洗碗机都能空气除菌 友嘉灵晶空气除菌洗碗机评测

精致的三餐让你以为生活是“享受”&#xff0c;可饭后那些油腻的锅碗瓢盆却成了你我美好生活的最大障碍。想要只吃美食不洗碗&#xff0c;那一台优秀的洗碗机就必不可少了&#xff01;今天&#xff0c;ZOL中关村在线要评测的就是这样一台不光洗得干净更能有效除菌抑菌的洗碗机—…...

【Linux】如何创建yum 组(yum groups)

如何创建yum 组(yum groups) 在 yum 中创建组信息需要手动编辑并创建一个组文件&#xff0c;然后使用 createrepo 工具生成组信息。以下是一个详细的步骤指南&#xff1a; 1. 创建组信息文件 首先&#xff0c;创建一个 XML 文件来定义组信息。例如&#xff0c;创建一个名为 …...

Linux ssh远程关闭如何保持进程在后台运行的解决方案

问题描述&#xff1a; Unix/Linux下一般想让某个程序在后台运行&#xff0c;很多都是使用 nohup & 在程序结尾让程序自动运行。 使用SSH远程Linux服务器启动应用&#xff0c;都是使用nohup &命令&#xff0c;结果关闭SSH应用仍然挂断了。 我们很多程序并不象mysqld一…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...