Image to ASCII Art

10960
10960

Upload image to automatically generate ASCII art

Free online image-to-ASCII art converter. It uses in-browser Canvas pixel sampling, BT.709 grayscale weighting (Y = 0.2126R + 0.7152G + 0.0722B) and Floyd-Steinberg dithering to map every block of pixels to a character. Pick from 3 built-in character ramps (simple, detailed, blocks) or define your own with any length, toggle color mode, lock the aspect ratio, then copy the result to the clipboard or download it as .txt / .png. Great for code comments, terminal banners, retro social avatars and other geeky creative use cases.

Related

Image Filters

Image Cropper

Image Compressor

Image Converter

Round Image Corners

What is ASCII art?

ASCII art is a form of art that uses ASCII characters to render an image through density differences. It dates back to the 1970s and 1980s, when line printers could only print text and people made pictures out of characters like @, # and $.

**How does the conversion work?** The tool reads pixel data with Canvas, applies the BT.709 weighting (Y = 0.2126R + 0.7152G + 0.0722B) to compute the average brightness of every character cell, uses Floyd-Steinberg dithering to spread the quantization error, and maps the brightness to a character at the matching density in the chosen ramp. Dense characters represent dark areas, sparse ones represent highlights. The tool ships with 3 built-in ramps and a custom option of any length, with gradients from 8 to 70.

**How does the colored variant keep the original colors?** In color mode the tool uses block characters (▏▎▍▌▋▊▉█), and each character carries the RGB color of the pixel cell it represents. The colored output can be exported as .png to keep the full color information.

**Compared to bitmaps:** the resolution of ASCII art is the character count rather than the pixel count, so it scales with whatever terminal font you use and can be made very large without blurring. The trade-off is that it cannot reproduce fine detail. For code comments, terminal banners and social avatars, ASCII art is often a better fit than a bitmap.

Use Cases

  • Convert photos, logos and cartoon characters into ASCII art for code comments, READMEs and forum signatures
  • Build text-art banners for terminals, SSH login greetings, bashrc banners, and as a figlet-style alternative
  • Express a geeky identity through social avatars and signature art
  • Drop generated ASCII into GitHub issues, email signatures and blog posts as plain text
  • Turn photos into colored block-character art and export .png for retro-style design assets
  • Convert memes and emoji into simple-ramp ASCII for chat reactions
  • Batch-generate art-style code comments or README decorations

How to Use

  1. Upload the image you want to convert (JPG / PNG / WEBP / GIF supported)
  2. Pick a character set: simple (fast preview), detailed (smoothest), or blocks (color-friendly)
  3. For a custom look, switch to detailed mode and type any string of characters
  4. Adjust the output width (default 120 characters, range 10-960); height follows the original aspect ratio
  5. Choose color mode (colored or black-and-white); the colored version can also be exported as .png
  6. Click copy to put the result on the clipboard, or download .txt / .png to save it

Features

  • 3 built-in character sets: simple (10 chars, fastest), detailed (70 chars, smoothest gradients), and blocks (terminal- and color-friendly)
  • Custom character set of any length: in detailed mode, type any string of at least 2 characters (typically 2-30) and the tool maps them automatically to the ASCII gradient
  • Color mode: the colored variant uses block characters to keep original RGB blocks, while black-and-white focuses on contrast
  • Aspect ratio lock: original proportions are preserved, height auto-scales when you change width
  • One-click copy / download: copy the text art to clipboard or save as .txt; the colored variant can also be exported as .png
  • Local processing: all pixel-to-character conversion happens in your browser via Canvas, so files never leave your device

Best Practices

Boost contrast before converting to ASCII

ASCII art is very sensitive to the source contrast: low-contrast images flatten into a uniform look. Run the image through the filters tool and raise contrast to 110-130% first, and the dark areas read as denser characters while the highlights stay sparse, giving the final piece much more depth.

Use 70-char set for details, 10-char set for logos

Detailed ramps like the 70-char set render smooth tonal transitions, which is what you want for portraits and artwork. The 10-char simple ramp just sketches silhouettes, so it suits logos, icons and cartoon characters. Using a detailed ramp on a simple shape usually makes the result look noisy.

Width 120 is the sweet spot for most uses

The default 120-character width (range 10-960) works on most screens. Portraits look best between 150-300, logos between 60-100; going past 400 forces heavy scrolling while staying below 50 loses detail. Match the width to where the art will be shown, whether that is a social post, a terminal or a blog article.

Keep the aspect-ratio lock on by default

Aspect-ratio lock is on by default so characters never get stretched. You can disable it to set the row count manually, for example to make a 30-row banner, but that distorts the picture. Beginners should leave the lock on and only experiment with custom ratios once they are comfortable.

Pair color mode with the block character set

In color mode the block characters (▏▎▍▌▋▊▉█) preserve the original color blocks because each character carries the average RGB of its pixel cell. The 70-char detailed ramp is tuned for black-and-white output and looks washed out in color mode, so always combine color mode with the block ramp.

Order custom characters from dense to sparse

When you type your own character set, list them from the densest (used for dark areas) to the sparsest (used for highlights), for example @#*+=:. The tool maps this order to the brightness gradient directly. Reversing the order inverts the picture instead of rendering it.

Use .txt for plain-text usage, .png for color

For black-and-white output, download the .txt file and paste it into any text editor, terminal, code comment, blog or forum signature. For colored output, download the .png so the full RGB colors are preserved for design assets, social media images and web illustrations.

Compress huge photos before converting

Very high-resolution photos (think 4000x3000) make the conversion slow and the resulting ASCII art extremely wide. Run them through the image compress tool first to bring them under 1000 pixels on the long edge, which speeds up the conversion and gives you finer control over the final look.

FAQ

How do I convert an image to ASCII art?

Upload your image and the tool reads the pixels in your browser through Canvas getImageData, computes a BT.709 weighted average (Y = 0.2126R + 0.7152G + 0.0722B) for each character cell, applies Floyd-Steinberg dithering to spread quantization error, and maps the resulting brightness to a character from the chosen ramp. The result is ready in seconds and can be copied to the clipboard or downloaded as .txt.

Why BT.709 grayscale weighting instead of a simple RGB average?

The human eye is most sensitive to green and least to blue. The BT.709 formula Y = 0.2126R + 0.7152G + 0.0722B encodes exactly that and is the industry standard for HDTV, UHD and modern image pipelines. Mapping it to character density gives results that match real visual perception much better than a plain RGB average, which is most visible in portraits and gradient scenes.

What is Floyd-Steinberg dithering and why do we use it?

Floyd-Steinberg is a classic 1976 error-diffusion dithering algorithm: each pixel's quantization error is distributed to the right, lower, lower-left and lower-right neighbors in the 7/16, 3/16, 5/16, 1/16 ratios. In ASCII conversion it prevents low-density ramps (like the 10-char simple set) from producing banding or jagged edges, so the transition from dark to light stays smooth and details survive. Competitors like toolshu expose it as a toggle; we keep it on by default for the best result.

Which character sets are included? Can I define my own?

3 ramps ship by default: simple (10 chars @%#*+=-:. for fast previews), detailed (70 chars for the smoothest gradient and portraits), and blocks (▏▎▍▌▋▊▉█ for color terminals). In detailed mode you can also type a custom string of any length (typically 2-30 chars); the tool sorts the characters from dense to sparse and applies the same mapping logic, so special symbols and even Emoji are usable.

Can the ASCII art keep the original colors?

Yes. Toggle color mode on and the tool uses block characters, where each character represents a block of original pixels with its actual RGB. The colored result can also be exported as a .png so the full color information is preserved.

How can I save and reuse the ASCII art?

For the black-and-white version, copy the text to the clipboard or download the .txt file and paste it into code comments, READMEs, blog posts, forum signatures or terminal output. The colored version adds a .png export so you can drop it into design assets, slides or social posts.

What kind of images work best for ASCII art?

High-contrast images with clear silhouettes convert best, such as portraits, logos, cartoon characters and landscapes. Busy or low-contrast photos lose detail when characters stand in for pixels, so it helps to bump the contrast with the image filters tool first or stick to the simple ramp for previews.

How do I tune the output width and height?

Width sets the number of character columns (default 120, range 10-960) and height follows from the original aspect ratio. The aspect-ratio lock is on by default, but you can turn it off to set the row count independently. 80-150 columns suit most screens, 150-300 works well for portraits, and going past 400 crowds the output and hurts readability.

How is ASCII art different from a bitmap?

ASCII art is made of text characters, so its resolution is the character count and it scales smoothly with whatever terminal font you use, but it cannot reproduce color or fine detail faithfully. A bitmap is a pixel grid that keeps color and detail, but gets blurry or jagged when scaled. The two formats suit different use cases, see the comparison table.

How does this compare to figlet, jp2a and other command-line tools?

figlet focuses on text ASCII art (font banners) and jp2a is a command-line image-to-character tool that needs to be installed and configured. This tool is a pure browser-side solution that runs instantly, needs no install, no signup, and works the same on every platform, plus it supports colored .png export and a custom character set. It is the easiest way to turn any image into character art for code comments or social sharing.

Does the image get uploaded to a server? Is it private?

No. Every pixel-to-character conversion runs locally in your browser through Canvas getImageData and JavaScript mapping. The image is never uploaded, and closing the tab releases the memory. Private photos, scans and sensitive documents can be processed safely.

Glossary

ASCII / Unicode
ASCII is a 7-bit character set with 128 basic characters. Unicode covers writing systems and symbols worldwide, and the block characters (▏ ▎ ▍ ▌ ▋ ▊ ▉ █) used by this tool are Unicode characters that render as colored blocks in Unicode-capable terminals.MDN - Unicode
BT.709 grayscale weighting
The RGB-to-grayscale formula Y = 0.2126R + 0.7152G + 0.0722B. BT.709 is the ITU-R standard for HDTV and UHD, and it matches the eye's higher sensitivity to green better than the older BT.709 formula. This tool uses it to compute the average brightness of every character cell.
Floyd-Steinberg dithering
A 1976 error-diffusion dithering algorithm that distributes each pixel's quantization error to the right, lower, lower-left and lower-right neighbors in the 7/16, 3/16, 5/16, 1/16 ratios. It is always on in this tool so low-density ramps (10 chars, 8 chars) keep smooth transitions and do not show banding.
Canvas pixel sampling
Reading the RGBA value of every pixel via the HTML5 Canvas getImageData() API. The tool averages the pixels inside each character cell, applies the BT.709 weighting, runs Floyd-Steinberg dithering, and maps the result to a position in the chosen character ramp.
Character density gradient
The number of steps from the densest to the sparsest character in a ramp. The simple set has 10 levels, the detailed set has 70 and the block set has 8. More steps mean smoother tonal transitions; fewer steps mean faster, more abstract output. The three ramps cover the full range from quick previews to portrait-grade detail, and a custom ramp of any length can be supplied as well.
Maintain aspect ratio
Locking the original width-to-height ratio so the ASCII art is not stretched. This tool keeps it on by default and auto-scales the height when you change the width. Disable the lock to set the row count manually, for example for a wide banner, but the image will be stretched or compressed.
Terminal banner
Text art shown when a shell, SSH session or program starts, used for SSH greetings, startup screens and CI/CD log headers. ASCII art is the classic form of a terminal banner and is usually generated by tools like figlet or toilet; this tool is a lightweight browser-based alternative.

Overview of the 3 built-in and custom character sets

Character setChar sequence (dark to light)Density levelsTypical use
Simple 10 chars@%#*+=-:. 10 levelsQuick previews, logos, emotes
Detailed 70 chars$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\|()1{}[]?-_+~<>i!lI;:,"^`'. 70 levelsPortraits, artwork, fine detail
Block chars▏▎▍▌▋▊▉█ 8 levelsColor terminals, colored export
Custom (any length)User-typed, 2-30 chars minimumUser-definedPersonal style, themed art

ASCII art vs bitmap characteristics

DimensionASCII artBitmap (PNG/JPG)
Building blocksUnicode charactersPixels
ScalabilityScales with the terminal or fontBecomes blurry or jagged
Color supportColored variant uses block charsFull RGB
File sizeUsually 1-10 KB plain textA few KB to tens of MB
EditingNotepad or VimNeeds an image editor
Best forCode comments, terminal banners, avatarsPhotos, web illustrations

Authoritative References