Image to ASCII Art Converter
Turn any image into ASCII art instantly. Adjust width and choose from multiple character ramps, then copy or download your creation. 100% client-side — images never leave your device.
What is ASCII art? ASCII art is a picture drawn entirely from text characters, where each character stands in for the brightness of one block of pixels. A converter shrinks the image to a character grid, measures the luminance of every cell, and picks a symbol from a ramp ordered dark to light — a dense @ for shadows, a blank space for highlights.
How to Use the ASCII Art Converter
- Load an image — Drag a PNG, JPG, GIF or WebP file onto the drop zone, or click it to browse. The file is read straight into a canvas element in the page — it is never uploaded.
- Set the character width — The slider sets how many characters wide the output is, from 40 to 200. Height is derived from the source aspect ratio and halved, because a monospace cell is roughly twice as tall as it is wide.
- Choose a character ramp — Standard gives 13 brightness levels for photographs, Simple gives 7 for small or low-contrast output, and Block uses the Unicode shading squares. Pick Custom to type your own sequence, darkest character first.
- Match the background you will paste into — Light background maps dark pixels to dense characters, which is right for a white page. Switch to Dark background to flip the ramp so the art reads correctly in a black terminal.
-
Regenerate and check the grid — The preview redraws whenever you move a control, and Generate forces a redraw. The caption underneath reports the source pixel size and the resulting character grid, for example
1200x800 image → 100x33 characters. - Copy or download the result — Copy puts the art on your clipboard as plain text. Download .txt saves a text file named after the source image, with one line per row of characters.
How Image to ASCII Conversion Works
The converter never looks at the original image at full size. It first draws your file into an
off-screen HTML <canvas> at the target character width, letting the browser's own
scaler average neighboring pixels down into one pixel per character cell. The height it draws to is
calculated as:
rows = round(width x (imageHeight / imageWidth) x 0.5)
The 0.5 is aspect correction: a monospace character cell is about twice as tall as it is
wide, so without it every result would look vertically stretched.
Each cell of that shrunken image is then read back with getImageData and reduced to a
single brightness number using the standard luma weighting from ITU-R BT.601, the same weighting used
for the luma channel in analogue and digital television:
luminance = 0.299 x R + 0.587 x G + 0.114 x B
Green carries the largest weight because human vision is most sensitive to it, and blue the smallest. That is why a saturated blue sky often maps to a darker character than an equally bright yellow wall. The brightness value, which lands between 0 and 255, is then scaled onto the ramp: index = floor((luminance / 255) x (rampLength - 1)) In Dark background mode the index is subtracted from the last position, which reverses the mapping so bright pixels get the dense characters instead.
The built-in character ramps
A ramp is simply a string of characters ordered from the one that covers the most ink to the one that covers the least. Longer ramps give finer tonal steps but need a larger, cleaner source image to look good; short ramps read better at small sizes and survive being pasted into places that strip unusual glyphs.
| Ramp | Characters (dark → light) | Levels | Best for |
|---|---|---|---|
| Standard | @#8&o:*=+-:. + space |
13 | Photographs and portraits with smooth gradients |
| Simple | @#+=-. + space |
7 | Logos, icons and narrow widths under 80 characters |
| Block | █ ▓ ▒ ░ + space |
5 | Terminal banners; needs a font with Unicode block glyphs |
| Custom | Whatever you type, darkest first | Your choice | Single-character silhouettes, brand initials, experiments |
Only the Standard, Simple and Custom ramps are true ASCII. The Block ramp uses the Unicode block
elements █ ▓ ▒ ░ (U+2588, U+2593, U+2592, U+2591), so it needs a font that includes
them. If they show as empty boxes where you pasted the art, switch to Standard or Simple.
Choosing a width that actually renders
Width is the single control that decides whether the result is legible. Below about 60 characters only strong silhouettes survive, so crop tight on your subject first. Between 80 and 120 characters is the usual sweet spot: enough detail for a face to be recognizable, still narrow enough to paste into a README, a code comment, or an 80-column terminal without wrapping. Above 150 characters the detail keeps improving but the art will wrap in most places it gets pasted, which destroys the image completely — a wrapped line pushes every following row out of alignment.
Contrast in the source matters as much as resolution. An image where most pixels sit in the middle of the brightness range will map to the middle of the ramp and come out as a flat wash of similar characters. Raising contrast, or converting to black and white first with the Image to Grayscale tool, usually produces a sharper result than simply increasing the width.
Frequently Asked Questions
ASCII art is an image made only of text characters, named after the ASCII character set that originally supplied them. Each character represents the average brightness of a small block of the source image, so a dense character like "@" reads as a dark area and a space reads as white. It predates inline images on the web and is still used for terminal banners, README headers and email signatures.
It draws your image into a canvas at the chosen character width, so each character cell corresponds to one scaled pixel. That pixel's red, green and blue values are combined into one brightness figure using the BT.601 luma weights (0.299R + 0.587G + 0.114B), and the figure is mapped proportionally onto the character ramp. No edge detection or shape matching is involved — it is a pure brightness mapping.
Monospace characters are taller than they are wide, so the converter halves the row count to compensate. That assumes a roughly 2:1 cell, which is true of most terminal fonts but not all. If your result still looks tall or flat, the font you pasted into has a different cell ratio — try a standard monospace font such as Consolas, Menlo or DejaVu Sans Mono, and make sure line-height is not adding extra spacing between rows.
No. The file is read with the browser's own object URL and canvas APIs, and every pixel is processed inside the page. Nothing is sent over the network, so the tool also works with the connection dropped after the page has loaded. The same applies to the .txt download, which is generated locally from a Blob.
Yes. Choose the Custom ramp and type any sequence, ordered from the character that looks darkest to the one that looks lightest — for example "MWN0kx1:. " with a trailing space. Order is what matters, not the specific symbols; if you type them lightest-first the image will come out as a negative. Ending the ramp with a space keeps highlights empty rather than filling them.
Anything the browser can decode works, including PNG, JPG, GIF, WebP and AVIF. Transparent PNG areas are read as whatever the canvas renders behind them, so a transparent background usually maps to the dark end of the ramp — flatten it onto white first if that is not what you want. Very large photographs are fine because the image is scaled down before any per-pixel work happens.
Use ASCII art when the output has to be plain text you can paste into a terminal, a comment or a chat message. Use the Pixel Art Generator when you want an image file with visible chunky pixels and real color. Use Image Dithering when you want a one-bit or limited-palette image that keeps apparent detail through patterning rather than through characters.
Three things usually cause it. Proportional fonts destroy the alignment, so the destination must use a monospace font. Line wrapping at a narrower column than your chosen width shifts every row after the wrap, so reduce the width. And some editors collapse runs of trailing spaces, which erases the highlights on the right-hand side of each line — pasting into a code block or a <pre> element avoids that.
Use Cases
CLI Startup Banners
Turn a project logo into a Block-ramp banner your command-line tool prints on launch, sized to 80 columns so it never wraps.
README and Docs Headers
Drop a text-only masthead at the top of a repository README, where it renders in a code fence on every host without needing an image file.
Plain-Text Email and Forums
Add a signature or illustration to mailing lists, IRC and plain-text newsletters that strip attachments and inline images.
Retro Game and Demo Assets
Generate title screens and sprite mock-ups for roguelikes and terminal games, exporting the grid as text your renderer can read row by row.
Teaching Image Processing
Show a class how RGB collapses to luminance by changing one ramp and watching which parts of a photograph go dark first.
Social Posts and Avatars
Convert a photo to a low-width Simple ramp for a text-only profile bio or a post on a platform where monospace text is supported.