4、图片资源基础：支持的图片格式（PNG、JPG、BMP）、图片颜色深度（L8、RGB565、RGB888）、图片内存占用计算
做嵌入式GUI，说白了就是跟资源较劲。屏幕就那么大，Flash就那么多，RAM更是抠着用。图片作为最占资源的“大户”，你要是搞不清楚它的底细，后面优化起来会非常痛苦。
我个人习惯，在项目一开始就把图片的“家底”摸清楚。什么格式能用？颜色深度怎么选？一张图到底吃掉多少内存？这些基础问题，今天咱们一次性聊透。
4.1 TouchGFX 支持的图片格式
TouchGFX 不像PC端那么“大度”，它只认三种格式：PNG、JPG 和 BMP。但注意，这里的PNG和JPG跟你在Photoshop里看到的，其实有点不一样。
| 格式 | 特点 | 适用场景 | 我踩过的坑 |
|---|---|---|---|
| PNG | 无损压缩，支持透明通道（Alpha） | 图标、按钮、需要透明效果的UI元素 | 曾经把一张24位PNG直接丢进去，结果透明背景全变白块 |
| JPG | 有损压缩，不支持透明，文件小 | 全屏背景图、照片、渐变色丰富的图片 | 压缩率设太高，屏幕上出现明显的“马赛克” |
| BMP | 无压缩，体积巨大，极少使用 | 几乎不用，除非你内存多到没处花 | 新手时期用过一次，直接把Flash撑爆了 |
核心结论： 项目中90%的图片用PNG，10%的大背景用JPG。BMP？忘掉它吧。
4.2 图片颜色深度：L8、RGB565、RGB888
颜色深度，说白了就是每个像素用多少bit来表示。这个参数直接决定了图片的“颜值”和“饭量”。
TouchGFX里常用的就三种：L8、RGB565、RGB888。我刚开始接触时也搞混过，后来用一张图做了对比测试，才彻底明白。
4.2.1 L8（8位索引色）
每个像素只占1个字节。它不存颜色值，而是存一个“索引号”，然后去一个256色的调色板里查颜色。说白了就是“看图识字”——图本身不存颜色，只存编号。
- 优点： 内存占用极低，只有RGB565的1/2，RGB888的1/3。
- 缺点： 最多256种颜色，渐变色会出现明显的“色块断层”。
- 我建议： 只用于纯色图标、简单线条、文字纹理。别拿它做照片。
4.2.2 RGB565（16位高颜色）
每个像素占2个字节。红色5位、绿色6位、蓝色5位。为什么绿色多1位？因为人眼对绿色最敏感。这是嵌入式GUI的“黄金标准”。
- 优点： 颜色丰富（65536色），内存适中，显示效果接近真彩。
- 缺点： 相比RGB888，纯红色和纯蓝色会有轻微偏差。
- 我建议： 90%的UI图片都用这个。性价比最高。
4.2.3 RGB888（24位真彩色）
每个像素占3个字节。红绿蓝各8位，总共1670万色。这是“顶配”。
- 优点： 颜色最准，没有偏差，适合显示照片级图像。
- 缺点： 内存占用是RGB565的1.5倍，对MCU带宽要求高。
- 我建议： 只有高端MCU（比如带硬件JPEG解码的）才考虑。普通Cortex-M4慎用。
一个小技巧： 如果你不确定选哪个，先全部用RGB565。等硬件调通了，再针对个别大图优化成L8或JPG。别一开始就追求“完美”，嵌入式开发讲究“够用就好”。
4.3 图片内存占用计算
这个计算其实很简单，但很多人会忽略一个关键点：运行时内存 和 存储空间 是两码事。
一张图片在Flash里存的是压缩后的文件大小，但在运行时，它必须被解压到RAM里才能显示。而RAM里占用的，就是 原始像素数据 的大小。
计算公式就一句话：
内存占用（字节） = 宽度（像素） × 高度（像素） × 每像素字节数每像素字节数取决于颜色深度：
- L8： 1 字节/像素
- RGB565： 2 字节/像素
- RGB888： 3 字节/像素
举个例子，一张 480×272 的全屏图片：
| 颜色深度 | 计算公式 | 运行时内存占用 |
|---|---|---|
| L8 | 480 × 272 × 1 | 130,560 字节 ≈ 127.5 KB |
| RGB565 | 480 × 272 × 2 | 261,120 字节 ≈ 255 KB |
| RGB888 | 480 × 272 × 3 | 391,680 字节 ≈ 382.5 KB |
注意： 很多MCU的RAM总共才512KB甚至256KB。你放一张RGB888的全屏图，就吃掉382KB，剩下的空间连跑系统都够呛。我曾经在一个项目里就是因为没算这笔账，导致系统频繁死机——后来发现是内存碎片把堆栈给挤爆了。
4.4 知识体系总览
下面这张图，把今天讲的核心逻辑串起来了。你保存下来，以后选图时对着看就行。
4.5 实战中的避坑指南
讲完理论，说几个我实际踩过的坑，你遇到了能少走弯路。
坑一：PNG透明通道丢失
我曾经把一张24位PNG直接导入TouchGFX，结果透明背景全变成了白色块。后来才发现，TouchGFX的PNG必须使用 32位带Alpha通道 的格式。你在Photoshop导出时，记得勾选“保留透明区域”。
坑二：JPG压缩率过高
为了省Flash空间，我把一张背景图的JPG压缩率调到90%。结果屏幕上全是“马赛克”一样的色块。后来我总结：JPG压缩率控制在 70%-80% 之间，文件大小和画质最平衡。
坑三：RGB565颜色偏差
有一次客户说“这个红色不对，偏紫”。我查了半天，发现是RGB565的红色只有5位，纯红色（255,0,0）被截断成了（248,0,0）。解决方案：要么用RGB888，要么在设计时避开纯色边界值。
嗯，今天就聊这么多。图片资源这块，说白了就是“算清楚账，选对格式”。你只要把颜色深度和内存占用这两个核心点拿捏住，后面做资源优化就会顺手很多。