Image to ASCII Art

How to turn an image into ASCII art

1. Drop a JPG, PNG, WebP or GIF image on the drop zone, or click it to choose one. It is converted immediately with the default settings.
2. Move the Width (characters) slider: more characters give more detail, fewer give a bolder, more abstract look.
3. Pick a Character set: Standard, Detailed (70 characters), Blocks, Simple, Dots, Two characters or Custom. With Custom, type your own characters from lightest to darkest.
4. Tick Invert (light text on a dark background) if the art will be shown on a dark screen, such as a terminal.
5. Tick Color (HTML output) to color each character with the color of the original pixels.
6. Use Copy text, Download .txt or Download .html. Every setting updates the preview instantly.

How the conversion works

The image is first resized so that each character stands for a small block of pixels. Because a character cell in a monospace font is roughly twice as tall as it is wide, the tool uses about half as many rows as a square grid would need; otherwise the art would look stretched vertically. A 1000 × 500 image at 100 characters wide gives 100 × 26 characters.

For each block, the tool computes the relative luminance with the Rec. 709 weights used for sRGB:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Green counts the most because our eyes are most sensitive to it. The luminance picks a character on the ramp: a dark area gets a dense character such as @ or █, a bright area gets a light one such as . or a space. With Invert, the mapping is reversed, because on a black background bright areas must be drawn with the densest characters. Transparent pixels count as paper: white normally, black when inverted.

Choosing a character set

• Standard ( .:-=+*#%@) is the classic ten-step ramp: readable and works in any font.
• Detailed (70 characters) gives the smoothest gradients, best for portraits at large widths.
• Blocks ( ░▒▓█) uses Unicode shading characters for a solid, pixel-like look.
• Simple and Dots give a graphic, minimalist style.
• Two characters ( #) makes a pure silhouette, good for logos.
• Custom accepts any characters, including accented letters and emoji: each user-perceived character, even a multi-part emoji, is kept whole. Start with a space so white areas stay empty.

Tips for good results

High-contrast images with a clear subject and a plain background work best. Crop close to the subject first, and boost the contrast if the photo is dull. Faces need at least 80 to 120 characters to be recognizable. When you paste the text elsewhere, use a monospace font (such as Courier, Consolas or Menlo) and no line wrapping, or the columns won’t line up. In email and chat apps, wrap it in a code block.

The .html file contains the art in a <pre> block with a monospace font; with color on, each run of same-colored characters is a <span> with its color, so it displays anywhere without scripts.