Images and fonts

From a PNG on your desk to an LVGL image on the board, and where it lives when it gets there.

An image goes in as a PNG and comes out as an LVGL binary image, either on the board's filesystem or compiled into the firmware. The conversion is built in: there is no separate converter step, and no upload of your images to us - the browser decodes them, and only the pixels needed for the export travel to the server when you generate.

Importing

File > Import image asset, or the button on the Assets tab. PNG, JPEG, GIF, WebP and BMP are accepted, because those are what a browser canvas can decode; an animated GIF contributes its first frame. The image appears in the Assets list and becomes selectable in every Image and Image Button widget's asset field.

The Assets tab: the filesystem settings on the left, each imported image with its storage, format and name on the right.

Per-image settings

Setting	Meaning
Stored in	Filesystem (a `.bin` under `data/`) or C array (compiled in).
Colour format	RGB565, RGB565A8, ARGB8888 or L8 - see below.
File name	The name on the filesystem, e.g. `logo.bin`. Two assets cannot share one.
C symbol	The identifier of the compiled-in array, when Stored in is C array.

Colour formats

Format	Bytes per pixel	Use it for
RGB565	2	Photos and opaque graphics. The panel's native format, so no conversion at draw time.
RGB565A8	3	Graphics with transparency - icons, logos on a coloured background. Full colour plus an 8-bit alpha.
ARGB8888	4	When you need true colour and alpha and can afford the size. Converted per pixel on a 16-bit panel.
L8	1	Greyscale. Small, and fine for monochrome icons or an OLED.

The designer warns when an image with transparency is set to RGB565 or L8, since the alpha channel would be discarded, and it tracks the total against the partition size. Indexed and 1/2/4-bit formats are not offered.

Where the images live

Filesystem is the default. Each image becomes a .bin under data/ in the export, flashed to the board separately from the sketch; a generated ui_fs.cpp registers the filesystem with LVGL as a drive letter and every widget refers to its image by path:

lv_image_set_src(ui_Logo, "S:/logo.bin");

ui_fs_init() runs from setup() before the UI is built and prints a warning on the serial monitor for any file it cannot find, so a missing upload is obvious rather than an empty box.

C array compiles the image into the firmware as a const uint8_t[] with an lv_image_dsc_t descriptor, referenced as &symbol. Nothing to upload, but every byte counts against the application partition. Right for a few small icons; wrong for a full-screen background.

The filesystem

The Assets tab's Filesystem block picks the type and the LVGL drive letter for the whole project:

Type	Note
SPIFFS	Deprecated upstream but still the default on the ESP32 Arduino core, and what the older upload plugins write.
LittleFS	Faster, wear-levelled, and the better choice on a new project. What the current Arduino IDE 2.x plugin uploads.
FFat	Needs a FAT partition. Worth it only for large or frequently rewritten data.
SD card	Assets live on the card, so they can be swapped without reflashing. Needs an SD peripheral on the Devices tab.

The budget shown against the images assumes the huge_app partition scheme, which leaves roughly 896 KB for SPIFFS or LittleFS on a 4 MB ESP32; an SD card is treated as unlimited. Choose the partition scheme in your IDE to match - Flashing and configuration covers uploading the filesystem image.

Header formats, for the curious

LVGL 8 and 9 use different binary headers and the generator writes the right one for the project's version. LVGL 9 has a 12-byte header (magic, colour format, flags, width, height, stride) and stores RGB565A8 as a colour plane followed by a separate alpha plane. LVGL 8 packs the header into one 32-bit word, interleaves alpha per pixel, and - when the driver has LV_COLOR_16_SWAP set, as TFT_eSPI and LovyanGFX do - wants the RGB565 bytes big-endian. If you switch LVGL version, re-export; the .bin files are not interchangeable.

Fonts

Text uses the Montserrat sizes bundled with LVGL, from 8 to 48 in steps of two, chosen per label under Style settings > Text > Font. There is no custom font import yet; to use one, run LVGL's font converter yourself, add the .c to the project, and set it from ui_events.c after ui_init(). The sizes you use are enabled in lv_conf.h automatically.