User Rating 0.0
Total Usage 0 times
Paste or type raw data. Non-valid characters are stripped automatically.
Drop file here or click to browse
Presets:
Preview
Your image will appear here
Is this tool helpful?

Your feedback helps us improve.

About

Every JPG file is a grid of pixels encoded as bytes. This tool reverses the abstraction: you supply raw binary (0s and 1s) or hexadecimal values, and the engine maps each byte (or bit) directly onto a canvas pixel grid. In bit-per-pixel mode, a single 0 renders black and 1 renders white. In grayscale mode, each 8-bit byte maps to a luminance value from 0 (black) to 255 (white). In RGB mode, every 3 consecutive bytes define one pixel's red, green, and blue channels. Incorrect byte alignment or dimension mismatch produces visual artifacts or data truncation - the tool warns you when your input length does not evenly fill the specified grid.

The output is a genuine JPEG file produced by the browser's native Canvas encoder at a configurable quality factor Q from 0.01 to 1.0. This is not a renamed text file or a simulated preview. The resulting binary matches the JFIF specification and opens in any image viewer. Useful for forensic data visualization, steganography experiments, embedded firmware inspection, or simply understanding how digital images are constructed at the byte level. Note: JPEG compression is lossy - pixel values in the decoded file may differ from your input by ±1 - 3 levels due to DCT rounding.

binary to jpg hex to image pixel creator binary image generator jpg from bytes raw data to jpeg

Formulas

The core operation converts a linear byte array into a 2D pixel grid. Each pixel's position is derived from its index in the data stream:

row = floor(iW)   col = i mod W

where i = pixel index (zero-based), W = image width in pixels. For grayscale mode, each byte b maps to an RGBA quad:

R = G = B = b,   A = 255

For RGB mode, three consecutive bytes define one pixel:

R = bi,   G = bi+1,   B = bi+2

Binary-to-byte conversion uses standard positional notation:

byte = 7k=0 bitk 27k

Auto-dimension calculation when only total pixel count N is known: W = ceil(N), then H = ceil(NW). Pixels beyond the data length are filled with 0 (black).

JPEG quality parameter Q controls the quantization step in the DCT (Discrete Cosine Transform) stage. Lower Q increases quantization divisors, discarding high-frequency coefficients. The relationship between Q and file size is nonlinear.

Reference Data

Color ModeBytes per PixelChannel MappingValue RangeUse Case
Bit (1-bit)0.125 (1 bit)0 → Black, 1 → White0 - 1Binary visualization, barcodes
Grayscale1Byte → R=G=B0 - 255Firmware dumps, entropy maps
RGB3B1→R, B2→G, B3→B0 - 255 per channelColor data inspection
RGBA4B1→R, B2→G, B3→B, B4→A0 - 255 per channelTransparency-aware renders
JPEG Quality vs File Size Reference
Quality 1.0Maximum fidelity, largest fileArchival, pixel-exact work
Quality 0.8~30% smaller than 1.0General purpose
Quality 0.5~60% smaller than 1.0Web thumbnails
Quality 0.1~90% smaller, heavy artifactsPlaceholder images
Common Binary Patterns
00000000Decimal 0Pure black pixel (grayscale)
11111111Decimal 255Pure white pixel (grayscale)
10000000Decimal 128Mid-gray pixel
11111111 00000000 00000000RGB(255,0,0)Pure red pixel (RGB mode)
00000000 11111111 00000000RGB(0,255,0)Pure green pixel (RGB mode)
00000000 00000000 11111111RGB(0,0,255)Pure blue pixel (RGB mode)
Hex Equivalents
FFDecimal 255White / max channel
00Decimal 0Black / min channel
80Decimal 12850% intensity
FF0000RGB red3-byte red pixel
7F7F7FRGB mid-grayNeutral gray

Frequently Asked Questions

JPEG uses lossy DCT compression. The quantization step rounds frequency coefficients, causing pixel values to shift by ±1-3 levels at high quality and up to ±10-20 at low quality. If you need exact byte-to-pixel fidelity, use PNG export (lossless) or set quality to 1.0 to minimize deviation.
In bit-per-pixel mode, each individual binary digit (0 or 1) becomes one pixel: 0 maps to black (RGB 0,0,0) and 1 maps to white (RGB 255,255,255). In grayscale mode, every 8 consecutive bits are grouped into one byte (0-255), producing 256 shades of gray per pixel. Bit mode produces 8× more pixels from the same binary string.
Excess pixels are filled with zero-value bytes (black). If your data exceeds the grid capacity, it is truncated to fit. The tool displays a warning showing the exact mismatch: how many pixels your data provides versus how many the grid requires. Adjust dimensions or use auto-fit to let the tool calculate optimal square dimensions.
Yes. Switch the input format to Hex mode. Each pair of hex characters (00 - FF) maps to one byte (0-255). For example, hex FF equals binary 11111111 equals decimal 255. Invalid hex characters are stripped automatically. Odd-length hex strings are zero-padded on the right.
The canvas is capped at 4096 × 4096 pixels (16,777,216 pixels). In RGBA mode this requires 67,108,864 bytes of input data. Most browsers allocate canvas memory in VRAM; exceeding available GPU memory may cause a blank export. For typical use (under 1024 × 1024), performance is instantaneous.
Use the file import feature. Drag and drop any file onto the import zone. The tool reads the file's raw bytes via the FileReader API and maps them to pixels using your selected color mode. This is commonly used in forensic analysis to visually identify patterns in firmware, executables, or encrypted data.