User Rating 0.0 β˜…β˜…β˜…β˜…β˜…
Total Usage 0 times
Hex pairs without separators or with spaces/commas
Drop file here or click to browse Max 10 MB
Leave empty for auto (square)
Presets:
PNG preview will appear here
Input Bytes0
Pixels0
Dimensions0 × 0
Discarded0
Mode-
Is this tool helpful?

Your feedback helps us improve.

β˜… β˜… β˜… β˜… β˜…

About

Raw binary data has no inherent visual form. This tool maps byte sequences directly to pixel values on a canvas, then exports the result as a lossless PNG file. In grayscale mode, each byte (0 - 255) becomes one pixel’s luminance. In RGB mode, every 3 consecutive bytes define one pixel’s red, green, and blue channels. RGBA requires 4 bytes per pixel, adding an alpha (transparency) channel. The image width is either auto-calculated as the nearest integer square root or set manually; height is derived as h = ceil(N Γ· w), where N is total pixel count and w is width.

Forensic analysts use byte-to-image visualization to detect patterns in firmware, encrypted payloads, and file entropy. A region of uniform color indicates low entropy (compressed or zeroed data). High-frequency noise suggests encryption or randomness. Incorrect color mode selection will shift pixel alignment and produce a skewed image. This tool accepts hex strings, comma-separated decimals, base64-encoded data, and raw binary files up to 10 MB. Output PNG uses lossless compression, preserving every byte’s exact value for round-trip fidelity.

bytes to png binary to image hex to png byte visualization raw data converter pixel art from bytes binary image generator

Formulas

Pixel count N depends on byte count B and bytes-per-pixel bpp:

N = floor(Bbpp)

Where bpp = 1 for grayscale, 3 for RGB, 4 for RGBA.

Auto-width calculation uses the integer square root:

w = ceil(√N)

Image height derived from width:

h = ceil(Nw)

For grayscale-to-RGBA canvas mapping, each byte v at index i maps to 4 canvas bytes:

data[4i] = v,   data[4i + 1] = v,   data[4i + 2] = v,   data[4i + 3] = 255

For RGB mode, bytes at positions 3i, 3i+1, 3i+2 map to R, G, B channels with alpha fixed at 255. RGBA mode maps 4 consecutive bytes directly to the canvas ImageData buffer.

Variable legend: B = total input byte count, bpp = bytes per pixel, N = total pixel count, w = image width in pixels, h = image height in pixels, v = byte value (0 - 255), i = pixel index, data = canvas RGBA pixel buffer.

Reference Data

Color ModeBytes per PixelChannelsUse CaseMax Pixels from 1 KB
Grayscale1LuminanceEntropy visualization, firmware analysis1024
RGB3R, G, BColor data mapping, art generation341
RGBA4R, G, B, ATransparency data, icon extraction256
Input FormatExampleEncodingTypical Source
Hex StringFF00A3B2Base-16 pairsHex editors, memory dumps
Decimal CSV255,0,163,178Base-10 valuesSensor data, serial output
Base64/wCjsg==6-bit ASCII groupsWeb APIs, email attachments
Binary File(raw bytes)8-bit octetsFirmware, executables, images
Byte Value (Decimal)HexGrayscale AppearanceBinary
000Black00000000
3220Very dark gray00100000
6440Dark gray01000000
9660Medium dark gray01100000
12880Medium gray10000000
160A0Medium light gray10100000
192C0Light gray11000000
224E0Very light gray11100000
255FFWhite11111111

Frequently Asked Questions

Grayscale uses 1 byte per pixel, so byte N maps to pixel N. RGB uses 3 bytes per pixel: bytes 0-2 form pixel 0, bytes 3-5 form pixel 1, and so on. If your data was originally RGB but you select grayscale, each channel byte renders as a separate gray pixel, tripling the pixel count and producing a meaningless pattern. Always match the color mode to your data's actual structure.
In RGB mode, if the byte count is not divisible by 3, the trailing 1 or 2 bytes are discarded. In RGBA mode, remainders of 1-3 bytes are dropped. Grayscale has no remainder issue since each byte is one pixel. The tool reports the exact number of bytes used and any discarded remainder.
Compiled machine code and encrypted data have high entropy, distributing byte values nearly uniformly across 0-255. This produces visual noise. Sections of repeated values (like zero-padded regions) appear as solid color bands. This contrast between noise and solid regions is actually useful for binary analysis. Structure in the image reveals structure in the file.
The tool accepts up to 10 MB of input data. A 10 MB file in grayscale mode produces approximately 10,485,760 pixels, requiring a canvas of roughly 3238 Γ— 3239 pixels. Most browsers handle this without issue. Canvas rendering is synchronous and typically completes in under 200 ms for files up to 5 MB. For hex string input, the character limit is approximately 20 million characters (10 million byte pairs).
Yes, if you used lossless PNG (which this tool always produces). Open the PNG in any tool that reads raw pixel data, extract the RGBA values, and reconstruct the byte stream using the same color mode. Grayscale: take the R channel. RGB: take R, G, B channels. RGBA: take all four. Be aware that trailing padding pixels (filled with zeros) will be appended if the original data didn't perfectly fill the last row.
The scale factor uses nearest-neighbor interpolation (CSS image-rendering: pixelated) to enlarge the preview. The actual PNG file is exported at native resolution (1 pixel per data pixel) regardless of the preview scale. This ensures every byte maps to exactly one pixel in the output file. The scale slider only affects on-screen display for visibility.