Image to ASCII Art — Free, In-Browser

The converter decodes your image into a local HTMLCanvasElement and reads its pixels with getImageData. From there the pipeline is three deterministic steps, each run for every output cell:

1. Block-average the source pixels covered by the cell. The output grid is cols × rows; for a cell at (cx, cy) we average every source pixel in the rectangle from (cx × width/cols, cy × height/rows) to ((cx+1) × width/cols, (cy+1) × height/rows). Averaging preserves shading detail much better than nearest-neighbour sampling, which is what most browser-based ASCII converters use.
2. Compute perceptual brightness using the ITU-R BT.709 luma coefficients — Y = 0.2126R + 0.7152G + 0.0722B. These are the same weights every browser, Photoshop, and video pipeline uses for sRGB → greyscale conversion, derived from the spectral sensitivity of the human eye to red, green, and blue. Optional brightness and contrast offsets are then applied around mid-grey (128) before clamping to the 0–1 range.
3. Pick a character from the active ramp. The ramp is ordered light → dark, so for a normalised luminance L ∈ [0, 1] the index is floor(L × ramp.length), clamped to ramp.length − 1 at the bright end. When Inverted is on, the index becomes floor((1 − L) × ramp.length), which is the right pick for output rendered on a dark background.

The four built-in ramps come from Paul Bourke's ASCII art reference and a small set of Unicode block characters. Each ramp lists the glyphs ordered by perceived ink density — a space at the light end, a heavy character (@, █, or $) at the dark end — so longer ramps map more tonal levels but at smaller per-glyph differences.

A monospace cell is roughly twice as tall as it is wide. The tool builds the output grid using a 0.5character aspect factor so the rendered ASCII keeps the image's proportions in a regular line-height: 1 block. For 24-bit colour output, the same block-average that produces the brightness also supplies the cell's RGB; each glyph is wrapped in a coloured span (HTML) or an ANSI truecolor escape (terminal).

As a self-check, the tool compares the mean luminance of the source pixels to the mean ramp-position of the picked characters (after undoing any Invert). A correctly-implemented converter keeps the difference within one quantisation step — about ±5% for the 10-char ramp, tighter for 70-char. That delta is shown next to the output so you can verify the maths without having to take it on faith.

• ITU-R BT.709 — Parameter values for the HDTV standards (luma coefficients)
• Paul Bourke — Character representation of grey-scale images (ASCII art reference)
• MDN — CanvasRenderingContext2D.getImageData()
• WCAG 2.2 — Relative luminance (sRGB-to-linear pipeline reference)

The luma formula and density ramps in this tool were last cross-checked against the ITU-R and Bourke references on 2026-05-11. The page is reviewed whenever ITU-R ships a successor to BT.709 for SDR content, or browsers expose wide-gamut canvases by default.