CodeKitHubWhat Is This Tool?
This tool samples your image on a grid, measures the brightness of each cell, and replaces it with a character from a ramp that goes from "empty-looking" (space, period) to "dense-looking" (@, #, a solid block). By default it maps brighter areas to denser characters and darker areas to sparser ones — since the output is light text on a dark box, that's what makes bright parts of your photo actually look bright and dark parts blend into the background.
This is different from the text-based ASCII Art Generator on this site, which turns typed words into large block letters (a FIGlet-style banner). This tool goes the other direction — it takes a real photo or image file as input, not typed text.
Why Use It?
- Turn any photo into shareable, plain-text ASCII art in one click.
- Adjustable output width and three character sets (detailed grayscale ramp, simple 7-character ramp, or Unicode block shading) for different looks.
- Invert option for pasting into light-background contexts.
- 100% private — the canvas processing happens locally, your photo is never uploaded.
- Free, no sign-up, no watermark.
How to Use
- Click the upload area or drag in a JPG, PNG or WebP image.
- Set the output width (in characters) — higher numbers give more detail but a wider result.
- Pick a character set: Detailed for smooth gradients, Simple or Blocks for a bolder look.
- Turn on Invert if you're going to paste the result somewhere with a light background.
- Click Copy to grab the plain-text result.
Example
Input
A photo of a single bright white circle on a black background, 100 characters wideOutput
Mostly blank/space characters around the edges, with a dense cluster of @ and # characters forming the circle's silhouette in the middleThe exact characters depend on the image's real brightness values — this is a description of the pattern, not literal output, since every source photo produces a different result.
Practical tips
- High-contrast photos (a clear subject against a plain background) convert far more recognizably than busy, low-contrast scenes.
- 100-150 characters wide is the sweet spot for most uses — wide enough for real detail, narrow enough to still fit on a normal screen.
- If the output looks inverted from what you expect (subject looks like a light silhouette instead of dark), toggle the Invert checkbox rather than trying a different image.
- "Blocks" character set often reads better than "Detailed" at very small output widths, since a handful of shading levels stays more visible than dozens of thin characters.
How this differs from text-to-ASCII-art
If you're trying to make a banner out of typed text (a project name, a word) rather than convert a photo, the ASCII Art Generator on this site does that instead — it uses FIGlet fonts to draw block letters, and doesn't process images at all.
The two tools are commonly used together: a FIGlet banner as a title, followed by an image converted with this tool as a visual underneath it, both as plain text that survives being pasted into a code comment or plain-text README.
Frequently Asked Questions
Why does my ASCII art look squashed or stretched?
Monospace character cells are roughly twice as tall as they are wide, so converting pixel-for-pixel would squash the image vertically. This tool already corrects for that by sampling fewer rows than a 1:1 pixel grid would suggest — if it still looks off in the place you paste it, that destination may be using a non-monospace font.
Does the character set choice actually matter?
Yes. "Detailed" uses dozens of characters for smooth gradients and reads best at a distance or when zoomed in. "Simple" (7 characters) and "Blocks" (Unicode shading blocks) give a bolder, more graphic look with visible banding between brightness levels — better for a stylized effect than a photorealistic one.
When should I use Invert?
By default, bright areas of your photo become dense characters and dark areas become sparse ones — which looks correct in this tool's dark output box (light text on a dark background). If you paste the result into a white document or light-themed app, turn on Invert so dark image areas map to dense characters instead (dark ink on a light page), keeping the art legible.
What's the ideal output width?
100 characters is a good default for viewing in a browser or terminal without horizontal scrolling. Going much higher (200+) captures more detail but the result becomes wider than most screens, and very low widths (under 40) lose most recognizable detail.
Is my photo uploaded anywhere?
No. The image is decoded and sampled using the Canvas API directly in your browser. Nothing is sent to a server at any point.