Loss in quality when converting PNG icon to C array

How-to
,
1

Description

Hello!

I recently started my first project using LVGL and its been quite good to use so far.
The GUI we have to build is quite simple, but we are also pretty limited in storage (256KB flash).
There’s several icons we need to include in our GUI and these have been delivered to us by our customer.
To save on storage size and since the icons are quite simple anyways, we have decided to format the PNGs as C array with Indexed 2 color format, using the LVGL image converter tool.
This makes it so that the icons essentially can have 2 colors, 1 foreground, 1 background. Black is chromakey will not be shown on our display (transparent).
The transparency works just fine and I can display the images on our display, however the quality is very poor.

Middel 8 This is the icon that has been delivered to us.

When I upload the icon to a PNG analyzer, you can see the effect that I now encounter. After converted, the icon looks like the top picture under “RGB channels without Alpha” as you can see below, while I expect it to look like the bottom one under “Alpha channel” with the color of the top.
brave_eMdnKhMi52

I’m not sure where this loss in quality comes from and how the alpha channel has influence in this. I’m quite unexperienced when it comes to images and their formatting, so perhaps there is something easy I’m not seeing, but any help is much appreciated!

What MCU/Processor/Board and compiler are you using?

Renesas R7FA2L1AB with a ILI9341 display
Using the GCC 9.3.1.20200408 toolchain

What LVGL version are you using?

8.0.2

What do you want to achieve?

I want to find out why the quality of the icon decreases so drastically after conversion to C array, as seen in above pictures.

What have you tried so far?

We tried several different ways of exporting the PNGs but to seemingly no avail, we had issues with transparency before, that seems fixed but now we have run into this.
Increasing the color format in the conversion process to “4 indexed colors” or “Alpha only 2 shades” seems to increase the quality quite significantly, but I don’t really understand how, as the icons are so limited in color.

Code to reproduce

N/A

2

The issue is that the original image uses a technique to enhance perceived quality known as antialiasing. This relies on using multiple shades of the desired color. Here is the image scaled up to 10x against a contrasting background to make the effect clearer:

image

When you ask for a 2-color indexed image, LVGL is forced to pick only one color for the background and one color for the icon itself. This means that the antialiasing is lost and you see a low-quality image like the one in your screenshot.

Notably, GIMP (the image editor I used for my screenshot) does the exact same thing when asked to produce a 2-color image:

image

1 Like
3

Ah that makes sense! Thank you for the explanation