Image to ASCII Art Converter

About this tool

ASCII art draws a picture using ordinary text characters: dense characters such as @ and # stand in for dark areas, and light ones such as . and spaces for bright areas. This converter does it automatically — it shrinks your image to a grid, measures how bright each cell is, and swaps each cell for a character of matching density. The image is processed in your browser with the Canvas API and is never uploaded.

How to use the Image to ASCII Art Converter

1. Choose an image. Photos work, but high-contrast pictures — logos, silhouettes, line art, portraits against a plain background — give the clearest results.
2. Set the width in characters. Around 60–80 fits a code comment or chat message; 150 or more keeps far more detail but needs a wide window to view.
3. Pick a character set and tick Invert if the art will be shown as light text on a dark background, such as a terminal.
4. Copy or download the result. Paste it somewhere that uses a monospaced font, or the shape will be distorted.

How the conversion works

First, the image is resized to the width you chose, in characters. Characters are roughly twice as tall as they are wide, so the height is halved to stop the picture looking stretched: an 800 × 600 pixel photo at 100 characters wide becomes 100 × 38 characters (600 ÷ 800 × 100 × 0.5 = 37.5, rounded to 38). Each cell's brightness is then worked out from its red, green and blue values, weighted the way the eye perceives them — green counts most and blue least (0.299 R + 0.587 G + 0.114 B). Transparent areas are treated as white. Finally, the brightness from 0 (black) to 255 (white) is split into as many equal bands as there are characters in the set, and each cell gets the character for its band.

Choosing a character set

• Standard uses ten characters from @ (darkest) to a space (lightest). It reads well at small sizes and pastes cleanly almost anywhere.
• Detailed uses a 70-step ramp of letters, digits and punctuation for smoother shading in photos. It looks best at larger widths.
• Blocks uses the shade characters █ ▓ ▒ ░. They give a bold, pixel-art look, but they aren't in the original ASCII set, so a few older systems may not show them.
• Binary draws the image with ones and zeros, for a "matrix" style effect.

Worked example

Take a black logo on a white background, 800 × 600 pixels, at 100 characters wide with the Standard set. The output is 38 lines of 100 characters. Cells that land fully on the black logo have brightness 0 and become @; the white background has brightness 255 and becomes a space; the anti-aliased edge pixels fall in between and become characters such as +, = and :, which gives the outline a smooth edge. Tick Invert for a terminal with a black background, and the mapping flips: the logo turns into spaces and the background fills in with @, so the logo appears in the background colour.

Getting better results

• Crop tightly around the subject first — empty background just adds lines of spaces. The Image Resizer can help.
• Increase the contrast of a flat photo before converting; mid-grey areas all map to similar characters.
• Match Invert to where you'll show the art: off for dark text on a light page, on for light text on a dark terminal.
• View the result in a monospaced font such as Consolas, Menlo or Courier. Proportional fonts make the columns drift out of line.

Common uses

• Banners for a README, a command-line tool or a code comment
• Email signatures and forum posts that only allow plain text
• Fun text versions of a pet photo, a logo or a portrait

Which brightness becomes which character

With the Standard set, the 256 possible brightness values are split into ten equal bands, and each band gets one character. These are the exact ranges the converter uses, before Invert is applied:

A mid-grey pixel such as rgb(140, 140, 140) lands on =, and anything from 231 up to pure white becomes a space. With Invert on, the brightness is flipped (255 minus the value) before the lookup, so white becomes @. The Detailed set works the same way with 70 narrower bands, and Binary uses three: 1, 0 and a space.

Is it really ASCII?

ASCII defines 128 codes, of which 95 are printable: the space plus the 94 visible characters from ! to ~. The Standard, Detailed and Binary sets use only those characters, so the output survives any system that handles plain text. The Blocks set is different: █ ▓ ▒ ░ are Unicode characters U+2588 FULL BLOCK, U+2593 DARK SHADE, U+2592 MEDIUM SHADE and U+2591 LIGHT SHADE, from the Block Elements range. They need UTF-8 or another Unicode encoding. The downloaded .txt file is saved as UTF-8, but a program that assumes an older single-byte encoding will show them as garbled symbols.

Pasting the result without breaking it

• GitHub README or Markdown: wrap the art in a fenced code block (a line of three backticks before and after). Outside a code block, Markdown collapses repeated spaces and the picture falls apart.
• Chat apps: most support a code or monospace block with the same backtick syntax. Plain messages use a proportional font.
• HTML pages: put the art inside a <pre> element, which keeps spaces and line breaks and uses a monospaced font by default.
• Trailing spaces are trimmed from the end of each line. Lines can end at different lengths, so if you need a perfect rectangle (for example, to put a border around it), pad the lines back out to the full width.

To shrink or crop the source image first, use the Image Resizer.