gizmobench

ASCII Art Generator

Drop in a picture and it becomes a block of characters. Each cell of the image is averaged to one brightness value and that average picks a character from the ramp, so a dark patch gets a heavy glyph and a bright one gets a light glyph or a space. Two things are yours to set, and they are the two that decide how it looks: the number of columns, anywhere from 8 to 400, and the ramp itself, which you can type over a character at a time or take from the three named ones. The row count is not a free choice, because a monospace character is about twice as tall as it is wide: 100 columns of a 4 by 3 photograph comes out as 38 rows rather than 75, which is what stops the picture looking stretched. The file is read by your own browser, never uploaded, and the output is plain text you can copy or download as a TXT file.

Sourceno picture yet

The picture appears here.

Characterswaiting

The characters appear here.

· or drop one anywhere on the stage

Never uploadedNo accountConverted in this tabPlain text out
Columns
Ramp
Invert

Ten steps of ink, from a solid @ down to a space.

No picture chosen yet. The characters appear here once you add one.

Drop a picture on the stage or choose one. Each block of pixels is averaged to a single brightness and mapped onto the ramp, so the first character of the ramp is the darkest and the last is the lightest; Invert swaps the two ends for light text on a dark background. The preview is scaled to fit the panel, which changes nothing in the text: copy it or download it and every character is the one shown.

  • Pure white pixelbrightest end of the ramp
    a space
  • Pure black pixeldarkest end
    “@”
  • Columns and rowscorrected for glyph aspect
    add a picture to see the grid
Brightness in, characters out, and nothing is guessed. Each block of pixels is averaged to one brightness value and mapped onto the ramp you choose, so the output is exact arithmetic on what the image contains. Row count is corrected by the height-to-width ratio of a monospace character, an approximation that keeps the picture from stretching; the result is plain text and carries no colour. The picture is opened and read inside this tab, and the only thing kept between visits is the column count, the ramp and the invert setting you last used.

Common questions

How does a picture become characters?
The picture is drawn onto a canvas at its own resolution and cut into a grid of cells, one per character. Every pixel inside a cell is turned into a brightness value with the Rec. 601 weights, 0.299 red, 0.587 green and 0.114 blue, and those values are averaged, so a cell that is half black and half white comes out as the middle of the ramp rather than as whichever pixel a sampling point happened to land on. That single average is then scaled across the ramp: brightness 0 takes the first character, brightness 255 takes the last, and everything between is divided evenly among the rest. With the default ramp of ten characters, pure black is @ and pure white is a space.
Why does the output have fewer rows than columns?
Because a monospace character is roughly twice as tall as it is wide, so a grid with as many rows as columns would stretch the picture to twice its height. The row count is worked out as columns multiplied by the height over the width of the picture and then halved: 100 columns of a 4 by 3 photograph is 38 rows, not 75. The preview shows the same correction in its line height, and the numbers are printed under the stage, so you can see the grid you are getting before you copy it.
What ramp should I use for a dark background?
Turn Invert on rather than reversing the ramp by hand. Invert swaps the two ends of whatever ramp is in the field, so the heavy characters land on the bright parts of the picture instead of the dark ones, which is what a page of light text on a dark background needs. The ramp itself always reads darkest first: the Dense ramp is @%#*+=-:. with a space on the end, Blocks is the four Unicode shading blocks and a space, and Minimal is five characters that survive being pasted almost anywhere. You can also type your own ramp of any two or more characters, and it is used exactly as typed.
Is my image uploaded anywhere?
No. There is no server in this. The file is read in the page, decoded by the browser's own image decoder, drawn onto a canvas and read back as pixels, all inside this tab. No image byte is sent to an endpoint, to analytics or to error reporting. The only things written to your browser's storage are the three settings: the column count, the ramp and whether Invert was on. No picture is ever stored, and if storage is blocked the tool still works.
Why is the colour not kept?
Because the output is plain text, and plain text has no colour in it. Every pixel is reduced to one brightness number before a character is chosen, so a red square and a green square of the same brightness become the same character. That is also what makes the result portable: it pastes into a code comment, a chat message, a README or a terminal and looks the same everywhere a monospace font is used. If you want colour, keep the original picture; this tool is for the text version.
What happens to a transparent PNG?
Only the red, green and blue channels are read, so transparency is ignored rather than treated as white. A canvas stores a fully transparent pixel as black, which means the see-through parts of a PNG usually come out as the darkest character in the ramp. If that is not what you want, turn Invert on, or flatten the picture onto a white background before you bring it here.
How big a picture can it take?
There is no limit on the bytes, because nothing is uploaded. The one bound is on pixels: the picture is read in a single pass, so it is capped at 40 million pixels, which is about a 7,000 by 5,700 photograph and larger than most cameras produce. Over that, the tool says so and names both numbers instead of quietly failing. Columns run from 8 to 400; ask for fewer or more and it tells you which bound you crossed.
What can I do with the text once it is made?
Copy puts the whole block on the clipboard, and Download TXT saves it as a UTF-8 text file named after your picture with the grid size in it, so a 100 by 38 conversion of photo.jpg arrives as photo-ascii-100x38.txt. The preview is scaled to fit the panel, which changes nothing in the text itself: every character you download is the one on screen, and the file ends with a single newline the way a text file does. Paste it wherever a monospace font is used and set the line height to about 1.2 times the font size if you want it to look exactly as it does here.
Which image formats work?
Whatever your browser can decode, which today means JPEG, PNG, WebP, GIF and usually AVIF. An animated GIF is converted as the single frame the browser is showing, because a canvas holds one frame at a time. A file that is not a picture, or one that is damaged, is refused by name with what to try instead rather than producing an empty block.

Each block of pixels is averaged to one brightness value and mapped onto the ramp you choose, so the output is exact arithmetic on what the image contains. Row count is corrected by the height-to-width ratio of a monospace character, an approximation that keeps the picture from stretching; the result is plain text and carries no colour.