1、TouchGFX图片基础：图片在GUI中的角色、TouchGFX支持的图片格式、图片资源与内存的关系

大家好，我是老周。做嵌入式GUI这些年，我见过太多人在图片上栽跟头。明明功能逻辑都写好了，一上图片就内存溢出、刷新卡顿。说白了，图片是GUI的颜值担当，但也是内存的吞金兽。今天咱们就从最基础的东西聊起。

1.1 图片在GUI中的角色——不只是好看

你想想看，一个嵌入式设备，用户第一眼看到的是什么？不是代码多优雅，而是界面好不好看。图片在GUI里承担着三个核心角色：

• 视觉呈现：图标、背景、按钮皮肤，这些直接决定了产品的档次
• 交互反馈：按下按钮的变色、滑块的拖动轨迹，本质都是图片在切换
• 信息传递：仪表盘指针、波形图、二维码，这些动态内容也依赖图片

我在一个医疗设备项目里遇到过，客户要求界面看起来"像手机一样流畅"。结果我们用了大量高分辨率背景图，一跑起来，MCU直接罢工。嗯，这就是典型的没搞清楚图片和内存的关系。

1.2 TouchGFX支持的图片格式——选对格式省一半内存

TouchGFX支持几种主流图片格式，但每种格式的脾气都不一样。我整理了一张表，大家一看就明白：

格式	颜色深度	每像素位数	典型场景	内存占用
RGB565	16位	16 bpp	彩色图标、照片	较高
RGB888	24位	24 bpp	高精度显示	最高
L8（索引色）	8位	8 bpp	简单图标、文字	中等
BW（黑白）	1位	1 bpp	单色图形、字体	最低
ARGB8888	32位	32 bpp	带透明度图片	最高

我个人习惯是：能用L8绝不用RGB565，能用BW绝不用L8。为什么？因为每减少1个比特位，一张800×480的图片就能省下几十KB。你想想看，一个STM32F4的SRAM才128KB，省下来的空间能干多少事。

1.3 图片资源与内存的关系——一张图吃掉多少内存？

这个问题其实很简单，但很多人算不明白。公式就一个：

内存占用 = 宽度 × 高度 × (颜色深度 / 8)

举个例子，一张480×272的RGB565图片：

480 × 272 × (16 / 8) = 480 × 272 × 2 = 261,120 字节 ≈ 255 KB

255KB！一个STM32F429的SRAM才256KB，一张图就快塞满了。我曾经在一个项目里，设计师给了10张这样的背景图，我当场就崩溃了。后来跟设计师反复沟通，把背景图压缩成L8格式，每张降到128KB，才勉强塞进去。

这里有个关键点大家要注意：TouchGFX的图片是直接加载到RAM里的，不是从Flash里实时解码。这意味着你的RAM有多大，能放的图片就有多少。

1.4 图片存储位置的选择——Flash还是RAM？

TouchGFX支持两种图片存储方式：

• 内部Flash：图片烧录在MCU的Flash里，运行时拷贝到RAM
• 外部Flash/存储：图片放在SPI Flash或SD卡里，按需加载

我个人建议：小图标、常用背景放内部Flash，大图或低频使用的图片放外部存储。为什么？因为内部Flash读取速度快，但空间有限；外部存储空间大，但读取慢，而且需要额外的驱动代码。

这里有个常见的坑：很多人把所有图片都塞进内部Flash，结果Flash不够用，不得不换更大容量的MCU，成本直接翻倍。其实换个思路，把不常用的图片放到外部SPI Flash里，成本只增加几块钱。

1.5 本章知识体系总览

为了让大家对本章内容有个整体认识，我画了一张结构图：

这张图把咱们今天讲的内容串起来了。从图片的角色出发，到格式选择，再到内存计算，最后落到存储策略。每一步都环环相扣，缺一不可。