How to Turn a Byte Array Into an Image

Array to Image previews those bytes in the browser. No account. If the array arrived next to an auth token in a JSON body, do not paste the whole response into a random site - extract the numbers. Browser-local is the safer default.

When an image is a list of numbers

Firmware for SSD1306-class OLEDs, e-ink panels, and small TFTs stores frames as packed bits. A debugger dump, a .h include, or a logic-analyzer export is a list, not a PNG.

JSON shows up when a device API returns a framebuffer:

{
  "display": "ssd1306",
  "width": 128,
  "height": 64,
  "bpp": 1,
  "pixels": [0, 24, 24, 0]
}

The object is not an image. The pixels array might be. Copy that array (or the C equivalent) into the tool. Leave Authorization and device serials out of the paste.

This is the reverse of Bitmap to Array: numbers → pixels, not pixels → numbers.

Width, height, and bits per pixel

The bytes are meaningless without layout.

Width and height must match the buffer the firmware targeted: 128×64, 128×32, 84×48 (PCD8544), 240×240, and so on. If a comment in the header says width: 128, height: 64, use that. A wrong width shifts every row and looks like noise.

Bits per pixel. 1 bpp is monochrome OLED and a lot of e-ink. 2 and 4 bpp are small grayscale. 8 bpp is a byte per pixel. If the “expected bytes per row” hint does not match your array length, the bpp or width is wrong.

Bit order. MSB versus LSB changes which pixel is which inside a byte. If the icon is recognizable but mirrored in ugly strips, flip the bit order before you rewrite firmware.

Row padding. Some generators pad rows to a byte boundary. If the image shears, padding is a suspect.

Set these before you decide the array is corrupt. Most “broken” previews are parameter mismatches.

A firmware header or API blob

You pull logo.h from a repo:

const uint8_t logo[] = {
  0x00, 0x7e, 0x42, 0x42, 0x7e, 0x00
};

Paste the braces into Array to Image. Set 8×8, 1 bpp (or whatever the comment says). You should see a glyph. If you see snow, change width or bpp. If you see the glyph inverted, the tool or the display may treat 1 as white; that is a convention, not a file upload problem.

Second path: a JSON field "bitmap": [255, 129, ...]. Isolate the array. Do not paste the entire device telemetry object if it includes tokens or location.

Third path: a raw .bin you dragged in. Same parameters apply. The file is still processed in the tab.

After you can see the icon, you might want to edit a PNG and go back to bytes. That is Bitmap to Array. Preview first so you know the encoding you must match.

Preview, then go the other direction

A good loop:

1. Preview the existing array so you know width, bpp, and bit order.
2. Draw or crop a PNG that matches those dimensions.
3. Convert the PNG to an array with the same settings.
4. Preview that new array again. If it does not match the PNG, the settings drifted.

Do not bounce through a cloud image converter in the middle. You would be uploading a logo that might be unreleased, and you would risk a re-encode that changes pixels before they become bytes.

SVG and photo pipelines are a different cluster. If you needed a web raster, that is not this tool. This page is packed bitmaps for small displays and the JSON/C arrays that hold them.

What a tab will not decode

It will not infer width from a mystery blob. Guessing 128×64 on a 240×240 buffer is noise. It will not decode JPEG or PNG that someone hex-dumped into a JSON string - those are files, not framebuffer arrays. It will not run a 4K 32-bit image as 1 bpp without looking like static.

Huge arrays can exhaust memory. Firmware icons are small; if you pasted a photograph as 8-bpp 2000×2000, use a desktop script.

Invalid text (odd hex, truncated JSON arrays) should fail closed. Do not “retry” by uploading the same bytes to an unknown site.

Preview the dummy pattern, then the real array

Open Array to Image with a public sample array or a dummy pattern. Lock width, height, bpp, and bit order. Then preview the real firmware or JSON field if it contains no secrets. When you need the reverse trip, use Bitmap to Array and the guide How to Convert a Bitmap Image to a Byte Array.