ASCII art generator

The banner font here is five rows tall and built in, rather than loaded from a figlet file. That is a size decision: a real figlet font is tens of kilobytes for one typeface, and this page has a JavaScript budget to keep. Five rows is enough to be clearly legible in a terminal or a code comment, which is where these end up. Unsupported characters are dropped and named rather than substituted, because a question mark standing in for a missing glyph reads as though it were part of the text.

ASCII art in this sense goes back to teletypes, where the only way to make a heading was to type characters in the shape of letters. It survives because a plain-text file has no other way to emphasise anything, which is why you still find banners at the top of source files, in terminal splash screens and in the output of command-line tools.

The image side works the other way round. Each output character stands for one sampled pixel, and the character is chosen by brightness from a ramp running dark to light: @ for near-black through to a space for white. Brightness uses the Rec. 601 luma weights rather than an average of the three channels, because the eye is roughly six times more sensitive to green than to blue; a flat average makes blue regions come out far lighter than they look. The pixels are read back off a canvas in the page, so the photograph is never uploaded.

The correction that matters most on that side is aspect ratio. A character cell is about twice as tall as it is wide, so mapping one pixel per character makes everything twice as tall as it should be. Sampling half as many rows as columns fixes it, and it is the single most common thing missing from hand-written converters: the output looks stretched and nobody can quite say why. Inverting matters more than people expect too. The default ramp assumes dark characters on a light background, as on a printed page; paste that into a terminal with a dark theme and the image comes out as a photographic negative.

On what converts well: high contrast with a clear subject. A portrait against a plain background works beautifully at 80 characters wide. A busy landscape becomes noise at any width, because the technique has perhaps ten levels of brightness to work with against the 256 in the original.

A practical note on where both of them break. The output only lines up in a monospace font, where every character is the same width. Pasted into an email, a word processor or most chat apps it becomes a jumble, because those render in a proportional font where an M is wider than an i. Code comments, terminals, README files and anywhere marked as code will be fine.