How to get an image of the smallest possible volume for microcontrollers?

Question

C++ / C#

Good day to all.
The task is to write a control interface on a microcontroller. As GUI I use emWIn, OS - CoOS. The memory is only 2 megabytes, but you need to fit a lot. Therefore, it is necessary to use resources as efficiently as possible.
Now in my project I use images of this kind

. And this is drawn in paint and processed through photoshop.

Everything is in png format, because you need a transparent background.
And now the crux of the problem. In trying to optimize all of this, I've found that I know next to nothing about images and don't know where to start.
Therefore, I ask you to tell me where to start studying images and how to quickly come to understand the ways to obtain images of the minimum size.

Answer 1

For maximum image compression, palette graphics are used. The point is to replace the heavy color information in the pixel matrix of the image with a much lighter color index in some color palette.
For a picture, the number of unique colors is counted, then all unique colors are added to the palette and indexed, and the color matrix is ​​replaced by a matrix of color indices.
The number of colors in the palette is usually made from a power of two, most often there are palettes of 256 colors. In this case, the size of the color index in the matrix is ​​1 byte. 16 colors in the palette - the index is already 4 bytes. etc.
Transparency in this case does not cause inconvenience, because in the palette, you can safely store the color in RGBA format.
When the number of colors needs to be entered into some frames, different algorithms of the so-called dithering are used for this.

Answer 2

pngquant

Answer 3

If you need to reduce the space occupied by pictures "on the hard drive", and not in the RAM as a result (in it, most likely, everything will be expanded in bmp), then:
1) Two pictures are perfectly made from 1 png - the first is full-color without transparency in jpg, the second in grayscale is the transparency map. Then, in rendering, you process this matter
2) It can be even more old-school - the same jpg, where the upper left symbol is responsible for the transparent color. In this case, translucency cannot be implemented normally.
3) Draw with a vector.

Answer 4

As an option, you can use GIF - it supports transparency, it is more compact than PNG, but it supports fewer colors (256 if I'm not mistaken).
Or you can compress your PNGs using similar services: https://tinypng.com/ (for example, those pictures that are in the post were compressed by 30-60%).

Answer 5

Of course, I'm a cap, but why not try something vector? If the question is not about storing the "rendered" image.