从像素开始：计算机图形中的图像世界

最新推荐文章于 2025-06-27 14:43:51 发布

原创最新推荐文章于 2025-06-27 14:43:51 发布 · 944 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#计算机视觉 #视觉检测

计算机视觉专栏收录该内容

1 篇文章

订阅专栏

前言

计算机图像是我们日常生活中不可或缺的一部分，从手机照片到网页设计，无处不在。本文将详细介绍计算机图像的基本概念、组成、常见格式以及处理方法。

一、什么是计算机图像？

计算机图像，顾名思义，就是用计算机方法创建、处理和显示的图像。简单来说，计算机图像是一种以数字形式存在的图像，是现实世界或虚拟世界在计算机中的视觉表示。

计算机图像通常分为两大类：
1、位图图像（Bitmap）：由像素（Pixels）组成的图像，每个像素具有特定的颜色和位置。常见的照片和扫描图像都属于位图图像。

2、矢量图像（Vector Graphics）：使用数学公式描述的图像，由点、线、曲线和多边形等基本图形构成，具有无损缩放的特点，常用于图标和插图设计。

位图图像（Bitmap）
在这里插入图片描述

放大后的效果：会变模糊、出现锯齿（马赛克）
原因：位图是由像素组成的，放大时只是把每个像素“拉伸”，并不会生成新的图像细节。

矢量图像（Vector）
在这里插入图片描述

放大后的效果：依然清晰、边缘平滑
原因：矢量图是用数学公式来描述图形，例如圆是通过“中心点 + 半径”来绘制的。放大时重新计算公式，画出来的是等比例的新图。

需求	使用位图图像（Bitmap）	使用矢量图像（Vector）
照片或复杂图像	✔️ 适合处理细节丰富、颜色渐变复杂的图像	❌ 不适合，难以表达复杂的细节和渐变
Logo、图标、插图	❌ 不适合，放大会失真	✔️ 适合，能够无损缩放和保持清晰
高分辨率图像	✔️ 适合，能够保留高细节和色彩信息	❌ 不适合，无法像位图一样表现复杂的细节和纹理
需要缩放的设计	❌ 缩放会导致失真和模糊	✔️ 适合，缩放时不会影响图像质量
动效或交互性	❌ 不支持动效和互动，适合静态图像	✔️ 适合，矢量图可以做动画并保持质量
文件体积较小的设计	❌ 文件体积通常较大，特别是高分辨率的图像	✔️ 文件体积小，尤其是简单图形或图标

二、像素与颜色模型

1、什么是像素（Pixel）？

像素（Pixel）是构成数字图像的最小单位。可以把一张图片想象成一个由无数个小点组成的网格，每个点都有自己的一组颜色信息，这个“点”就是像素。

每个像素记录的信息量，决定了图像的细腻程度。

图像的分辨率（如 1920x1080）其实就是宽×高的像素数目，表示总共有多少个像素点构成。

一张 1920x1080 的图像，总共含有 2,073,600 个像素。
请添加图片描述
但是如果你把它放大到单个像素级别，你会看到一个个小方块，每个小方块有一个颜色。这一个个小方块就是像素。每个像素都有它的“颜色信息”，这个信息通常由一个颜色模型来表达。
在这里插入图片描述

2、颜色模型（Color Model）是什么？

颜色模型是用于描述和表示颜色的数学模型，它为计算机图像、图形和显示设备提供了一种标准化的方式来定义和处理颜色。不同的颜色模型适用于不同的应用场景。

我们通常经常接触到的以下两种颜色模型

一、RGB（红绿蓝）颜色模型

RGB 颜色模型是基于光的加色原理，它通过 红色（R）、绿色（G）和蓝色（B） 三种颜色的组合来创建所有其他颜色。每种颜色通常由三个通道表示，每个通道的取值范围通常是 0 到 255（即 8 位深度），或者 0 到 1（浮动值）。通过调节三个通道的值，可以混合出不同的颜色。

主要特点：
加色模型：红、绿、蓝光的混合产生更多的颜色。
适用设备：主要用于显示设备（如显示器、电视、投影仪等），因为这些设备通过红、绿、蓝的光混合来展示颜色。
范围：每个通道的值通常为 0 到 255，表示一个颜色的强度（例如 (255, 0, 0) 表示纯红色，(0, 255, 0) 表示纯绿色）。
色彩空间：常见的 RGB 色彩空间包括 sRGB、Adobe RGB 和 DCI-P3。
应用：计算机图形、网页设计、数字图像处理、电视和显示器等。

二、3. YUV 颜色模型

YUV 颜色模型将颜色信息分为**亮度（Y）和色度（U 和 V）**成分。Y 表示图像的亮度或灰度，而 U 和 V 分别表示色度信息，通常称为色差。YUV 常用于视频编码和视频处理，因为它能够将亮度和色度信息分开，这对视频压缩非常有利。

主要特点：
亮度-色度分离：亮度和色度的分离使得对图像进行压缩和传输时，能够更高效地处理图像数据。
适用领域：主要用于视频编码和广播电视（如 PAL 和 NTSC 标准）、视频压缩（如 H.264、VP9）等。
范围：Y 通常是 0 到 255，表示亮度信息，而 U 和 V 通常是 -128 到 127，用于表示色度信息。
应用：视频流处理、视频编码和压缩、广播电视等领域。

颜色模型描述了如何通过数值来表示颜色，但它们并没有明确规定这些颜色能够覆盖的范围。

三、什么是色域和色彩空间？

1. 色彩空间

定义：色彩空间是一种数学模型，用于用数字来表示颜色。它规定了颜色的表达方式以及各颜色成分的数值范围。例如，RGB 颜色空间规定了颜色是由红（R）、绿（G）、蓝（B）三个通道组成，每个通道的数值范围通常是 0 到 255 或 0 到 1。
作用：色彩空间为颜色的表示、存储、传输和转换提供了基础。常见的色彩空间包括 sRGB、Adobe RGB等。每个颜色空间都有自己独特的坐标系统和标准。

2. 色域

定义：色域是指在特定的颜色空间或设备中，能够显示或再现的所有颜色的范围。简单来说，色域描述了设备或颜色空间所能涵盖的颜色区域。
表现形式：色域通常用二维图形（如 CIE 1931 色度图）来表示，在图中显示出该设备或颜色空间所能产生的所有颜色点。例如，一个显示器的色域可能用一个封闭的区域来表示，这个区域内的颜色都是该显示器能够显示的。

色域的范围越广，表示该设备或颜色模型能够显示的颜色种类越多。通常，色域是通过一个二维或三维空间来表示的，其中每个点代表一个颜色。我们可以通过色域图（通常是色度图）来可视化该范围。

色域通常可以通过色度图来表示。色度图展示了所有颜色的色相和饱和度信息，通常以 CIE 1931 色度图为标准。这个图表上，所有的颜色都可以通过 X 和 Y 坐标来表示，坐标中的区域就代表了色域范围。

CIE 1931 色度图

常见色域
以下是一些常见的色域及其适用范围：

sRGB：标准红绿蓝（Standard Red Green Blue），是互联网上使用最广泛的色域，几乎所有的显示器和浏览器默认使用 sRGB 色域。它适用于大多数普通显示设备。

Adobe RGB：由 Adobe 公司开发的色域，旨在提供更广的绿色和红色显示范围。Adobe RGB 色域广泛应用于专业图像编辑和印刷领域，因为它比 sRGB 能够呈现更多的颜色。
在这里插入图片描述

可以看到上图 不同的颜色空间具有不同的色域，
例如，sRGB 色域的范围较小，而 Adobe RGB色域范围较广。这意味着，Adobe RGB可以显示更多的颜色，尤其是在绿色和红色的区域。

四、图像的分辨率

一、图像分辨率的定义

图像分辨率（Image Resolution）是指一张图像在水平和垂直方向上所包含的像素数量，通常表示为：
> 宽 × 高（如 1920 × 1080）
它代表的是图像的细腻程度，也决定了图像在不同设备上的清晰度。

二、图像分辨率与 DPI/PPI 的关系

DPI/PPI 是图像与屏幕的桥梁：
DPI（Dots Per Inch） / PPI（Pixels Per Inch）
描述每英寸显示多少个像素点
直接影响图像显示在屏幕上的物理大小

举个例子：
一张图是 300x300 像素，在 300 PPI 的设备上显示时，就占 1 英寸 × 1 英寸
换到 150 PPI 的设备，就变成了 2 英寸 × 2 英寸（看起来更大、更糊）

三、图像分辨率对开发的影响

内存占用
分辨率越高，占用内存越大

例如，一张 4000×2000 的 RGB 图像（不压缩）：
4000 × 2000 × 3 bytes = 24 MB

渲染性能
高分图像渲染更耗 GPU，容易掉帧，特别是在动画、滤镜、多图滑动场景
加载速度
图越大，加载时间越长
必须考虑“缩略图 + 原图”策略或 Glide 的尺寸占位加载

虽然图像分辨率描述了图片在像素维度上的“大小”，但这只是图像的一个方面。真正决定一张图片体积大小、是否支持透明、是否损失质量的，是它的存储格式。

就像我们拿到两张同样分辨率（比如 1920×1080）的图片，一张可能只有 150KB，另一张却有 2MB，那它们的图像格式肯定不同。

五、常见图像格式

不同的图像格式在性能、质量和存储上的差异

1. JPEG / JPG

压缩类型：有损压缩
透明通道：不支持
动画：不支持
色彩深度：24 位（RGB）
文件体积：较小
适用场景：照片、壁纸、社交图像、商品图等
压缩原理：
基于 DCT（离散余弦变换），将图像从空间域转换为频率域。
丢弃高频信息（人眼不敏感的细节），进行量化压缩。
越高压缩率，失真越明显（马赛克感、边缘模糊）。

2. PNG

压缩类型：无损压缩
透明通道：支持（8-bit alpha）
动画：不支持（APNG 才支持）
色彩深度：24 位（RGB）或 32 位（含 Alpha）
文件体积：较大
适用场景：UI图标、Logo、透明背景、截图等
压缩原理：
使用 DEFLATE 算法（ZIP的无损压缩），保留所有图像细节。
支持像素级透明度控制，适合图形界面。

3. WebP

压缩类型：支持有损 & 无损
透明通道：支持（WebP Alpha）
动画：支持（Animated WebP）
色彩深度：最大 24 位 + Alpha
适用场景：现代 Web 图像、移动 App 图片优化
压缩原理：
1.有损模式：基于 VP8 视频编码（块+预测+变换+量化）；
2.无损模式：基于预测编码 + 色彩变换 + 哈夫曼编码，压缩强度高；
3.动画通过帧封装，支持多图合成。

4. SVG

压缩类型：不适用（矢量图）
透明通道：支持
动画：可通过 CSS/JS 实现
色彩深度：矢量定义，无固定位深
适用场景：图标、插图、响应式图像
压缩原理：
1.本质是 XML 文本，描述线条、颜色、路径。
2.天然无损，不随缩放失真。

格式	压缩类型	是否支持透明	是否支持动画	色彩支持	特点和用途
JPEG (.jpg)	有损	❌	❌	24位真彩色	适合照片、网页图，体积小，画质可接受，不支持透明和动画
PNG (.png)	无损	✅	❌	24位 + Alpha	支持透明，适合图标、界面UI，压缩不如JPEG小，但图像更清晰
WebP (.webp)	有损 / 无损	✅	✅	最多支持 24位 + Alpha	Google 推出，适合替代 JPG/PNG/GIF，现代浏览器和平台支持好
SVG (.svg)	矢量图	✅	❌	与设备相关	XML格式，支持无限缩放，适合图标、图形，Web 和 App 中常用

六、图像处理与应用

图像处理涉及对图像的修改、增强和转换，以满足各种需求。随着计算机技术和人工智能的发展，图像处理技术不断创新，已广泛应用于多个领域，如医疗、娱乐、安防、艺术创作等。以下是几种常见的图像处理技术及其应用：

1. 图像增强

图像增强是指通过对图像进行处理，使其在视觉上更加清晰、对比度更高，或者更符合人类的视觉习惯。常见的图像增强技术包括：
亮度调整：改变图像的整体亮度，使其更明亮或更暗。
对比度增强：增强图像的对比度，使得细节更加突出。
滤波处理：应用模糊或锐化滤镜，增强图像的边缘，去除噪声。
应用：常见于照片美化、软件PQ

2. 图像分割

图像分割是将图像划分成多个区域或对象，通常用于提取图像中的重要部分。分割可以基于颜色、纹理或形状等特征。
边缘检测：通过算法检测图像中的边缘，进而分离不同区域。
区域生长：从一个种子区域开始，根据相似性将图像区域扩展。
应用：常见于人脸识别、目标检测、医疗影像分析（如肿瘤区域识别）等。

3. 图像恢复与修复

图像恢复与修复技术用于修复受损或丢失部分的图像信息。例如，去除图像中的噪声、修复模糊部分或填补缺失区域。
去噪处理：通过滤波器去除图像中的噪声。
去模糊处理：用算法恢复模糊图像中的细节。
应用：常见于老照片修复、卫星图像修复等。

4. 图像识别与分析

图像识别技术用于从图像中识别出具体的对象、场景或信息。它基于机器学习、深度学习等技术来进行图像内容的分析。
人脸识别：通过图像中的面部特征来识别身份。
物体识别：识别图像中包含的物体，如车辆、动物等。
文字识别（OCR）：将图像中的文字转化为可编辑文本。
应用：广泛应用于安防监控、自动驾驶、医疗影像分析（如癌症筛查）等领域。

5. 图像压缩

图像压缩是减少图像数据存储空间的一种技术。它通过去除冗余数据来压缩文件大小，同时尽量保留图像的视觉质量。
有损压缩（如 JPEG）：压缩过程中会丢失一部分细节，但文件大小较小。
无损压缩（如 PNG）：压缩过程中不会丢失任何图像数据，适用于需要保留完整质量的场景。
应用：广泛用于图片存储、网页加载优化等。