Как получить изображение максимально малого объёма для микроконтроллеров?

Question

[Денис]

Всем доброго времени суток.

Стоит задача написания интерфейса управления на микроконтроллере. Как GUI использую emWIn, ОС - CoOS. Памяти всего 2 мегабайта,а вместить надо много. Следовательно надо максимально эффективно использовать ресурсы.

Сейчас в моё проекте я использую изображения подобного рода



А это нарисовано в paint и обработано через photoshop.


Все в формате png, так как нужен прозрачный фон.

А теперь суть проблемы. В попытках оптимизации всего этого я столкнулся с тем, что практически ничего не знаю о изображениях и не знаю с чего начать.

По этому, прошу вас подсказать мне с чего мне начать изучать изображения и как быстрее прийти к понимаю способов, получения изображений минимального размера.

Answer 1

[Евгений Шатунов]

Для максимального сжатия изображений используют палитровую графику. Суть в том, чтобы в пиксельной матрице изображения заменить тяжелую информацию о цвете на значительно более легкий индекс цвета в некоторой цветовой палитре.

Для картинки считается количество уникальных цветов, потом все уникальные цвета складываются в палитру и индексируются, а матрица цветов заменяется на матрицу индексов цветов.
Число цветов в палитре принято делать от степени двойки, чаще всего встречаются палитры в 256 цветов. В этом случае размер индекса цвета в матрице занимает 1 байт. 16 цветов в палитре - индекс уже 4 байта. и.т.д.
Прозрачность в этом случае неудобств не доставляет, т.к. в палитре можно спокойно хранить цвет в формате RGBA.

Когда число цветов нужно вписать в некоторые рамки, для этого применяют разные алгоритмы так называемого dithering.

Answer 2

[_ _]

pngquant

Answer 3

[GavriKos]

Если вам нужно уменьшить место, занимаемое картинками "на жестком диске", а не в оперативке по итогу (в ней скорее всего все в бмп развернется), то:
1) Из 1 пнг прекрасно делаются две картинки - первая полноцветная без прозрачности в jpg, вторая в grayscale - карта прозрачностей. Потом в отрисовке это дело обрабатываете
2) Можно еще олдскульнее - тот же jpg, где левый верхний символ отвечает за прозрачный цвет. В таком случае полупрозрачность не реализовать нормально.
3) Рисовать вектором.

Answer 4

[Александр]

Как вариант можно использовать GIF - поддерживает прозрачность, компактнее за PNG, но при этом поддерживает меньше цветов (256 если не ошибаюсь).

Либо можно сжимать свои PNG с помощью подобных сервисов: https://tinypng.com/ (например, те картинки, что есть в посте удалось сжать на 30-60%).

Answer 5

[Александр Пожарский]

Я, конечно, кэп, но почему не попробовать что-то векторное? Если вопрос не о хранении "отрендеренного" изображения.