Image to ASCII

What it's for

Turn a picture into text: each small patch of the picture becomes one character, dense ones such as @ for dark patches and sparse ones such as . for light ones, so the text looks like the picture from a distance.

For example, when you want a picture for a README, a terminal banner or an email signature, make it about 60 characters wide and paste the text into a code block.

How to use it

Choose a picture (or drop or paste one). Characters wide sets the width of the text; the height follows from the picture’s shape. Characters picks the set to draw with, from five simple ones to a detailed set of 70, or My own, typed from lightest to darkest.

Characters are drawn as dark ink on a light background. Tick Light on dark to swap that for a dark background, which suits text pasted into a terminal or a dark page. Tick In colour to colour each character from the picture. Copy text copies the characters alone; Copy as HTML (in colour) copies a <pre> block with the colours; Save as PNG draws the text onto a picture. The settings are remembered.

Example

Choose any photo, then set:

Characters wide: 60 · Characters: Standard (10)

You get about 60 columns of @, %, #, . and spaces, with the dark parts of the photo in the denser characters, and a message giving the size, such as 60 × 30 characters.

Good to know

The result depends on the font it’s shown in: it assumes characters about 0.6 as wide as they are tall, so a proportional font or a different line spacing stretches it. Fine detail and small text are lost at 100 columns or so; simple, high-contrast pictures work best. Transparent areas are treated as white. Very large pictures are shrunk first, and the width stops at 400 characters. The picture doesn’t leave your browser.