4. 开发环境与工具链搭建
图像资源是 TouchGFX 项目里最吃内存的环节，没有之一。我见过太多项目，UI 逻辑写得挺漂亮，一跑起来帧率掉到 20fps，查到最后全是图片惹的祸。今天咱们就把这块彻底捋清楚。
核心原则：在保证视觉效果的前提下，让每张图片占用的内存和带宽都降到最低。说白了，就是「够用就好，别浪费」。
4.1 RGB565 vs ARGB8888：选对格式省一半内存
TouchGFX 支持两种主流颜色格式：RGB565 和 ARGB8888。它们的区别，我直接给你列个表：
| 特性 | RGB565 | ARGB8888 |
|---|---|---|
| 每像素位数 | 16 位（2 字节） | 32 位（4 字节） |
| 颜色深度 | 65,536 色 | 16,777,216 色 + 256 级透明度 |
| 透明度支持 | 不支持（或 1 位透明） | 完整 Alpha 通道 |
| 内存占用 | 低（基准） | 高（2 倍于 RGB565） |
| 适用场景 | 图标、按钮、纯色背景 | 照片、渐变、半透明叠加层 |
你想想看，一张 480x272 的全屏图片：
- RGB565：480 × 272 × 2 = 261,120 字节 ≈ 255 KB
- ARGB8888：480 × 272 × 4 = 522,240 字节 ≈ 510 KB
差了一倍。如果你的 MCU 只有 1MB 内部 RAM，光一张全屏 ARGB8888 就吃掉一半。所以我的习惯是：能用 RGB565 的，绝不用 ARGB8888。
我的经验：在项目中，我会把图片分成两类：需要透明效果的（比如异形按钮、弹出层遮罩）用 ARGB8888，其余全部用 RGB565。曾经有个客户非要把所有图标都做成 ARGB8888，我给他算了一笔账：32 个图标，每个 64x64，ARGB8888 要 512KB，换成 RGB565 只要 256KB。他看完就改了。
4.2 图片压缩策略：别让 Flash 成为瓶颈
内存问题解决了，Flash 空间呢？TouchGFX 支持两种内置压缩：L4 和 RLE。我分别说说。
4.2.1 L4 压缩（适合照片、渐变图）
L4 是 4 位索引色压缩，能把每像素从 16 位降到 4 位，压缩比 4:1。说白了，就是给每个 4x4 像素块选 16 种代表色。效果怎么样？
- 照片类图片：几乎看不出区别，压缩率 60%-75%
- 纯色大块：压缩率更高，可能到 80%
- 精细文字或线条：会有轻微锯齿，慎用
4.2.2 RLE 压缩（适合图标、按钮）
RLE（游程编码）对连续相同颜色的区域特别有效。比如一个蓝色按钮，中间全是纯色，RLE 能压缩到原来的 10% 以下。但如果是噪点多的照片，RLE 反而可能变大。
避坑指南：我曾经在一个项目里对所有图片统一用了 L4 压缩，结果发现一个仪表盘刻度图片出现了明显的色块。后来改成 RLE 就好了。所以我的建议是：每张图单独测试，不要一刀切。
4.3 L8 索引色模式：小内存设备的救星
L8 模式是 TouchGFX 4.18 之后加入的，我觉得这是最实用的功能之一。它用 8 位（256 色）调色板来代表整张图片，每像素只占 1 字节，比 RGB565 还省一半。
什么时候用 L8？
- 图标集：一套 50 个图标，颜色不超过 256 色
- 字体纹理：中文字库的位图部分
- 风格统一的界面：比如只用品牌色系的界面
怎么用？在 TouchGFX Designer 里，选中图片资源，在属性面板把 Format 改成 L8，然后系统会自动生成调色板。你也可以手动编辑调色板，把不用的颜色删掉，进一步压缩。
关键数据：一张 128x128 的图标，RGB565 要 32KB，L8 只要 16KB，而且肉眼几乎看不出区别。如果你的 MCU 只有 512KB Flash，L8 能帮你多放 30-50 张图。
4.4 知识体系总览
下面这张图把图片优化的决策流程串起来了，你可以照着这个思路走：
4.5 实战建议：三步走策略
- 第一步：分类——把所有图片按「是否需要透明度」「颜色数是否小于 256」「是照片还是图标」分成三类。
- 第二步：选格式——透明度图片用 ARGB8888，颜色数少的用 L8，其余用 RGB565。
- 第三步：压空间——照片类用 L4，图标按钮用 RLE，每张图在 TouchGFX Designer 里预览效果，确认没问题再定稿。
我的习惯：在项目初期，我会先拿 3-5 张代表性图片做格式和压缩测试，算出内存和 Flash 的预算。这样后期就不会出现「图片放不下」的尴尬。记住，优化不是一次性的，而是贯穿整个开发周期的。