Image to ASCII Art Converter

What the converter is actually doing

Every character in the output stands for one rectangular block of your picture. Set the width slider to 100 and the photo is drawn once onto an off-screen canvas exactly 100 pixels across, with the browser's high-quality downscaling averaging every source pixel that falls inside a block. One pixel of that miniature becomes one character.

The brightness of that averaged pixel is measured with the classic luma weighting — 0.299 × red + 0.587 × green + 0.114 × blue. Green carries more than half the weight because the eye is far more sensitive to green light than to blue. That single number, 0 to 255, is the only thing that picks the glyph. Anything close to fully transparent is skipped and left blank, which is what keeps a cut-out PNG's background empty instead of filling it with punctuation. That single substitution — brightness traded for the visual weight of a character — is the whole of ASCII art, and our guide to how ASCII art works follows the rest of the consequences, including why the output arrives stretched and why photographs come out as mush.

The ramp, and why its order is the whole trick

A ramp is a string of characters sorted by how much ink they put on the page. The Standard set is @%#*+=-:. followed by a space: @ is the densest glyph available, the space is nothing at all. Brightness is scaled to a 0–1 range, multiplied by the number of steps in the ramp and rounded, so a dark block lands near the start of the string and a bright block near the end. Reverse the order and you get a photographic negative — which is exactly what the Invert switch does deliberately, and why choosing a dark background turns it on for you: on a dark card the densest characters are the ones that read as bright.

A worked example. A block that averages out to rgb(217, 72, 31) has a luma of 0.299 × 217 + 0.587 × 72 + 0.114 × 31 = 110.68, which is 0.434 of full brightness. On the ten-step Standard ramp that is round(0.434 × 9) = index 4, a +. On the 70-step Detailed ramp the same block lands at round(0.434 × 69) = index 30, a z. Same pixel, different vocabulary — and that step count is the entire difference between the four sets. A long ramp has enough intermediate tones to render a gradient smoothly and reads as a photograph; a short one quantises everything into a handful of values and reads as a poster.

Every set ends with a space — the lightest "character" there is.

Why the picture would come out stretched if the tool ignored the font

This is the step that separates ASCII art that looks right from ASCII art that looks like a funhouse mirror. A monospace character cell is not square: the glyphs all share one advance width, but the line they sit on is roughly twice as tall as that width. If the converter simply matched the grid to the photo — a 1600 × 1200 image at 120 characters wide becoming 120 × 90 — every one of those 90 rows would then be printed on a cell twice as tall as it is wide, and the finished picture would be twice as tall as it should be. Faces turn into totem poles.

So the code carries a constant, CHAR_ASPECT = 0.5, and computes the row count as columns × (height ÷ width) × 0.5. That same 1600 × 1200 photo at 120 characters wide becomes round(120 × 0.75 × 0.5) = 45 rows, not 90 — each row covering twice as much of the original as a column does. The factor is then used again in the other direction when the result is drawn: the line height is set to the measured glyph advance divided by 0.5, i.e. exactly two times the character width. Because that advance is measured from the font that is really rendering rather than assumed, the geometry survives into the PNG export as well as the on-screen text, and a circle in the photo stays a circle.

Which pictures survive the trip

The conversion throws away colour, most of the tonal range, and every detail finer than one block. What is left has to carry the image alone, so the source matters more than any setting.

• High contrast wins. A subject clearly lighter or darker than what is behind it gives the ramp something to work with. A flat, evenly-lit photo maps into the middle of the ramp and comes back as a rectangle of one repeated character.
• A clear silhouette beats a clever composition. If you would recognise it as a small black-and-white thumbnail, it will convert. If not, it will not.
• Plain backgrounds. A busy background is converted with the same enthusiasm as your subject and the two dissolve into each other. Cut the subject out first if you can — transparent pixels become blank space and frame it for free.
• Fine texture turns to mush. Hair, foliage, knitwear and small lettering all average out to a flat mid-tone. A detail that matters needs to be several characters wide.
• Reach for Contrast before blaming the photo. That control multiplies each pixel's distance from mid-grey (128) before the ramp is consulted; Brightness adds a flat offset afterwards. Around 1.5× contrast with brightness eased down is the standard rescue for a washed-out image.

Picking a width

The slider runs from 40 to 200 characters, and it decides both how much detail is possible and where the result can go. At 40–60 you get something avatar-scale that drops into a chat message without wrapping. At 80–100 — the default is 100 — you have the classic terminal width, right for a README banner or a plain-text file. Above about 120 you are making a picture rather than a block of text: still perfect in the PNG export, too wide to paste anywhere lines wrap. The total cell count is capped, so a tall narrow banner at 200 characters is scaled down as a whole rather than allowed to freeze the tab.

Where ASCII output actually holds up

Text art only holds its shape in a monospace font. The picture is a grid, and the grid only exists while every character occupies the same width. Paste it into a plain-text file, a code comment, a terminal banner or a README code block and it lands exactly as you saw it here. Paste it into a word processor, a listing description or most website body copy — proportional fonts, where i is far narrower than m — and every row ends somewhere different. There is no fixing that on the text side; it is a property of the font, not of the art.

Which is what the PNG export is for: each character is painted into a fixed cell, so the picture is locked into pixels and can go wherever an image can. In Original colour mode every glyph is tinted with the average colour of its own block, so the file reads as a photograph from across the room and as text up close. If you are matching those colours to a brand palette, the colour code converter gives you the HEX values to reuse, and anything headed for print is worth checking against our print-on-demand image requirements first.