Optimize PNGs for LCD Image Converters: Tips for Smaller ROM Usage

How to Use an LCD Image Converter for Microcontrollers and Displays

Working with graphics on microcontrollers and embedded displays requires converting standard images into a format the display driver and limited RAM/ROM can handle. This guide walks through choosing settings, preparing images, converting them, and integrating the results into firmware.

1. Understand your target hardware

• Display type: monochrome (1-bit), grayscale (2–8 bit), or color (RGB565, RGB888).
• Resolution: width × height in pixels.
• Pixel order & orientation: row-major vs column-major; left-to-right, top-to-bottom; rotation.
• Color format & endianness: e.g., RGB565 (16-bit), little vs big endian.
• Memory layout: each row padded to byte boundaries? Bit-packed for monochrome? Framebuffer vs tiled formats.

Use these specs as the converter settings to ensure the output matches what the MCU code or display controller expects.

2. Pick an LCD image converter tool

Options include desktop apps, command-line tools, and web-based converters. Choose one that supports:

• Your display’s color depth and pixel format.
• Output as C arrays, binary blobs, or includeable headers.
• Optional dithering, scaling, and rotation.
• Batch conversion for multiple assets.

Popular types:

• GUI converters (easy visual preview).
• CLI tools (scriptable for build systems).
• ImageMagick + custom scripts for advanced control.

3. Prepare your source image

• Resize to the display resolution (exact match prevents scaling artifacts).
• Crop to focus on necessary content.
• Adjust contrast/brightness so important details are preserved after quantization.
• Simplify colors if using low bit depths; reduce palette to important colors.
• Use dithering intentionally for smoother appearance at low color depths (see next section).

Save a working copy before conversion.

4. Choose color depth and dithering

• Monochrome (1-bit): Best for text, icons. Use thresholding or ordered dithering (e.g., Bayer) for perceived detail.
• Grayscale (2–8 bit): 4–8 bit for subtle gradients; apply Floyd–Steinberg for better quality.
• Color (16-bit RGB565): Good balance for many MCU displays. Convert with perceptual color reduction and optional error diffusion.
• Dithering: Floyd–Steinberg gives better gradients; ordered dithering is faster and predictable. Test visually.

5. Set output format and packing

• C array (const uint8_t/uint16_t): Easy to include in firmware. Use PROGMEM/const to place in flash.
• Raw binary: Useful for display controllers that accept raw streams or for tools that write directly to flash.
• Bitmap with header: If your driver expects BMP/PCX-style headers, use that.
• Bit packing for monochrome: Decide MSB-first vs LSB-first ordering; many drivers expect each byte to represent 8 horizontal pixels.
• Row padding: Ensure rows are byte-aligned if required.

Include comments in headers noting resolution, format, and endianness.

6. Convert the image (step-by-step example)

Assume a 128×64 monochrome OLED and a converter that outputs a C array.

1. Open your image in an editor; resize to 128×64.
2. Convert to grayscale and adjust contrast so text and key shapes are distinct.
3. Apply 1-bit threshold or ordered dithering.
4. In the converter, select: format = monochrome; packing = horizontal, MSB-first; output = C array.
5. Export as