Using the I8 Image Format within GUI Guider

[#1]

Reducing image resource usage in embedded GUI applications

When developing embedded GUIs, many projects encounter a familiar challenge: image resources begin consuming a significant amount of Flash before the interface becomes complex. Icons, buttons, status indicators, logos, and other assets may seem small individually, but their cumulative footprint can reduce the space available for future features.

I8 (Indexed 8-bit) is an effective option for reducing image storage while preserving acceptable visual quality. This guide explains the fundamentals of I8, its suitable use cases, and practical recommendations for using it in GUI Guider projects.

1. Why Use the I8 Image Format?

In MCU-based projects, image resources often occupy a large portion of Flash. For assets with a limited number of colors, such as icons, status images, logos, and industrial HMI elements, I8 can reduce storage usage while preserving the essential visual appearance.

I8 stores an image using a pixel-index and color-palette mechanism. Each pixel stores a one-byte index, which maps to an actual color in the palette. This makes I8 especially suitable for UI assets with concentrated color sets, clear boundaries, and highly graphical content.

Storage Comparison of Common Image Formats

Image Format	Typical Storage per Pixel	Suitable Use Cases
RGB888	3 bytes	Images with rich colors and high color-fidelity requirements
RGB565	2 bytes	Common MCU displays balancing visual quality and resource usage
ARGB8888	4 bytes	Images requiring an alpha channel and high-quality rendering
I8	1 byte + palette	Icons, logos, and HMI elements with a limited color set

2. What Is an I8 Image?

I8 stands for Indexed 8-bit. Instead of storing complete color information in every pixel, an I8 image stores an 8-bit index that points to a color in a palette. Because an 8-bit value represents up to 256 indices, an I8 image supports a maximum of 256 colors. This format is well suited to UI assets with limited colors, sharp boundaries, and graphic-style content.

Key Advantages

• Smaller image files and lower Flash consumption.
• Lightweight resource loading for memory-constrained MCUs.
• Well suited to icons, industrial HMI elements, status images, and logos.
• More flexible UI resource management when combined with the LVGL 9.4 image display mechanism.

Limitations

• Supports no more than 256 colors.
• Not suitable for photographs, video frames, product renderings, or other color-rich assets.
• Images with excessive colors may show banding, color distortion, or unnatural transitions after conversion.

3. Recommended Workflow in GUI Guider

Step 1: Prepare the Image Resources

Prefer PNG assets with a limited number of colors. Before importing an image, check whether it contains excessive gradients or photographic content.

Step 2: Import Images into GUI Guider

Add the image resources through Resource Manager and select an appropriate color format based on the display requirements of the project.

Step 3: Select the I8 Color Format

Convert suitable resources to I8 and preview the visual result in GUI Guider.

Step 4: Validate in the Simulator

Use GUI Guider Simulator to check color rendering, transparent regions, edge transitions, and the overall appearance of the page.

Step 5: Generate Code and Validate on the Target

After confirming that the result meets the requirements, generate the code and verify the application on the target development board.

4. Resource Usage Comparison: I8 vs. RGB565

The following theoretical estimates illustrate the resource usage of different formats. Actual size depends on image content, palette size, compression, and project configuration.

Test Resource	Image Format	Theoretical Data Size
128 × 128 icon	RGB565	Approximately 32 KB
128 × 128 icon	ARGB8888	Approximately 64 KB
128 × 128 icon	I8	Approximately 16 KB + palette

From a resource-budget perspective, I8 reduces image storage when the color count can be controlled. The cumulative savings become more significant in HMI projects that contain many icons and status images.

5. Important Considerations When Using I8

1. Prefer Images with Fewer Than 256 Colors

The core limitation of I8 is the palette size, so images with fewer colors are the best candidates.

2. Always Check the Visual Result After Conversion

Even when an image contains relatively few colors, verify the result both in GUI Guider Simulator and on the target hardware.

3. Pay Attention to Transparency and Edge Transitions

For images with transparent or anti-aliased edges, check for jagged borders, artifacts, or unnatural colors after conversion.

4. Do Not Convert Every Image Blindly

I8 is an optimization technique, not the default choice for every asset. Complex backgrounds and photographic resources should continue to use a more appropriate color format.

6. Project Practice Recommendations

In the GUI Guider Air Conditioner and Agriculture Control templates, selected images use I8 to save storage space and enable deployment on the FRDM-MCXN236 development board.

• Set suitable icons and status images to the I8 format.
• Compare the visual quality and resource size before and after conversion.
• After code generation, confirm that generated resources use the expected image format.
• Validate visual quality, refresh performance, and memory usage on the target platform.

Example 1: Air Conditioner

The Air Conditioner application template contains many animations and small icons. The comparison below shows ARGB8888 and I8 results. While maintaining image quality, I8 saves approximately 950 KB, allowing the application to run on the FRDM-MCXN236 development board.

Figure 1. Air Conditioner comparison: I8 (left) and ARGB8888 (right).

Example 2: Agriculture Control

In the Agriculture Control application template, using I8 saves approximately 16.5 KB of storage.

Figure 2. Agriculture Control comparison: I8 (left) and ARGB8888 (right).

Conclusion

For small and medium-sized HMI projects on platforms such as MCX and i.MX RT, I8 is a practical method for optimizing image resources. It is particularly useful when a project contains many icons, status indicators, menu graphics, and decorative elements. Applied selectively and validated carefully, I8 can release more Flash space while maintaining an appropriate visual experience.