图像基础知识
🎨 图像基础知识与存储计算全解析
本文系统讲解图像的像素、分辨率、位深度、颜色模型、文件格式与存储大小计算。
适合程序员、设计师、图像工程师全面理解数字图像的核心概念。
📖 目录导航
- 🧩 一、像素、分辨率与位深度总览
- 🧭 二、水平分辨率与垂直分辨率（重点）
- 🧮 三、存储大小计算公式（复习）
- 🎨 四、位深度（色深）详解
- 💾 五、文件压缩与格式
- 🧠 六、总体知识图谱（文本版）
- 🌈 七、颜色模型（Color Models）
- 🖼️ 八、其他图片格式扩展
- 🧭 九、核心知识总结
🧩 一、像素、分辨率与位深度总览
| 概念 | 含义 | 举例 |
|---|---|---|
| 像素（Pixel） | 构成图像的最小单元，每个像素存储一个颜色值 | 1651×1203 像素，共 1,986,453 像素点 |
| 位深度（Bit Depth） | 每个像素用于表示颜色的位数（位越多，色彩越丰富） | RGB = 24位，RGBA = 32位 |
| 图像分辨率（Image Resolution） | 图像的像素尺寸（宽×高） | 1920×1080 |
| 打印/显示分辨率（DPI/PPI） | 每英寸的像素数量（Dots/Pixels Per Inch） | 300 PPI、96 PPI |
🧭 二、水平分辨率与垂直分辨率（重点）
1️⃣ 含义
| 名称 | 英文 | 定义 | 单位 |
|---|---|---|---|
| 水平分辨率 | Horizontal Resolution | 每英寸的水平像素点数量 | DPI 或 PPI |
| 垂直分辨率 | Vertical Resolution | 每英寸的垂直像素点数量 | DPI 或 PPI |
📌 两者共同决定图像在物理世界中的像素密度和打印/显示清晰度。
2️⃣ 举例说明
| 参数 | 数值 |
|---|---|
| 像素尺寸 | 1651 × 1203 |
| 水平分辨率 | 300 DPI |
| 垂直分辨率 | 300 DPI |
| 方向 | 计算 | 结果（英寸） | 结果（厘米） |
|---|---|---|---|
| 水平 | 1651 ÷ 300 | 5.50 in | ≈ 13.97 cm |
| 垂直 | 1203 ÷ 300 | 4.01 in | ≈ 10.19 cm |
📏 物理尺寸 = 像素数 ÷ 分辨率（每英寸像素数）
3️⃣ 当两者不同的情况
| 水平分辨率 | 垂直分辨率 | 结果 |
|---|---|---|
| 96 DPI | 96 DPI | 标准显示比例 |
| 300 DPI | 150 DPI | 打印时图像会被“拉伸”或变形 |
| 600 DPI | 600 DPI | 高精度打印输出 |
✅ 正常图像应保持水平、垂直分辨率一致，否则比例会失真。
🧮 三、存储大小计算公式（复习）
文件大小（字节）=宽像素×高像素×位深度8\text{文件大小（字节）} = \text{宽像素} × \text{高像素} × \frac{\text{位深度}}{8} 文件大小（字节）=宽像素×高像素×8位深度
示例：
RGB 图（24位）分辨率 1651×1203：
1651×1203×3=5,959,359字节≈5.68MB1651×1203×3 = 5,959,359\text{ 字节} ≈ 5.68 MB 1651×1203×3=5,959,359 字节≈5.68MB
🎨 四、位深度（色深）详解
| 位深度 | 颜色通道 | 可表示颜色数 | 示例用途 |
|---|---|---|---|
| 1 bit | 黑白 | 2 | 扫描文档 |
| 8 bit | 灰度 | 256 | 灰度图像 |
| 24 bit | RGB(8+8+8) | 16,777,216 | 真彩色图片 |
| 32 bit | RGBA | 16,777,216 + 透明度 | 图形/UI设计 |
💾 五、文件压缩与格式
| 格式 | 压缩 | 是否无损 | 支持透明度 | 特点 |
|---|---|---|---|---|
| BMP | ❌ 无 | ❌ | ❌ | 原始像素，文件大 |
| PNG | ✅ 无损 | ✅ | ✅ | 适合图标、界面 |
| JPEG | ✅ 有损 | ❌ | ❌ | 适合照片 |
| GIF | ✅ 无损（索引色） | ✅ | ✅（简单透明） | 动图 |
| TIFF | ✅ 可选压缩 | ✅ | ✅ | 专业印刷 |
| RAW | ❌ 无 | ✅ | ✅ | 摄影底片数据 |
🧠 六、总体知识图谱（文本版）
图像数据
│
├─ 像素（Pixel）
│ └─ 数量 = 宽 × 高
│
├─ 位深度（Bit Depth）
│ └─ 每像素颜色信息位数（1/8/24/32）
│
├─ 分辨率（Resolution）
│ ├─ 图像分辨率（像素尺寸）
│ ├─ 打印分辨率（DPI/PPI）
│ ├─ 水平分辨率（Horizontal DPI）
│ └─ 垂直分辨率（Vertical DPI）
│
└─ 文件大小（Size）├─ = 宽 × 高 × (位深度 / 8)├─ 转换：Byte → KB → MB└─ 实际文件大小取决于压缩格式
🌈 七、颜色模型（Color Models）
| 模型名称 | 英文全称 | 组成 | 适用场景 | 特点 |
|---|---|---|---|---|
| RGB | Red, Green, Blue | 红绿蓝三通道 | 显示设备 | 加色模型，越高越亮 |
| RGBA | Red, Green, Blue, Alpha | RGB + 透明度 | UI、网页图像 | 透明度控制图层混合 |
| HSV | Hue, Saturation, Value | 色相、饱和度、明度 | 调色、图像分析 | 符合人眼感知 |
| HSL | Hue, Saturation, Lightness | 色相、饱和度、亮度 | 前端、设计软件 | 与 HSV 类似 |
| CMYK | Cyan, Magenta, Yellow, Key | 青、品红、黄、黑 | 打印领域 | 减色模型，越高越暗 |
| Lab | Lightness, a, b | 亮度 + 色度 | 专业色彩管理 | 与设备无关 |
🧭 颜色模型转换关系图
💡 常见图像处理库（如 OpenCV、Pillow、PS）都支持这些模型互转。
🖼️ 八、其他图片格式扩展
| 格式 | 含义 | 特点 | 优势 | 劣势 |
|---|---|---|---|---|
| RAW | 摄影原始数据 | 无压缩 | 保留全部细节 | 文件大，不通用 |
| SVG | 矢量图形格式 | 基于XML | 可无限放大 | 不适合照片 |
| HEIF / HEIC | 高效图像格式（Apple） | 高压缩 | 画质优于JPEG | 兼容性差 |
| Thumbnail | 缩略图 | 小尺寸预览 | 加载快 | 分辨率低 |
| PSD | Photoshop 文件 | 支持图层 | 适合编辑 | 文件大 |
| JFIF | JPEG 交换格式 | 标准化 | 兼容好 | 已被JPEG整合 |
| AVIF | AV1 图像格式 | 新一代高压缩 | 同体积质量更高 | 解码慢 |
| JXL (JPEG XL) | JPEG 扩展版 | 兼容旧JPEG | 压缩高效 | 浏览器支持少 |
🗂️ 图像格式家族树
🧭 九、核心知识总结
| 类别 | 关键要素 | 说明 |
|---|---|---|
| 像素 | 宽 × 高 | 图像最小构成单元 |
| 位深度 | 每像素颜色位数 | 决定颜色数量与平滑度 |
| 分辨率 | DPI / PPI | 决定显示与打印清晰度 |
| 颜色模型 | RGB / CMYK / HSV 等 | 决定颜色表达方式 |
| 文件格式 | PNG / JPEG / RAW / SVG 等 | 决定压缩与用途 |
✅ 一句话总结
🌈 RGB 负责显示，CMYK 负责打印，HSV 负责调色，Lab 负责科学；
RAW 最真实，JPEG 最通用，PNG 最干净，SVG 最自由。
像素决定图像中有多少细节，
水平/垂直分辨率决定这些像素在现实空间的密度，
位深度决定每个像素能表达多少颜色，
三者共同决定了图像的质量、清晰度与文件大小。