理解“图片是怎么存储的”，其实就是理解：
一张你看到的“图像”，在计算机内部到底是什么样的数据。
我们来分三个层次讲清楚：
- 💡 概念层（图像是什么）
- 🔢 数据层（计算机怎么存储像素）
- 📦 文件层（JPG/PNG/WebP 是怎么组织这些数据的）
🧩 一、概念层：图像本质是「像素矩阵」
计算机中的图片 ≠ 摄影 ≠ 光学图像
而是一个 像素点（Pixel）组成的二维矩阵。
例如，一张 3×2 的图像：
[(255,0,0), (0,255,0), (0,0,255)] [(255,255,0), (0,255,255), (255,0,255)] 每个括号是一个像素的颜色值（RGB 三通道）。
👉 所以：
- 图像 = 像素数组
- 每个像素 = 多个颜色通道（通常 3 或 4 个）
🎨 二、数据层：像素是怎么存进文件的
计算机不能直接“看图”，它只理解二进制（0 和 1）。
每个像素的每个颜色通道，通常用 8 位（1 字节） 表示。
RGB 三通道就占用 3 字节。
所以，当下次在Photoshop里取色，看到 #FF0000（这是十六进制表示的255,0,0）时，你就知道，它背后对应的正是内存中连续的3个字节：11111111 00000000 00000000。这就是计算机理解“红色”的方式。
例：一张 1920×1080 的 RGB 图片
像素数量 = 1920 × 1080 = 2,073,600
每个像素 3 字节 →
📦 原始数据量 ≈ 6,220,800 字节 ≈ 6 MB
这叫“位图（Bitmap）”或 原始图像（Raw Image）。
这类图片文件非常大，所以我们需要压缩格式。
📦 三、文件层：图像格式怎么组织这些数据
为了节省空间、携带信息（分辨率、颜色模式等），
不同的图片格式会用不同的方式“打包”像素数据。
1️⃣ BMP（位图）——最原始的存储方式
结构：
Header（文件头） → 像素数组
- 没有压缩；
- 按行、列顺序存 RGB 值；
- 文件非常大。
例：Windows 系统自带 .bmp 图片。
2️⃣ PNG（无损压缩格式）
结构：
Header → 块结构（Chunks） → IDAT 数据（像素）
- 使用 DEFLATE 算法（类似 ZIP）压缩；
- 保留全部像素信息；
- 支持透明通道（RGBA）；
- 适合图标、UI。
3️⃣ JPG（有损压缩格式）
结构：
Header → 压缩块（8×8 DCT 块） → Huffman 编码流
- 使用 DCT 变换和量化去掉细节；
- 压缩率高；
- 不支持透明；
- 常用于照片。
4️⃣ WebP（现代压缩格式）
结构：
RIFF Header → VP8/VP8L 编码数据块
- 有损/无损兼容；
- 压缩率高；
- 支持透明和动画；
- 本质是“用视频帧压缩一张图”。
5️⃣ RAW（原始传感器数据）
来自相机传感器，未处理、未压缩。
每个像素存储光信号原始强度（非 RGB），
需要解码成彩色图像才能显示。
→ 适合摄影后期，不适合直接展示。
⚙️ 四、颜色是怎么存储的？
每个像素由多个**通道（channel）**组成：
| 模式 | 通道 | 每通道位数 | 每像素字节 | 说明 |
|---|---|---|---|---|
| 灰度 | 1 | 8 | 1 | 黑白图 |
| RGB | 3 | 8 | 3 | 彩色图 |
| RGBA | 4 | 8 | 4 | 含透明度 |
| CMYK | 4 | 8 | 4 | 印刷用色 |
RGB 是显示设备标准，
CMYK 是印刷设备标准。
🧠 五、加载显示时发生了什么？
当你在浏览器打开一张图：
- 浏览器解码文件（JPG → 像素矩阵）
- 将像素送入显卡（GPU）
- GPU 按分辨率在屏幕上绘制每个像素
- 屏幕刷新显示（一般 60Hz）
所以浏览器看到的图像，
其实是显卡实时绘制“像素矩阵”的结果。
🔍 六、总结一下
| 层级 | 含义 | 示例 |
|---|---|---|
| 概念层 | 图像是像素矩阵 | 每个像素有颜色值 |
| 数据层 | 像素以二进制方式存储 | RGB 每个通道 8bit |
| 文件层 | 格式定义了如何压缩与组织 | JPG、PNG、WebP 等 |
✅ 一句话总结：
图片在计算机中本质是一个二维像素数组，
每个像素由若干字节描述颜色，
文件格式决定了这些像素的存储顺序、压缩算法与附加信息结构。
🧩 七、什么是图片压缩？
图片压缩（Image Compression）
“图片压缩的原理”是计算机图像处理中最核心的知识之一。
下面我会用通俗又深入的方式帮你理解图片压缩的本质、类型、过程与原理机制。
指的是通过算法减少图像文件占用的存储空间，而尽量不损失或少损失人眼可感知的画面质量。
👉 简单说：
压缩就是“用更少的数据去描述看起来差不多的画面”。
🧠 八、两种类型：无损压缩 vs 有损压缩
| 类型 | 是否丢失信息 | 常见格式 | 特点 |
|---|---|---|---|
| 无损压缩 | 不丢失像素信息，可还原 | PNG、GIF、WebP(lossless) | 精确还原像素，压缩率有限 |
| 有损压缩 | 丢失部分视觉无关信息 | JPG、WebP(lossy)、HEIC | 人眼看不出区别但体积大幅减小 |
🧮 九、压缩的基本思想
所有压缩算法都基于以下三个核心原理：
1. 去冗余（Redundancy Reduction）
图像中有大量重复信息：
- 相邻像素颜色几乎相同；
- 图案或背景重复；
- 人眼对细节不敏感。
压缩算法会识别这些规律，只记录变化的部分或模式本身。
2. 变换编码（Transform Coding）
把图像从“像素空间”转换到“频率空间”表示。
- 高频部分：图像细节、噪点；
- 低频部分：整体亮度、颜色块。
算法（如 DCT、Wavelet）会丢弃高频部分来节省空间。
就像音乐压缩 MP3 一样，去掉人耳听不出的高音细节。
3. 熵编码（Entropy Coding）
把频繁出现的数据用更短的编码表示，减少比特数。
常用算法：
- Huffman 编码
- 算术编码（Arithmetic Coding）
这一步是纯数学压缩，不改变图像内容。
🧩 十、以 JPG 为例：压缩流程解析
JPG 是有损压缩的典型代表，它的压缩步骤如下：
1️⃣ 色彩空间转换
把 RGB 转成 YCbCr（亮度 + 两个色度通道），
因为人眼对亮度更敏感，对颜色不敏感，方便后续压缩色度。
2️⃣ 下采样（Chroma Subsampling）
色度通道按比例（通常 4:2:0）缩小，节省 50% 以上数据。
3️⃣ 分块（8×8 像素块）
图像被切成许多小块，独立压缩，方便局部处理。
4️⃣ DCT（离散余弦变换）
将每个 8×8 块转换为频率系数矩阵，
左上角代表低频（整体颜色），右下角代表高频（细节）。
5️⃣ 量化（Quantization）
根据质量参数舍弃高频系数（细节），
这是 JPG 有损的关键步骤 —— 视觉几乎无感知，但节省巨大空间。
6️⃣ 熵编码
用 Huffman 编码或算术编码将数据进一步压缩成二进制流。
🌐 十一、不同格式的压缩思路对比
| 格式 | 类型 | 核心算法 | 压缩思路 |
|---|---|---|---|
| JPG | 有损 | DCT + 量化 + Huffman | 去掉细节频率信息 |
| PNG | 无损 | DEFLATE + 滤波 | 预测相邻像素、编码差值 |
| GIF | 无损 | LZW | 适合简单动画、少色图 |
| WebP | 有/无损 | VP8 编解码 | 类似视频帧压缩 |
| HEIC | 有损 | HEVC 视频帧压缩 | 压缩率极高、手机常用 |
👁️ 十二、压缩的本质：利用人眼感知特性
人眼对：
- 亮度变化 敏感；
- 颜色细节 不敏感；
- 小范围噪点 不敏感；
- 边缘锐度 敏感。
压缩算法正是利用这些生理特性来**“聪明地丢弃信息”，
从而达到体积变小、观感几乎不变**的效果。
⚙️ 十三、为什么压得太狠会“糊”？
当量化参数太低（质量过低）时：
- 高频细节（纹理、边缘）被丢太多；
- 色块边缘模糊；
- 产生马赛克、色带等压缩伪影。
👉 所以压缩的关键是：平衡“体积”和“质量”。
✅ 十四、总结一句话：
图片压缩的核心原理是：
利用视觉冗余 + 数学变换 + 统计编码
在人眼“看起来差不多”的前提下，
用更少的比特表示相同画面。