### Array Input & Settings Sample Live Preview Drop a .bin here or paste array text below C/Rust arrays, tokenized hex, or plain hex string supported Choose .bin0 Array text_// Paste C/Rust arrays, 0x.. tokens, or hex string. You can include a comment like: // width: 128, height: 64_ Copy Hint: Expected ~16 bytes per row at current settings. Pixel grid Bit/Nibble order MSB-first LSB-first Row order Top → Bottom Bottom → Top Brightness100% _100_ Contrast100% _100_ Sharpness100% _100_ Gamma1.00 _1_ Render Clear ### PreviewLive Color preset0 Width (px) _128_ Height (px) _64_ Bits per pixel Paste array text or load a .bin file to see the preview… # Array to Image Converter - Free Online Byte Array Visualizer Instantly convert C arrays, Rust byte arrays, hex dumps, and .bin files into a visual image preview. Supports 1 bpp, 2 bpp, 4 bpp, and 8 bpp packed pixel formats. Perfect for Arduino, ESP32, OLED, TFT, and embedded LCD projects. ## What Is an Array to Image Converter? An **array to image converter** is a developer utility that takes a raw byte array - typically a C-style `uint8_t[]` or Rust `&[u8]` - and reconstructs it into a pixel image you can see in your browser. When you write firmware for an embedded display like an SSD1306 OLED, an ILI9341 TFT, an ST7735 screen, or a custom monochrome LCD, you almost always store graphics as packed hex arrays inside your source code. Debugging those arrays is painful without a visual preview, and that is exactly what this tool solves. This **byte array to image** tool previews row-packed grayscale data at 1, 2, 4 or 8 bits per pixel. Choose the bit order and row direction that match your source. Not all displays store pixels in row order, so a correct-looking preview does not guarantee compatibility with a particular device. For example, an 8×1 image at 1 bpp needs one byte. With MSB-first selected, `0x80` places the high bit at the left edge. Need to create an array from an image instead? Use [Bitmap to Array](https://www.toolcomb.com/bitmap-to-array), then compare its format settings with this preview. Everything runs entirely in your browser. No files are uploaded to any server. The tool works offline once the page has loaded, which matters when you are working in a lab with spotty internet connectivity. ### Key Features of the Byte Array Image Viewer ### Multi-Format Hex Parsing Paste arrays in any common format. The parser automatically strips C-style block comments (`/* */`), line comments (`//`), Rust `pub const` declarations, brackets, and semicolons. It accepts `0xFF` token syntax, bare two-digit hex tokens like `FF`, and plain contiguous hex strings with no delimiters. Whether you copy directly from an Arduino `.h` header, a Rust `include_bytes!` block, or a hex editor, it just works. ### 1 bpp Monochrome Bitmap Support 1-bit-per-pixel is the format used by virtually every OLED display library including Adafruit SSD1306, u8g2, and U8x8. Each byte encodes 8 horizontal pixels. With MSB-first ordering (the default for most OLED drivers), bit 7 of the first byte is the leftmost pixel in the row. Flip to LSB-first to match older display protocols or custom framebuffers. This tool renders your **OLED bitmap array** as a crisp monochrome image so you can verify it before flashing to hardware. ### 2 bpp and 4 bpp Grayscale Some displays - particularly e-ink panels and certain OLED variants - use 2-bit (4-level) or 4-bit (16-level) grayscale. This tool correctly unpacks both formats, mapping index values to evenly spaced gray levels. Use it to preview **grayscale byte arrays** from SparkFun flexible OLEDs, Sharp Memory LCDs, or any 4-bit GLCD framebuffer before you commit to hardware. ### 8 bpp Indexed / Grayscale Full 8-bit grayscale arrays are common in TFT splash screens, e-paper displays, and firmware-stored image assets. At 8 bpp each byte is one pixel, giving 256 gray levels. Combine this with the custom color picker to map those gray levels to any two colors - ideal for previewing **PROGMEM bitmap arrays** for Arduino TFT projects using the TFT_eSPI or MCUFRIEND_kbv libraries. ### MSB / LSB Bit Order Toggle Bit endianness is the single most common source of "scrambled" images on embedded displays. If your image looks like random noise or a mirrored mess, try toggling between MSB-first and LSB-first. MSB-first is standard for most OLED and LCD bitmap arrays. LSB-first is used by some older GLCD libraries and certain Bluetooth/display protocols. This toggle lets you find the correct bit order in one click without writing any code. ### Top-Down and Bottom-Up Row Order Standard BMP files store rows from bottom to top - a legacy of early Windows GDI conventions. Most OLED and TFT framebuffers store rows top-down. If your image appears vertically flipped, simply switch the Row Order toggle from "Top → Bottom" to "Bottom → Top." This is also useful when reverse-engineering arrays from firmware images where the row order is unknown. ### Live Color Effects and Presets Beyond plain monochrome, the tool offers five built-in color presets: classic black-and-white, warm Sepia, retro Amber (like an old VFD or CRT terminal), cool Ice, and technical Blueprint. Each preset remaps the grayscale gradient to a two-color range you can fully customize with the color pickers in Custom mode. Brightness, contrast, and gamma sliders apply in real time, letting you simulate the actual visual appearance of your embedded display. ### .bin File Upload and Drag-and-Drop Not all pixel data lives in source files. Firmware binary blobs, raw SPI captures, and memory-mapped frame buffers often come as binary `.bin` files. Drag and drop any `.bin` file onto the drop zone - the tool reads it with the Web File API and populates the hex display automatically, so you can visualize raw memory dumps from embedded systems, logic analyzer captures, or flash dumps without any conversion step. ### Pixel Grid Overlay Toggle an 8×8 pixel grid over the preview to count and inspect individual pixels - essential when debugging custom fonts or small icon sprites for constrained displays like the 128×32 SSD1306. ### PNG Export Download the rendered image as a PNG file, sized at the exact pixel dimensions of your array. Use it in project documentation, datasheets, pull request screenshots, or to compare against reference images from your display driver. ### Auto Width/Height from Comments If your array includes a comment in the format `// width: 128, height: 64` (generated by tools like image2cpp), the tool parses and applies those dimensions automatically, saving you from having to enter them manually. ### How to Convert a Byte Array to an Image - Step by Step Follow these steps to go from a raw C or Rust pixel array to a visual image preview: 1. **Paste your array or upload a .bin file.** Copy the array contents from your `.h` header, your Rust source file, a hex editor, or a logic analyzer export. Paste it directly into the Array Text box. Alternatively, drag a `.bin` file onto the drop zone or click "Choose .bin." The parser will strip any surrounding C/Rust syntax automatically. 2. **Set the correct width and height in pixels.** These must match the display resolution your firmware is targeting - for example, 128×64 for an SSD1306 OLED, 240×240 for a GC9A01 round display, or 160×80 for an ST7735S. If your array comment includes `width: X, height: Y` the tool fills these in automatically. 3. **Choose bits per pixel (bpp).** Select 1 bpp for monochrome OLED or LCD bitmaps, 2 bpp for 4-level grayscale, 4 bpp for 16-level grayscale (e.g., Sharp Memory displays, some e-ink panels), or 8 bpp for full grayscale framebuffers. The "Expected bytes per row" hint updates instantly to help you verify you have the right setting. 4. **Match the bit order of your display library.** Most libraries including Adafruit GFX and u8g2 use MSB-first. If the image looks like random static or every byte appears bit-reversed, switch to LSB-first. 5. **Set the row order.** Choose "Top → Bottom" for most OLED and TFT drivers. Choose "Bottom → Top" if your image appears upside down, which commonly happens with BMP-originated arrays or certain GLCD driver conventions. 6. **Apply optional color effects.** Select a color preset or switch to Custom mode to pick your own dark/light color pair. Adjust brightness, contrast, gamma, and sharpness to simulate how the image will look on your actual hardware. 7. **Preview and export.** With Live Preview enabled, the canvas updates within 250 ms of any change. Click "Render" to force a manual refresh. When you are satisfied, click "PNG" to download the image at its native pixel resolution for documentation or comparison purposes. ### Common Use Cases: Who Needs a Byte Array Visualizer? ### Arduino and ESP32 Developers Arduino sketches and ESP32 firmware commonly store splash screens, icons, and UI elements as `PROGMEM const uint8_t[]` arrays. Converting these with tools like **image2cpp** is straightforward, but verifying the output - especially when the bit order or row direction is wrong - requires flashing the device, which costs time. This tool lets you verify the array visually in seconds without touching any hardware. It is the fastest way to debug a misaligned **Arduino OLED bitmap** or a scrambled ESP32 TFT image. ### Embedded Systems Engineers When integrating custom graphics into bare-metal firmware for STM32, nRF52, PIC, or AVR microcontrollers, you often receive display assets as raw binary blobs or C arrays from a graphic designer. This tool bridges that gap - drop the `.bin` file or paste the array and instantly see what the display will render, without setting up a full development environment. It also helps with reverse engineering: if you are inspecting an unknown firmware blob, you can try different dimensions and bit depths to identify recognizable shapes. ### LVGL and GUI Framework Users LVGL's online image converter produces C arrays for use in the LVGL embedded GUI framework. These are often 8 bpp or indexed-color formats. If you need to verify the output before integrating it into your LVGL project, paste the exported array here with the matching bpp setting to get an instant visual confirmation. This is particularly helpful when the LVGL image converter's preview does not match what you expect on-device. ### E-ink and E-paper Display Projects E-ink displays from vendors like Waveshare, Good Display, and Pervasive Displays often use 1 bpp or 2 bpp framebuffers with specific byte-packing. Previewing those arrays is tricky because e-ink refresh is slow and you cannot step through frames on a debug monitor. This tool lets you preview each frame of an e-paper animation offline before flashing, dramatically speeding up the graphics iteration cycle. ### Firmware Reverse Engineers When analyzing an unknown firmware binary - from an IoT device, a consumer product, or a legacy industrial controller - you sometimes encounter embedded image assets whose dimensions and bit depths are not documented. This tool's flexible width/height controls and bpp selector make it easy to systematically try different parameters until recognizable images emerge. Upload the suspected image region as a `.bin` file and explore. ### Students and Makers Learning Embedded Graphics Understanding how pixels map to bytes is a foundational skill in embedded programming. This tool makes that relationship tangible. Toggle the bit order and watch the image mirror itself. Change the bpp and see how the byte count per row changes. Adjust the width one pixel at a time and observe how the image shifts when the row stride is wrong. It is an interactive learning tool as much as a practical debugging utility. ### Supported Input Formats and Array Syntaxes The parser is designed to accept the widest possible range of inputs without manual cleanup. Here are all the formats it understands: C / Arduino Header Array `// width: 128, height: 64 static const uint8_t myImage[] PROGMEM = { 0x00, 0x00, 0xFF, 0x81, 0x81, 0xFF, 0x00, 0x00 };` Rust Byte Array `pub const LOGO: &[u8] = &[ 0x00, 0xFF, 0x81, 0x81, 0x81, 0xFF, 0x00, ];` Plain Hex Tokens (no 0x prefix) `00 FF 81 81 81 FF 00 00 00 18 24 42 81 FF 00 00` Contiguous Hex String `00FF818181FF0000 00182442...` Binary .bin File Upload Drag any `.bin` file onto the drop zone. The raw bytes are loaded directly - ideal for SPI captures, memory dump files, or flash read-backs from embedded tools like J-Link, OpenOCD, or esptool. LCD Image Converter / Bitmap2LCD Output Arrays produced by LCD Image Converter, Bitmap2LCD, or dot2pic.com paste directly without any cleanup. The parser strips all surrounding code scaffolding automatically. ### Technical Reference: Bit Packing, Row Stride, and Byte Order ### How 1 bpp Bit Packing Works In a 1-bit-per-pixel framebuffer, each byte encodes 8 consecutive horizontal pixels. For a 128-pixel wide display, each row requires exactly 16 bytes (128 ÷ 8 = 16). A full 128×64 monochrome image therefore occupies 1,024 bytes. With MSB-first ordering, the most significant bit (bit 7) of the first byte in a row represents the leftmost pixel, and bit 0 represents the 8th pixel. With LSB-first, bit 0 is the leftmost pixel. Choosing the wrong bit order produces a horizontally scrambled image where each group of 8 pixels appears reversed. ### Row Stride and Width Padding When image width is not a multiple of the pixel-per-byte ratio, the last byte of each row contains padding bits. For example, a 100-pixel wide 1 bpp image requires 13 bytes per row (⌈100 ÷ 8⌉ = 13), with 4 unused bits at the end of each row. This tool handles that padding correctly by computing the ceiling of width divided by pixels-per-byte, then discarding excess bits during reconstruction. ### Gamma Correction for Display Preview Most embedded displays have a gamma response that differs from a standard PC monitor. The gamma slider (default 1.0, range 0.1–3.0) lets you simulate your display's tone response. Reducing gamma below 1.0 brightens the midtones, which is useful for simulating displays with native gamma lower than 2.2. Increasing it toward 3.0 darkens the midtones, simulating high-contrast displays like unlit e-ink. ### Common Display Resolutions and Expected Array Sizes | Display | Resolution | Bit Depth | Array Size | Bytes/Row | | --- | --- | --- | --- | --- | | SSD1306 OLED | 128×64 | 1 bpp | 1,024 bytes | 16 | | SSD1306 OLED (small) | 128×32 | 1 bpp | 512 bytes | 16 | | SH1106 OLED | 132×64 | 1 bpp | 1,056 bytes | 17 | | ST7735 TFT | 128×160 | 8 bpp | 20,480 bytes | 128 | | ILI9341 TFT | 240×320 | 8 bpp | 76,800 bytes | 240 | | GC9A01 Round | 240×240 | 8 bpp | 57,600 bytes | 240 | | Waveshare e-ink 1.54" | 200×200 | 1 bpp | 5,000 bytes | 25 | | Sharp Memory LCD | 400×240 | 1 bpp | 12,000 bytes | 50 | ### Frequently Asked Questions ### Why does my image look like random noise or static? This almost always means the width or height is wrong. The decoder reads a fixed number of bytes per row based on width and bpp, so if width is even slightly off, every row is shifted relative to the one above it, causing a diagonal stripe or total scrambling. Double-check that your width matches the display resolution exactly. The "Hint: Expected X bytes per row" indicator can help you cross-check against your array's row length. ### My image is a mirror image horizontally. What should I change? A horizontally mirrored image (each group of 8 pixels appears flipped) is the classic symptom of wrong bit order. Toggle from MSB-first to LSB-first (or vice versa) and the image should correct itself. This happens because different display libraries pack pixels into bytes in opposite bit directions. ### My image is upside down. How do I fix it? Switch the Row Order from "Top → Bottom" to "Bottom → Top." This is common with BMP-derived arrays because the BMP file format stores rows from the bottom of the image upward. Most embedded LCD drivers, however, scan top-down, so any array derived from a BMP file without explicit row reversal will appear flipped. ### Can I use this tool with image2cpp output? Yes, absolutely. image2cpp is the most popular **image to C array converter** for Arduino OLED projects. Paste its output directly into the Array Text box. If the output includes a `// width: X, height: Y` comment, the tool auto-fills the dimensions. Select 1 bpp and MSB-first to match the Adafruit GFX default. ### Is my data sent to your servers? No. All processing is done in your browser using the HTML5 Canvas API and the Web File API. No bytes, no arrays, and no images are transmitted to any server. This tool works fully offline once the page is cached, making it safe for use with proprietary firmware or NDA-protected display assets. ### What is the difference between this and Bitmap2LCD or LCD Image Converter? Bitmap2LCD and LCD Image Converter are desktop applications focused on converting images _into_ arrays. This tool does the opposite: it takes an existing array and shows you what it looks like as an image. It is a browser-based, zero-installation reverse visualizer - you do not need to download or install anything. It complements those tools rather than replacing them. ### Can I use this for 16-bit RGB565 color arrays? The current version supports 1, 2, 4, and 8 bpp grayscale formats. RGB565 (16 bpp color) is on the roadmap. For now, if you have an RGB565 array, you can view the raw byte structure using the 8 bpp mode, which will show you the byte values but not the correct colors. ### Pro Tips for Embedded Display Developers - Always include a width/height comment in your array header. Add a comment like // width: 128, height: 64 at the top of your array. This tool will parse it automatically, and it also helps future maintainers understand the asset without needing to count bytes. - Use the bytes-per-row hint to verify your array length. If your total byte count is not exactly (bytesPerRow × height), your data is likely truncated or has extra bytes. Both conditions produce corrupted images with diagonal shifts. - Try all four combinations of bit order and row order systematically. Try both bit and row directions, then verify dimensions, row padding and pixel format. Some display formats use a different layout and cannot be reconstructed by these switches alone. - Use the Pixel Grid overlay for icon and font debugging. When working with small sprite sheets or custom bitmap fonts, enable the 8×8 grid to count pixel positions precisely. This is much faster than zooming into a hex editor. - Export PNG for pull request screenshots and documentation. Attach the exported PNG to your pull request or issue ticket to give reviewers immediate visual context without needing to flash hardware. It is far clearer than pasting raw hex bytes into a comment. ## Related Tools Discover more free tools that might help with your next task. [XML to JSON Convert XML data to JSON format Use Tool](https://www.toolcomb.com/xml-to-json) [CSV to JSON Convert CSV data to JSON format Use Tool](https://www.toolcomb.com/csv-to-json) [YAML to JSON Convert YAML data to JSON format Use Tool](https://www.toolcomb.com/yaml-to-json) [JSON to CSV Convert an array of JSON objects into CSV rows Use Tool](https://www.toolcomb.com/json-to-csv) [Bitmap to Array Convert bitmap images to array data Use Tool](https://www.toolcomb.com/bitmap-to-array) [Timezone Converter Convert time between different timezones Use Tool](https://www.toolcomb.com/timezone-converter) ### Related guides Read the how-to, then come back to this tool when you are ready to run it locally. - [How to Turn a Byte Array Into an Image Preview embedded bitmap arrays in the browser.](https://www.toolcomb.com/blog/how-to-convert-byte-array-to-image) - [How to Convert a Bitmap Image to a Byte Array Pixels to arrays for embedded work.](https://www.toolcomb.com/blog/how-to-convert-bitmap-to-byte-array) [View All Tools](https://www.toolcomb.com/tools)