2、图片资源基础：位图与矢量图、色彩深度与通道、分辨率与DPI、常见图片格式对比

做GUI设计，图片资源是绕不开的坎。我见过太多开发同学，一张图拖进去就完事，结果包体积暴涨、界面模糊、加载卡顿。说白了，图片压缩不是后期调个参数那么简单，你得先搞懂图片的底层逻辑。

这一节，我把图片资源的基础知识拆成四个块：位图与矢量图的本质区别、色彩深度和通道到底在描述什么、分辨率和DPI的真实含义、以及常见格式的选型对比。嗯，都是干货，咱们一个一个来。

2.1 位图与矢量图：两种完全不同的世界观

先问个问题：为什么有些图片放大就糊，有些怎么放大都清晰？

答案就在它们的数学描述方式上。

位图（Bitmap / Raster），说白了就是用一个个像素点来描述图像。每个像素记录颜色值，所有像素拼在一起就成了一幅图。你想想看，一张1920×1080的图片，就是207万个像素点。放大到200%，每个像素被拉大成4个像素，边缘自然就锯齿了。

矢量图（Vector），则是用数学公式来描述图形——点、线、曲线、填充色。放大多少倍，公式重新计算一遍，边缘永远光滑。SVG、PDF、AI、EPS都是矢量格式。

但矢量图不是万能的。照片、渐变复杂的纹理、真实世界的图像，用矢量描述会变成天文数字的计算量。这时候位图才是正解。

2.2 色彩深度与通道：颜色是怎么被数字描述的？

色彩深度（Color Depth / Bit Depth），指的是每个像素用多少位（bit）来表示颜色。位数越多，能表达的颜色种类就越多。

• 1位： 只有黑白两色。早期单色屏幕用的就是它。
• 8位： 256种颜色。GIF格式就是这个级别。
• 16位： 65536种颜色。早期手机屏幕常见。
• 24位： 约1677万色。也就是我们常说的"真彩色"，每个通道8位（R、G、B各256级）。
• 32位： 24位颜色 + 8位Alpha通道（透明度）。PNG和WebP常用。

通道（Channel）这个概念，其实就是把颜色拆成独立的分量。RGB三个通道分别控制红、绿、蓝的亮度。Alpha通道单独控制透明度。

为什么会这样？因为人眼对颜色细节的敏感度其实有限。你想想看，一张纯色背景的截图，用24位和16位存，肉眼根本看不出区别，但文件大小能差一半。

2.3 分辨率与DPI：这两个概念别搞混了

很多人把分辨率和DPI混为一谈，其实它们说的是两件事。

分辨率（Resolution），指的是图片的像素尺寸，比如1920×1080。它决定了图片有多少个像素点。

DPI（Dots Per Inch，每英寸点数），指的是输出设备上每英寸能显示多少个点。它决定了图片在物理世界中的大小。

举个例子：一张100×100像素的图片，在72 DPI的屏幕上显示，物理尺寸大约是1.39英寸。在300 DPI的打印机上输出，物理尺寸只有0.33英寸。像素没变，但物理大小变了。

嗯，这里要注意：压缩图片时，不要盲目降低分辨率。如果你需要保留细节（比如产品图），降分辨率会直接损失画质。但如果你只是做缩略图或列表图，分辨率可以降到合理范围——我一般控制在宽度不超过屏幕物理像素的2倍。

2.4 常见图片格式对比：选对格式，压缩就成功了一半

格式选错了，后面再怎么压缩都是事倍功半。我整理了一张对比表，你直接收藏就行。

选格式的核心原则其实就三条：

1. 需要透明背景？ → PNG-8（256色够用）或 PNG-32 / WebP（全彩）
2. 不需要透明，且是照片/渐变？ → JPEG 或 WebP（有损模式）
3. 图形简单（图标、Logo）？ → SVG 优先，其次 PNG-8

下面这张图，我把整个知识体系串起来了，方便你对照理解。