1、LVGL与图片资源概述
各位好，我是老周。做嵌入式GUI有些年头了，今天咱们聊聊LVGL里的图片资源。
先说说LVGL是什么。LVGL全称Light and Versatile Graphics Library，说白了就是一个为嵌入式设备量身打造的图形库。我最早接触它是在一个智能家居项目上，当时要在MCU上跑一个带触摸的仪表盘，RAM只有几百KB。试过几个方案都不太理想，直到遇见了LVGL——嗯，就是它了。
1.1 LVGL简介
LVGL是一个开源的嵌入式图形库，用C语言写的。它支持多种微控制器和显示屏，从STM32到ESP32，从ILI9341到SSD1963，基本都能跑。
它的核心特点我总结了一下：
- 轻量级：最低配置只需要16KB RAM和64KB Flash。我在一个STM32F103上跑过，资源绰绰有余。
- 丰富的控件：按钮、滑块、图表、列表、下拉菜单……大概有30多种现成控件。
- 内置样式系统：支持CSS风格的样式设置，改个颜色、调个圆角，几行代码搞定。
- 输入设备支持：触摸屏、鼠标、键盘、编码器，都能接。
- 多语言支持：UTF-8编码，中文显示没问题。
我个人习惯把LVGL看作一个“积木盒”。你不需要从零画像素，只需要把现成的控件拼起来，再配上图片资源，一个漂亮的界面就出来了。
一句话总结：LVGL让嵌入式开发者也能做出手机App级别的界面，而且不挑硬件。
1.2 图片在GUI中的角色
图片在GUI里到底有多重要？我举个例子你就明白了。
几年前我做了一个温控器项目。第一版纯用控件画，按钮是方的，背景是灰的，图标用字符代替。客户看了说：“这玩意儿是90年代的吧？”后来我换了方案，按钮换成圆角图片，背景用了一张渐变色图，温度计图标用PNG显示。同样的功能，客户说：“嗯，这个上档次。”
你看，图片在GUI里承担的角色其实很明确：
- 提升视觉体验：纯色块和渐变背景，哪个好看？不用我说。
- 传递信息更直观：一个电池图标比“电量80%”几个字快得多。
- 降低开发成本：复杂的图形效果，用图片比用代码画省事多了。
- 统一品牌风格：Logo、配色、字体，图片资源一换，整个界面风格就变了。
但这里有个坑——嵌入式设备的资源是有限的。一张1920x1080的PNG图片，解压后可能占好几MB内存。你想想看，MCU总共才几百KB RAM，怎么装得下？所以LVGL对图片的处理方式，跟PC上完全不一样。
我的经验：在嵌入式GUI里，图片不是“显示”出来的，而是“转换”出来的。LVGL会把图片转成C语言数组，直接烧进Flash里。这样运行时不需要解码，也不占RAM。
1.3 支持的图片格式概览
LVGL支持多种图片格式。我按使用频率排了个序：
| 格式 | 说明 | 适用场景 | 我推荐吗？ |
|---|---|---|---|
| LVGL原生格式（.bin/.c） | LVGL自己的图片格式，直接存为C数组或二进制文件 | 所有场景，尤其是资源受限的设备 | ✅ 强烈推荐 |
| PNG | 带透明通道的位图格式 | 需要透明效果的图标、Logo | ✅ 推荐，但需要解码库 |
| JPEG/JPG | 有损压缩格式，不支持透明 | 照片、背景图 | ⚠️ 谨慎使用，解码慢 |
| BMP | 无压缩位图格式 | 简单测试、小尺寸图片 | ❌ 不推荐，太占空间 |
| GIF | 支持动画的格式 | 加载动画、小动图 | ⚠️ 慎用，解码开销大 |
| SVG | 矢量图形格式 | 图标、简单图形 | ✅ 推荐，缩放不失真 |
这里我要多说一句。LVGL原生格式其实是最香的。它直接把图片像素数据转成C语言数组，编译时就跟代码一起烧进Flash了。运行时不需要解码，不需要额外RAM，速度还快。我曾经在一个项目里把所有PNG图标都转成了LVGL原生格式，Flash占用减少了30%，界面响应速度明显提升。
为什么会这样？因为PNG解码需要zlib库，解压过程既占RAM又占CPU时间。而LVGL原生格式就是裸像素数据，直接往显存里一丢就完事了。
注意：LVGL原生格式不支持压缩。如果你的Flash空间非常紧张（比如只有1MB），那就要权衡一下了。这种情况下，我建议用PNG格式，配合LVGL的缓存机制，在性能和空间之间找个平衡点。
下面这张图能帮你快速理解LVGL图片资源的整体结构：
嗯，这张图基本把LVGL图片资源的脉络理清了。左边是格式选择，中间是转换工具，右边是显示方式。这三块搞明白了，后面的章节就好办了。
最后说一句。不管你选哪种格式，最终都要面对一个问题——怎么把图片从设计稿变成能在LVGL里跑的代码。这就是咱们这门课要解决的核心问题。后面的章节，我会手把手带你走完整个流程。