ASCII Art Generator

ASCII art turns an image into plain text: each region’s brightness becomes a character, so a photograph becomes something you can paste into a terminal, a README, or a source-code comment. This generator converts JPG, PNG, GIF, and WebP files entirely in the browser. Nothing is uploaded, and the conversion repeats instantly whenever you change a setting.

How the Conversion Works

The image is first drawn to a canvas and, if it is wider than 800 pixels, scaled down proportionally. The generator then divides that canvas into a grid. With cols columns, each cell is imageWidth / cols wide, and each cell is twice as tall as it is wide to compensate for the shape of monospaced characters. The number of rows is floor(imageHeight / cellHeight).

For every cell, one pixel is read and reduced to a single brightness value using the Rec. 601 luma formula: brightness = 0.299 × R + 0.587 × G + 0.114 × B. That value from 0 to 255 is scaled onto the chosen character ramp with index = round(brightness / 255 × (charsetLength − 1)), and the character at that index is appended. When the invert box is ticked, the brightness is replaced by 255 − brightness first.

Converting to grayscale separately would change nothing, because the luma weights already collapse the three colour channels into one number. The weights themselves matter, though: blue contributes little (0.114) and green contributes the most (0.587), so a saturated blue and a saturated yellow can map to different characters even when a naive RGB average would call them equally bright. That is why green areas of a colour logo usually stay distinctive while red and blue regions sometimes blend together.

Picking a Character Set

Charset	Ramp	Length	Best for
Standard	@%#*+=-:.	10	Small outputs, logos, crisp line art
Detailed	$@B%8&WM#… .	about 70	Photographs and smooth gradients
Blocks	█▇▆▅▄▃▂▁	9	A solid, poster-like texture

Each ramp runs from dark to light, so index 0 is the densest character and the last index is the lightest. A longer ramp means smaller brightness jumps between neighboring characters, which is why Detailed handles gradual shading better than Standard.

Step by Step

1. Drop an image onto the upload area or click it to browse. JPG, PNG, GIF, and WebP are accepted.
2. Set the number of columns with the slider, from 40 to 200. The default is 80.
3. Choose Standard, Detailed, or Blocks.
4. Tick Invert if you want dark areas to become the light characters.
5. Copy the result with the copy button and paste it somewhere that uses a monospaced font.

Worked Example: One Pixel at a Time

Say the sampled pixel of a cell is a mid-grey with R = 128, G = 128, B = 128. The luma value is 0.299×128 + 0.587×128 + 0.114×128 = 128. With the Standard ramp of 10 characters, the index is round(128 / 255 × 9) = round(4.52) = 5, which is the = character. A black cell (brightness 0) maps to index 0, @, and a white cell (255) maps to index 9, a space. With the Blocks ramp the same mid-grey maps to index round(128 / 255 × 8) = 4, the ▄ character.

For a 400×400 image at 80 columns, each cell is 5 px wide and 10 px tall, so the rows come out as floor(400 / 10) = 40. The output is an 80-character-wide block, 40 lines tall.

Tuning Width and Invert

More columns means more detail and a larger block of text; fewer columns gives a bolder, more abstract result that fits narrow layouts. Because the tool samples one pixel per cell, very high column counts on a small image start to show aliasing rather than new detail. Invert is useful whenever the art will sit on a light background, and it is also the quick fix when a light subject on a dark background turns into a mostly blank rectangle.

Two rules of thumb help: start at 80 columns to judge the composition, drop to 40–60 for a banner or an inline comment, and raise toward 120–160 only when the source is a clean, high-contrast graphic. Inverting twice returns the original mapping, so it is safe to toggle while comparing. If the copy button reports success but pastes nothing, the browser may have blocked clipboard access; select the preview text manually and copy from there.

Limitations and Edge Cases

• The output is monochrome; there is no color mode.
• There are no brightness, contrast, or crop controls — prepare the image elsewhere if it needs adjustment.
• Sampling one pixel per cell can drop thin features such as a one-pixel outline, so line art sometimes benefits from a slight blur or a smaller column count.
• Photos with busy texture turn into visual noise; simple, high-contrast subjects convert best.
• Copying uses the clipboard API and falls back to a text selection if the browser blocks it.
• The result is text, so it scales badly on mobile where wrapping breaks the proportions; keep it inside a horizontally scrollable block.

Related Tools

• Image Compressor
• Image to Base64
• ASCII Table