GUI Guider中I8图像格式实战应用

做嵌入式GUI时，很多项目都会遇到一个熟悉的问题：界面还没做复杂，图片资源已经开始占用大量Flash。图标、按钮、状态提示、Logo等资源看似不大，但数量增加后，会逐渐压缩功能扩展空间。I8(Indexed 8-bit)是在尽量不影响显示效果的前提下降低图片资源占用的一种选择。

本文介绍I8的基本原理、适用场景，以及如何在GUI Guider项目中更合理地使用。

为什么需要I8图像格式?

在MCU项目中，图片资源通常会占用较多Flash。对于图标、状态图片、Logo和工业HMI元素等颜色数量有限的资源，I8可以在保持基本显示效果的同时降低存储占用。I8使用“像素索引+调色板”的方式保存图片：每个像素只保存1Byte索引，再通过调色板映射到真实颜色。因此，它更适合颜色集中、图形边界清晰的UI资源。

常见图像格式每像素占用对比

什么是I8图像?

I8是Indexed 8-bit的简称。它不会在每个像素中直接保存完整颜色，而是保存一个8-bit索引值，再由该索引指向调色板中的某一种颜色。由于8-bit最多可以表示256个索引，因此I8图片最多支持256种颜色。这种方式适合颜色数量有限、边界清晰、图形化程度较高的UI资源。

I8的主要优点

图片体积更小，能够有效降低Flash占用

资源加载更轻量，适合MCU资源受限场景

适合图标、工业HMI元素、状态图片和Logo

结合LVGL 9.4的图像显示机制，可以更灵活地管理UI资源

I8的限制

最多支持256种颜色

不适合照片、视频帧、产品渲染图等颜色复杂的资源

如果原图颜色过多，转换后可能出现色带、颜色失真或过渡不自然

使用I8的建议流程

1. 准备图片资源

优先选择颜色数量较少的PNG资源。导入前检查图片是否包含过多渐变或照片类内容。

2. 在GUI Guider中导入图片

通过Resource Manager添加图片资源，并根据项目显示需求选择合适的颜色格式。

3. 选择 I8 颜色格式

将适合的资源转换为 I8，并在 GUI Guider 中预览显示效果。

4. 运行仿真验证

通过 GUI Guider Simulator 检查颜色显示、透明区域、边缘过渡和页面整体效果。

5. 生成代码并集成到目标工程

确认效果满足要求后生成代码，并在目标开发板上进行实际验证。

I8与RGB565资源占用对比

以下为理论估算示例，用于帮助理解不同格式的资源占用差异。实际大小会受到图片内容、调色板、压缩方式和工程配置影响。

从资源预算角度看，I8可以在颜色数量可控的前提下降低图片资源占用。对于包含大量图标和状态图片的 HMI 项目，累计节省效果会更加明显。

注意事项

1. 优先用于颜色少于256种的图片

I8 的核心限制是调色板颜色数量，因此颜色较少的图片最适合使用I8。

2. 转换后必须检查显示效果

即使图片颜色数量不多，也建议在 GUI Guider Simulator 和真实开发板上分别检查显示效果。

3. 注意透明度和边缘过渡

如果图片包含透明边缘或抗锯齿效果，需要关注转换后边缘是否出现锯齿、杂色或颜色不自然。

4. 不要盲目替换所有图片

I8是优化手段，不是所有图片的默认选择。对于复杂背景和照片类资源，应继续使用更合适的颜色格式。

项目实践建议

在GUI Guider的Air Conditioner和Agriculture Control模板中，部分图片使用I8格式来节约空间，并可运行在FRDM-MCXN236开发板上。

将图标和状态图片的图像格式设置为I8

对比转换前后的显示效果和资源大小

代码生成后检查生成资源的格式是否符合预期

在目标平台上验证显示效果、刷新性能和内存占用

实践案例 1：Air Conditioner

Air Conditioner应用模板包含较多动画和小图标。下图对比ARGB8888与I8格式：在保证图片质量的条件下，使用I8可节省约950KB空间，从而使该应用能够运行在FRDM-MCXN236开发板上。

Air Conditioner：I8(左)与 ARGB8888(右)对比

实践案例 2：Agriculture Control

Agriculture Control应用模板中使用I8可节省约16.5 KB空间。

Agriculture Control：I8(左)与 ARGB8888(右)对比

对于MCX、i.MX RT等平台上的中小型HMI项目，I8可以作为图片资源优化的常用手段之一。尤其当项目包含大量图标、状态提示、菜单资源和装饰元素时，I8能够帮助开发者释放更多Flash空间。