devwithcoffee

Image to ASCII Art Converter

Turn a photo, or your live camera, into text. Pick the characters, set the width, then copy the result or save it as a PNG, video or GIF. Everything happens in your tab.

Runs in this tab. Your image, camera feed and recordings are never uploaded. You can also drop an image on the preview, or paste one.

How image to ASCII conversion works

The image is shrunk until it has one pixel for every character in the output. Each pixel’s brightness then picks a character from a list ordered from empty to dense: a space for the darkest pixels, an @ or $ for the brightest. Your eye blends the rest back into a picture.

Two details decide whether the result looks good:

Which style to use

Getting a clean result

Pick a photo with one clear subject and a plain background. Crop tight on a face before you upload it. If the subject melts into the background, raise the contrast. With the camera, face a window or a lamp, because a lit face against a dark room gives the strongest image.

Frequently asked

How do I convert an image to ASCII art?

Upload a photo, drop it on the preview, or paste it from your clipboard. The ASCII version appears straight away. Move the width slider until the subject reads clearly, then copy the text or download it as a .txt or PNG.

Is my photo or camera feed uploaded anywhere?

No. The conversion runs in JavaScript inside your tab, and the page has no server code that could receive an image. You can check: open devtools, watch the Network tab, and use the tool. Or load the page, turn off your internet, and carry on using it.

Can I record ASCII art as a video or GIF?

Yes. Press Record video or GIF, and the camera starts recording as ASCII art. You can change the style, width or colour while it records, and the changes appear in the clip. A clip can run up to 30 seconds. When you stop, you can download a video, a GIF, or both. The video is an MP4 where your browser can make one, and a WebM where it can't. The GIF keeps the first 10 seconds, and both carry a small site mark.

Why does my ASCII art look broken when I paste it?

It needs a monospace font, where every character has the same width. Chat apps and documents usually use proportional fonts, so the columns slide out of line. In Discord, Slack, GitHub or Markdown, wrap the art in triple backticks. In Word or Google Docs, set the font to Courier New or Consolas and turn line wrapping off.

What width should I use?

Use 40 to 60 characters for chat, where messages have length limits and screens are narrow. Use 80 to 100 for a README or a code comment. Use 150 or more for a PNG, where you want the detail and nobody has to fit it in a text box.

Why does ASCII art look like a negative on a white background?

Dense characters like @ cover more of their cell. On a dark background that reads as bright. On a white background the same text reads as dark, so the picture flips. Tick Dark on light before you copy, and the mapping reverses.

Is the Blocks style real ASCII?

Strictly, no. ASCII has 95 printable characters, and shade blocks like ░ and █ are Unicode. They give the smoothest result and paste fine almost everywhere today. Use Detailed or Classic if the text must be pure ASCII, for example in an old terminal or a source file.


Built by Himanshu Srivastava, a backend engineer in Bengaluru. For more that runs entirely in your browser, try the JWT decoder or the cron expression explainer, or see all the tools. To build your own, read how to convert an image to ASCII art in JavaScript.