image2cpp

image2cpp is a simple tool to convert images into byte arrays (and vice versa) for use with (monochrome) displays such as OLEDs on your Arduino or Raspberry Pi.
It was originally made to work with the Adafruit OLED library (for which your can find an example Arduino sketch here) but has been expanded by the community to be useful in all kind of (embedded) projects.

More info (and credits) can be found in the Github repository. This is also where you can report any issues you might come across.

Did you find this tool useful? Feel free to support my open source software on Github, especially if used commercially.

1

Select image

You can import multiple images at once.
All processing is done locally in your browser: your images are not uploaded or stored anywhere online.

Select more images or continue to step 2

or paste byte array

x px

Set this to the size of your image.
Common sizes: 16x16, 32x32, 64x48, 128x32, 128x64.

Byte array is invalid (or empty).

Read images appear at step 3 below

2

Image Settings

Canvas size(s):

Only images file type are allowed

Select one or more images at step 1 first.

Glyph name is used to identify the image in the code.

Canvas background color:

White Black Transparent

Used for parts of the canvas that are not covered by your image.

Invert image colors

Dithering:

Brightness / alpha threshold:

0 - 255; if the brightness of a pixel is above the given level the pixel becomes white, otherwise they become black. When using alpha, opaque and transparent are used instead. Default is 128.

Scaling:

Center image:

horizontally vertically

Centering the image only works when using a canvas larger than the original image.

Rotate image:

degrees CW

Flip image:

horizontally vertically

3

Preview

No files selected

4

Output

Draw mode:

If your image looks all messed up on your display, like the image below, try using a different mode.

Code output format

Plain bytes Arduino code Arduino code, single bitmap Adafruit GFXbitmapFont

Outputs just the raw bytes of the image(s).

Adds some extra Arduino code around the output for easy copy-paste into this example. If multiple images are loaded, generates a byte array for each and appends a counter to the identifier.

Adds some extra Arduino code around the output for easy copy-paste. If multiple images are loaded, generates a single byte array.

Creates a GFXbitmapFont formatted ouput. Used by a modified version of the Adafruit GFX library. GitHub project and example here.
First ASCII character value is used only if a glyph identifier of length equal to 1 is not provided for each image. The value itself will be incremented by 1 for each glyph.

First ASCII character (dec):

x advance:

Identifier/Prefix:

ESP32 formatting:

Uses uint8_t instead of unsigned char and drops PROGMEM, which is a no-op on ESP32.

Extra formatting options:

Add comments to code output

Swap bits in bytes MSB -> LSB. Useful when working with the u8g2 library.

Byte prefix:

Separator between bytes:

Bytes per row: Set to 0 to wrap using the image's width instead, e.g. an 8px wide image adds a newline every 8th byte.

Select one or more images at step 1 first.