Binary to Image: Draw Bits or Hex Bytes as a PNG
Draw binary digits or hex bytes as pixels in your browser: 1 bit per pixel with your own colours, 8-bit greyscale or 24-bit RGB. Set the width and scale, then download a PNG. Nothing is uploaded.
There are no pixels to draw yet.
About Binary to Image
Binary to Image draws binary digits or hex bytes as pixels and lets you save the result as a PNG. It is a quick way to see what a block of raw data looks like: a monochrome bitmap, a bitmap font glyph, a sensor dump or the pixels of an uncompressed image. Choose how the data maps to pixels, set the width, enlarge the preview with the pixel scale and download the picture. Everything runs in your browser; your data is never uploaded.
How to use it
Steps
- Choose the Input: Binary digits (0 and 1) or Hex bytes (two hex digits per byte). Spaces and line breaks are ignored, so pasted dumps work as they are.
- Choose the Pixel format: 1 bit per pixel, 8-bit greyscale or 24-bit RGB.
- Enter the Width in pixels, or leave it empty to let the tool pick a roughly square shape.
- Move Pixel scale to enlarge the preview. Each data pixel becomes a sharp square block.
- In 1 bit per pixel mode, pick the colours for 1 and 0. Then press Download PNG.
Privacy
The pixels are computed in your browser and the PNG is made by the browser's own canvas. Nothing is sent to a server and nothing is kept once you close the tab.
The three pixel formats
1 bit per pixel
Every bit is one pixel: 1 in the foreground colour (black by default) and 0 in the background colour (white by default). This is how monochrome bitmaps, old icon formats, bitmap fonts and QR code matrices store their pixels. Hex bytes are split into bits with the most significant bit first, so a5 draws 10100101.
8-bit greyscale
Every byte is one pixel, from 0 for black to 255 for white. Binary digits are grouped eight at a time into bytes, most significant bit first; if the last group is short, it is padded with zeros and the page says so.
24-bit RGB
Every three bytes are one pixel: red, green and blue, each from 0 to 255. This matches raw RGB frame buffers and many embedded display formats. One or two bytes left over at the end cannot make a pixel and are ignored, with a note.
Width, scale and limits
Raw data has no width of its own, so the same bytes can look like noise at one width and a clear picture at another. If you see diagonal stripes, the width is off by a few pixels; try the width of the original image. Pixels fill each row from left to right, and any cells after the last pixel are transparent. The width can be 1 to 4,096 pixels and the input up to 4,194,304 pixels. The pixel scale goes from 1 to 32 and is lowered automatically so that the enlarged picture stays within 8,192 pixels a side.
Related tools
To turn text into the binary or hex you can draw here, use Text to Binary. To change the PNG into JPG, WebP or another format, open the Image Converter.
Open-source credits
- The pixel decoder is written for this site and uses no third-party library.
- Drawing and PNG export use the browser's built-in canvas element from the WHATWG HTML standard; the file it writes follows the W3C PNG specification.
Frequently asked questions
How are binary digits turned into an image?
In 1 bit per pixel mode each digit is one pixel: 1 is drawn in the foreground colour and 0 in the background colour. Pixels fill each row from left to right and then move to the next row, so the width you choose decides where each row breaks.
Which mode should I use for hex data?
Use 24-bit RGB when every three bytes are a red, green and blue value, as in raw pixel dumps. Use 8-bit greyscale when each byte is a brightness from 0 (black) to 255 (white). Use 1 bit per pixel to see every bit of a bitmap font, a QR matrix or a monochrome icon.
Why does my picture look skewed or striped?
The width is probably wrong. Raw data does not store its width, so the tool guesses a square. If the source image was 64 pixels wide, enter 64; a wrong width shifts every row and turns shapes into diagonal stripes.
Does the pixel scale change the downloaded PNG?
Yes. The PNG is saved at the scale shown, with every data pixel drawn as a sharp square block. Set the scale to 1 for a file with exactly one image pixel per data pixel.
Is my data uploaded to make the image?
No. The pixels are computed and drawn in your browser, and the PNG is created there by the browser's canvas. Nothing is sent to a server and nothing is kept after you close the tab.