Turn a picture into text characters
Remember terminal art? The little portraits people stuck in email signatures and README files, built entirely out of @, #, and a few dots. This makes those. Drop in a photo, and it rebuilds the image using monospace characters where dark pixels become heavy glyphs and bright pixels fade to spaces.
Here’s the trick behind it. The image gets drawn onto a tiny canvas, shrunk down to whatever character width you pick. Then each pixel’s luminance gets measured and mapped to one character on a ramp that runs from dense to sparse. A black pixel becomes @. A near-white one becomes a blank space. String those together row by row and the shape of the original photo emerges in plain text.
Everything stays on your machine. No upload, no queue, no server doing the math. The canvas reads pixel data right in the browser, so a meme, a screenshot, or a private photo never leaves your device.
Working the controls
- Drop an image onto the box or click to browse.
- Drag the width slider. More columns means finer detail and a bigger block of text.
- Switch between the standard ramp (
@%#*+=-:.) and blocks (█▓▒░), which leans on shaded box characters for a smoother look. - Flip invert if you plan to paste onto a dark background.
- Copy it to your clipboard or grab a .txt download.
The output refreshes the moment you move a slider or toggle an option. No render button to hunt for.
A few things worth knowing
High-contrast images convert best. A logo, a face against a clean background, or a black-and-white sketch turns out crisp. A busy landscape with subtle gradients can read as mush, so bump the width up or crop tighter before you start.
Width controls everything. At 60 columns you get a chunky, retro feel that fits in a chat message. Push it to 180 and you’ll see eyelashes and texture, but the text block gets wide enough that it only looks right in a full editor.
That invert toggle matters more than it sounds. The standard ramp assumes dark characters on a light page, like a printed document. Paste the same art into a black terminal and it’ll look like a photo negative. Flip invert and the tones snap back to normal.
About the proportions: monospace characters are taller than they are wide, roughly two to one. The tool squashes the row count to roughly half so circles stay circular instead of stretching into ovals. It’s a small correction that keeps faces from looking long and weird.
Questions people ask
Does my image get uploaded anywhere?
Nope. The picture loads into a canvas element in your browser and the pixel reading happens in JavaScript on your device. Nothing gets sent out.
Why does my art look squished or stretched?
Almost always a font issue. ASCII art only lines up in a true monospace font like Courier, Consolas, or JetBrains Mono. Paste it somewhere using a proportional font and every row drifts out of alignment.
What’s the difference between standard and blocks?
Standard uses punctuation and letters for a classic typewriter vibe. Blocks uses Unicode shading squares (█▓▒░), which fill space more evenly and give you a smoother, grayscale-like gradient. Blocks usually looks better for photos; standard looks more “hacker.”
Can I use the result in a code comment or README?
Yep, that’s a popular use. Download the .txt, paste it into a fenced code block, and it renders fine on GitHub and most editors since they default to monospace.
What image formats work?
Anything your browser can draw: PNG, JPEG, WebP, GIF, BMP, even SVG. Transparent PNGs get treated as if they sit on a white background so the edges don’t turn into solid characters.
How big should the width be for a chat message?
Stick to 60 to 80 columns. Slack, Discord, and most chat boxes wrap longer lines, which scrambles the art. Save the 150-plus widths for documents and editors.