1、图片格式基础：位图与矢量图区别、常见图片格式特点、TouchGFX支持的图片格式概览

做嵌入式GUI开发，选对图片格式，项目能省一半的存储空间和渲染时间。这话一点都不夸张。我刚开始用TouchGFX时，就因为格式没选对，导致界面卡顿、Flash爆满，后来花了两周重构才搞定。今天咱们就把图片格式的底牌翻个底朝天。

1.1 位图 vs 矢量图：本质区别在哪？

说白了，位图就是「像素点阵」，矢量图就是「数学公式」。你想想看，一张100×100的位图，存了10000个像素的颜色值；而矢量图只存「画一个圆，半径50，红色」这样的指令。

对比维度	位图（Bitmap）	矢量图（Vector）
存储原理	记录每个像素的颜色值	记录几何图形的数学描述
缩放表现	放大后出现锯齿/马赛克	无限缩放，边缘依然平滑
文件大小	与分辨率成正比	与图形复杂度相关，与分辨率无关
适用场景	照片、复杂渐变、实拍图像	图标、Logo、文字、简单图形
TouchGFX支持	✅ 原生支持（BMP/PNG/JPG）	⚠️ 需转为SVG或自定义控件

1.2 常见图片格式特点对比

做嵌入式开发，我们最常打交道的就这四种格式。我按自己的使用频率排个序：PNG、JPG、BMP、GIF。一个一个说。

PNG（便携式网络图形）

这是TouchGFX项目中的「主力选手」。支持透明通道、无损压缩，图标和按钮的首选。我在一个智能家居项目中，所有按键图标都用PNG，配合TouchGFX的Image控件，效果非常干净。

• 优点：无损、支持Alpha透明、压缩率适中
• 缺点：文件比JPG大，不适合照片级图像
• TouchGFX建议：图标、按钮、小尺寸UI元素 → 用PNG

JPG/JPEG（联合图像专家组）

有损压缩，文件小，但不支持透明。适合背景图、照片、大尺寸纹理。我记得有个项目需要全屏背景，用PNG要800KB，换成JPG后只有120KB，肉眼几乎看不出区别。

• 优点：压缩率高，文件小
• 缺点：有损、不支持透明、边缘有压缩伪影
• TouchGFX建议：背景图、大尺寸照片 → 用JPG

BMP（位图）

最原始的位图格式，不压缩，文件巨大。除非有特殊兼容性要求，否则我强烈建议你别用。嗯，这里要注意：TouchGFX虽然支持BMP，但实际项目中几乎没人用。

• 优点：无压缩、读取速度快
• 缺点：文件体积巨大、不支持透明
• TouchGFX建议：❌ 不推荐使用

GIF（图形交换格式）

支持简单动画和透明，但只有256色。在嵌入式GUI中，GIF动画的渲染性能很差，我踩过这个坑——一个GIF动画在STM32F429上跑起来像幻灯片。

• 优点：支持动画、支持透明
• 缺点：颜色少（256色）、文件大、解码慢
• TouchGFX建议：❌ 不推荐使用（动画请用Lottie或视频）

1.3 TouchGFX支持的图片格式概览

TouchGFX的图片支持分为「原生格式」和「运行时格式」两个层面。我画了一张图帮你理清关系：

这张图展示了TouchGFX的图片处理流程：你在PC上使用PNG/JPG等原生格式，经过ImageConverter编译后，自动转换为MCU端的高效运行时格式。这个过程是自动的，但理解它有助于你做出更好的格式选择。

运行时格式详解

运行时格式	位深	颜色数	适用场景	存储占用
RGB565	16位	65536色	通用UI元素、图标	适中
ARGB8888	32位	1670万色+Alpha	需要透明/半透明效果	较大
L8（索引色）	8位	256色	颜色较少的图标、小图	小
BW（黑白）	1位	2色	文字、简单符号	极小

1.4 格式选择的核心原则

说了这么多，到底怎么选？我总结了三句话：

1. 看用途：图标/按钮 → PNG；背景/照片 → JPG；动画 → 别用GIF，用Lottie或视频
2. 看颜色：颜色少（<256色）→ 考虑L8索引色；颜色丰富 → RGB565或ARGB8888
3. 看透明：需要透明 → PNG + ARGB8888；不需要透明 → JPG + RGB565