图片资源基础：位图与矢量图区别、常见图片格式、色彩深度与通道概念

做屏幕显示系统这么多年，我见过太多花屏案例了。追根溯源，很多问题都出在图片资源本身。你连图片的“底细”都不清楚，怎么排查花屏？

这一章，咱们就把图片资源的基础打牢。说白了，就是搞清楚三件事：图片是怎么存的、有哪些常见格式、颜色信息是怎么组织的。

位图 vs 矢量图：两种截然不同的世界观

先问个问题：一张照片放大到 800%，为什么会变成马赛克？而一个“A”字放大同样倍数，为什么边缘依然光滑？

这就是位图和矢量图的本质区别。

对比维度	位图（Bitmap）	矢量图（Vector）
存储方式	像素点阵，每个点记录颜色值	数学公式，记录坐标、曲线、填充
放大效果	出现锯齿/马赛克	边缘始终平滑
文件大小	随分辨率增大而暴增	与复杂度相关，与尺寸无关
适用场景	照片、截图、复杂渐变	图标、Logo、字体、插画
常见格式	PNG、JPG、BMP、WebP	SVG、AI、EPS、PDF

我个人习惯是：UI 图标用 SVG，背景图用 WebP，截图用 PNG。混着用？我踩过坑——有一次把矢量 Logo 当位图导出，分辨率没设对，在大屏上糊成一团。

常见图片格式：选对格式，少一半坑

你想想看，一个 App 里可能同时出现四五种图片格式。每种格式的“脾气”都不一样。我整理了一张表，方便你对照。

格式	压缩方式	透明度	色彩深度	典型用途	花屏风险点
PNG	无损压缩	支持（Alpha通道）	8/24/32位	图标、截图、UI元素	Alpha通道解析错误
JPG	有损压缩	不支持	24位	照片、复杂图像	压缩过度产生色块
BMP	无压缩	有限支持	1/4/8/16/24/32位	老旧系统、原始数据	文件巨大，内存溢出
WebP	有损/无损均可	支持	24/32位	Web、移动端	解码器兼容性

PNG：透明背景的首选

PNG 支持 Alpha 通道，这是它最大的价值。我在项目中遇到过一个问题：一张带透明区域的 PNG 图标，在某个 Android 版本上显示黑色背景。查了半天，是系统解码器把预乘 Alpha 当成了直通 Alpha 处理。

JPG：照片之王，但别碰透明

JPG 用有损压缩，牺牲细节换体积。但注意，它不支持透明度。如果你把带透明区域的图存成 JPG，透明部分会变成白色或黑色——这在深色模式下就是灾难。

BMP：老古董，但有时不得不用

BMP 不压缩，像素数据直接摆在那。做底层驱动调试时，我经常用 BMP 做测试图——因为它“所见即所得”，没有解码干扰。但生产环境？别用。一张 4K 的 BMP 能到 50MB，加载都卡。

WebP：现代选择，但兼容性要留意

WebP 是 Google 推出的格式，压缩率比 PNG 高 26%，比 JPG 高 25-34%。我建议新项目优先用 WebP。但注意，某些老旧系统或浏览器不支持。我在一个嵌入式项目里吃过亏——系统 WebP 解码库有 bug，导致花屏。

色彩深度与通道：像素的颜色到底怎么存的？

花屏的本质，是像素颜色信息被错误解析。要理解这个，得先搞懂色彩深度和通道。

色彩深度：每个像素用多少 bit 表示

色彩深度决定了每个像素能显示多少种颜色。常见的有：

• 1位：黑白两色。老式单色屏用这个。
• 8位：256色。早期游戏机、GIF 格式。
• 16位：65536色。R:5bit + G:6bit + B:5bit。
• 24位：1677万色。R:8bit + G:8bit + B:8bit。真彩色。
• 32位：24位颜色 + 8位 Alpha 通道。

通道：颜色的“图层”

每个像素的颜色由多个通道组成。最常见的 RGB 三通道，加上 Alpha 就是四通道。

通道模式	通道数	说明	典型场景
灰度	1	只有一个亮度通道	黑白打印、老式监控
RGB	3	红、绿、蓝各 8bit	绝大多数屏幕显示
RGBA	4	RGB + Alpha 透明度	UI 图标、叠加层
CMYK	4	青、品、黄、黑	印刷领域

这里有个坑：有些系统用 BGRA 顺序（蓝绿红透明度），而不是标准的 RGBA。如果你按 RGBA 解析 BGRA 数据，颜色就全乱了。我调试过一个花屏问题，最后发现是 GPU 驱动和图片解码库的通道顺序不一致。

知识体系总览

下面这张图，把本章的核心知识点串起来了。你可以把它当作排查花屏问题的“地图”。

小结

这一章的内容，说白了就是三句话：

• 位图是像素的集合，矢量图是数学的描述。屏幕最终只看位图。
• 选对格式，PNG 保透明、JPG 省体积、WebP 是现代选择、BMP 留作调试。
• 色彩深度和通道是花屏的“重灾区”。深度不匹配、通道顺序不对，画面必乱。

嗯，基础打牢了，后面分析花屏案例时，你就能一眼看出问题出在哪个环节。