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.

Add more images or continue to step 2

1. Paste existing 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).

If your image looks glitchy try changing the dimensions above and press the read button again.
Read images also appear at step 3 below for further processing.

2. Image Settings

Canvas size(s):

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

Only images file type are allowed

Select one or more images at step 1 first.

Canvas background color:

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

White Black Transparent

Image Scaling:

Center image:

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

horizontally vertically

Invert image colors:

Invert

Dithering mode:

Brightness / alpha threshold:

Pixels with brightness above threshold turn white, below turn black (opaque/transparent for alpha mode).

Rotate image:

degrees CW

Flip image:

horizontally vertically

Preview

No files selected

3. 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

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

Adds some extra Arduino code around the output. If multiple images are loaded, generates a byte array for each and appends its glyph name (from step 2 above) to the identifier.

Adds some extra Arduino code around the output. 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:

Full example code:

Include a full example displaying the first image.

ESP32 formatting:

Use uint8_t instead of unsigned char and PROGMEM.

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.

Ascii preview: Add an ascii-art comment after each row of bytes. Forces one image row per output line, regardless of "Bytes per row".

Select one or more images at step 1 first.