How to Convert Images to ASCII Art

A Complete Step-by-Step Guide

Converting an image to ASCII art means translating a picture into a grid of characters. It needs preformatted text and a suitable font to stay aligned.

Try Generator Now View Examples

Starting with SVG clipart? Prepare a PNG with the worked horse recipe.

Working with a transparent PNG? See the pixel-by-pixel example.

Step 1: Choose the Right Image

Choose a source with a clear subject and distinct light and dark areas. Crop a busy background before uploading; small details may disappear in a character grid.

Choose the feature you want to keep, such as a face or a logo outline.
Crop around it in an image editor; retain an unedited source for comparison.
Check whether its identity depends on small lettering, texture or color. Those details may not survive as plain text.
Use a source you have permission to reproduce; conversion does not grant rights.

Step 2: Upload Your Image

Open the image editor. In Upload, select or drop a file. To paste a copied image with a keyboard, focus the upload area and press Ctrl+V or Command+V. You can also paste an image URL and select Load URL. Choose one image up to 10 MiB (10,485,760 bytes) and 24 million decoded pixels. Use still PNG, JPG, single-frame GIF, still WebP or uncompressed BMP. Animated PNG/WebP, multi-frame GIF and user SVG, AVIF and other unsupported formats are rejected before image decoding; export one frame to a still PNG first. Bundled Twemoji SVG artwork is a trusted site-asset exception.

Drag and Drop: Simply drag your image file from your computer directly onto the upload area
File Selection: Click the upload area to browse and select a file from your computer
Clipboard Image: Copy an image, focus the upload area with Tab, then press Ctrl+V or Command+V. This accepts an image file from the paste event, not an image address or copied HTML. If your browser does not provide an image, save it and select the file instead.
URL Import: Paste an image URL and select Load URL. The host must allow browser access; use a local file if the request is blocked.

Technical Requirements and Best Practices:

Supported Formats:
- PNG: Can retain transparency in the source
- JPG: A compressed format without transparency
- GIF: Single-frame files only; export one frame from an animation to PNG first
File Size:
- Choose one image up to 10 MiB (10,485,760 bytes) and 24 million decoded pixels.
Image Dimensions:
- Conversion allows at most 40,000 sampling cells and 1,000 sampling rows. Reduce width or resize/crop the input if a limit is exceeded.
- Crop to the subject before uploading. More source pixels do not guarantee more detail at a small output width.

Step 3: Choose Your Settings

In Options, choose Generation Mode and width, then start with neutral adjustments. Change one control at a time and compare the generated result before keeping a change.

Brightness, Contrast, Saturation, Hue Rotation, Sepia and Invert Colors process the source in every mode. Neutral settings are 100% brightness, contrast and saturation, 0 degrees hue, 0% sepia and inversion off. A change may leave the same output symbols if it does not cross a matching threshold.

Standard ASCII Art: Character Set and Dithering. Maps luminance to a dark-to-light character ramp.
Edge Detection Only: Edge Intensity. Uses its own directional symbols; Character Set and Dithering do not apply. Inverting an image can leave the same outlines because edge strength and line orientation are unchanged.
Character Optimization: Character Set and Dithering. Matches each image cell to rendered glyphs. More candidates can take longer.
Dot Art (Unicode Braille): Dithering. Each Unicode Braille character records a 2-by-4 grid of dark image pixels. This is visual dot art, not readable Braille transcription or ASCII. Blank cells are U+2800, not ordinary spaces; keep them when copying. Font rendering varies. Character Set does not apply; image adjustments and Dithering can change the dots.
Emoji Mosaic: Emoji Size, Emoji Set and Transparent Pixel Emoji. Sampling Width is the resized pixel width; columns equal width divided by Emoji Size, rounded up. Dithering and Character Set do not apply.

Adjust output and keep settings

Use Width to control the sampling width, and Generation Mode to choose how the image is converted. Check the final grid dimensions and reduce Width if the result is too large for where you want to paste it. Copy, Copy as Markdown, TXT and PNG are available directly with the result.

Generate the full Result, then select Copy as Markdown. Paste the whole block into a Markdown editor and inspect its rendered view for wrapping, missing spaces and unsupported glyphs. If copying is denied, select the displayed manual-copy block or download TXT. Download PNG when text layout cannot be preserved.

Changing image settings does not update the address. Save settings on this device if you want to reuse them; choose your source image again after reloading.

Save settings on this device is separate: open it and select Save settings locally. There is one slot per editor in this browser; confirm Save or replace to write that slot (Cancel leaves it unchanged). On return, choose your image again to unlock Options, then open Options and select Load saved settings explicitly.Use Delete saved settings, then confirm deletion to clear the slot. Images, URLs, filenames, input text, output, custom characters and transparent-cell symbols are excluded. Browser storage deletion or eviction removes the slot; it does not sync to an account or save artwork.

Download your work before leaving. The editors warn before following a link with unexported work and let you keep editing or download TXT without leaving. Reload/close/history warnings depend on browser support and may not appear; Back is not a recovery feature. Pages, fonts and remote images load online; there is no offline mode.

Basic Settings

Output Width: Controls the detail level and final size
- Try 40 columns for a compact comparison and 80 for a wider one; neither is a platform guarantee.
- More columns sample more cells but need a wider text area. The default custom width is 100.
- Emoji Sampling Width is the resized pixel width, not the final number of emoji columns.
Character Set: Determines the visual style and detail level
- Standard: @%#*+=-:. (ending with a space), the default ramp
- Detailed: A longer printable-ASCII ramp with more mapping levels
- Simple: #@%*+=-:. (ending with a space), a printable-ASCII ramp
- Blocks: █▓▒░ (ending with a space), Unicode shading characters
- Custom: Create your own character set for unique styles

Advanced Adjustments

Brightness (0-200%):
- Below 100%: Darkens the image, intensifies shadows
- Above 100%: Brightens the image; highlights can lose detail
- Recommended: Start at 100% and adjust based on preview
Contrast (0-200%):
- Below 100%: Reduces difference between light and dark areas
- Above 100%: Pushes tones farther from the midpoint; shadows or highlights can merge
- Start at 100%. Compare the rose example at 100% and 140% in the photo guide rather than assuming more contrast is better.
Dithering Options:
- None: Direct mapping without a dithering step
- Floyd-Steinberg: Distributes quantization error to neighboring pixels
- Ordered: Uses a repeating threshold pattern; compare texture in smooth areas

First check for a monospace font, preserved spaces and disabled wrapping. Character modes already compensate approximately for tall text cells with a fixed 0.55 row factor. Font and line spacing can still change apparent proportions; there is no separate aspect-ratio control. Reduce width to fit a wrapping text area, not to correct vertical stretching. Use PNG when the destination cannot preserve text layout.

Step 4: Generate and Save Your ASCII Art

In Options, choose a mode and width, then select Generate ASCII Art (Generate dot art in Dot Art mode). Open Advanced image settings for adjustments, character sets and mode-specific controls. In Result, use Copy, Download TXT or Download PNG. For colored characters, choose Standard and enable Keep source colors before generating, then download colored HTML or ANSI for a terminal. Generate again after changing settings to update the full result.

ASCII Preview is reduced: up to 60 columns for character modes, or a fixed 32-pixel sampling width for Emoji Mosaic. Generate the full result to apply the selected Output Width or Sampling Width.

Copy and TXT preserve characters, spaces and line breaks, not the receiving app's styling. Use a fenced code block in a README or chat, or a preformatted monospace text area. Keep leading/trailing spaces and disable wrapping. Unicode blocks, lines and emoji need suitable fonts and may occupy different widths.

PNG renders the text onto its own canvas; it is not a screenshot of the preview. Use it when the destination changes text spacing. The image editor uses the selected display font at 14 px; example cards use 12 px monospace. PNG always uses black text on white with at least 1.2 line spacing and 20 px padding. Screen theme and preview zoom do not change the file. Invert Colors changes image processing, not the PNG background. Emoji glyph colors depend on browser fonts. Copy needs browser clipboard access, usually on HTTPS or localhost. If it is denied, select the result text or download TXT. PNG limits can require a smaller width or shorter text.

Preserve colors with HTML

Standard and Character Optimization produce plain text by default. Edge Detection uses Unicode lines; Emoji Mosaic uses colored emoji, not sampled RGB. In Standard, Keep source colors adds a preview, HTML and ANSI exports with printable ASCII ramps. Colors are adjusted after transparency is blended onto white; dithering changes glyphs, not colors. ANSI uses white backgrounds and row-local resets; it needs a true-color terminal. Copy, Markdown and TXT remain plain, and PNG remains monochrome. Colored PNG is not supported. Open the HTML file in a browser; pasting its plain text into a chat or README does not preserve color. The colored file uses a white background and fixed monospace font. Very pale foreground colors may be difficult to see. This opt-in choice is not saved in recipes; changing mode or loading settings turns it off.

Follow the worked colored ASCII tutorial to reproduce a three-color PNG, compare its plain-text fallback and choose between HTML, text and PNG.

Choose an export
Need	Choose	Check
Editable characters	Copy, Markdown block or TXT	Monospace font, preserved spaces and no wrapping; styling is not included.
A rendered image	PNG	Open the downloaded file and check size and legibility. The recipient cannot edit it as text.

Try a small truck in a README or chat

This is the bundled truck generated in Standard mode at 40 columns and 13 rows. Use the Standard ramp (including its final space), brightness, contrast and saturation 100%, hue 0, sepia 0%, inversion off and no dithering. The build uses Sharp/Lanczos3 sampling; browser pixels may differ slightly.

Open the 40-column truck settings

Generate the Result and select Copy as Markdown, or select this complete block, including both fence lines. Paste into a README or a chat that accepts fenced blocks, then inspect the rendered message.

```text
                     :--:::::           
                    :=+++++++--.        
                   .==+**====**=        
....::::::::-------=-=+#*....=#-        
========-===--==--=--=+#*++++*#*-..     
==--:-=-:-=-:-=-:-==-==##****##****+++. 
==--:-=-:-=-:-=-:-==-=-##****##*******: 
==----=---=---=------=-*############*+. 
-===========+==+++++++=#######%%%%%%#*- 
 .+*####*+#%#%#+++-=+-=*#####%%%%%%%%#+-
 -*%*=+%#*%*=+%#=--==-==+=+++#%#+=*%%*=:
 --%*++#+-%*+*%+              +%*+*%-   
 . :=++-  :+++-                -+++:    
```

Check the empty margin before the cab, the long dump-bed edge and the gaps around the wheels. Keep all spaces and line breaks. If lines wrap, try a narrower result; if the destination removes spaces or changes glyph widths, use PNG. A 40-column result fitting our chat budget does not guarantee it fits every chat or device.

This is a conversion demonstration, not reuse permission. View the source and unresolved rights evidence.

SVG clipart to ASCII: export a PNG first

Downloaded clipart is often an SVG: a description of shapes rather than a fixed pixel grid. This editor rejects user SVG files, including SVG image URLs. Export a still PNG first; renaming .svg to .png does not convert it. The horse below shows the whole path, from vector source to editable characters.

Keep the source and check its rights
This horse is by marauder, from Openclipart item 158377. Its item record identifies CC0 1.0; we retain the credit voluntarily. That record covers this file, not every horse image or everything on the web. Converting an image to PNG or ASCII does not grant reuse rights.
Download the original horse SVG
Export real PNG pixels
If you only want to try the example, download our prepared PNG. To reproduce it locally, use Node.js 22 and the Sharp image-processing library. In a new folder, save the SVG as horse-clipart.svg, then run:
```
npm install --save-exact sharp@0.35.5
```
Save this code as prepare-clipart.cjs in that same folder:
```
const sharp = require("sharp");

sharp("horse-clipart.svg", { density: 96 })
  .png({ compressionLevel: 9 })
  .toFile("horse-clipart.png")
  .catch(error => {
    console.error(error);
    process.exitCode = 1;
  });
```
```
node prepare-clipart.cjs
```
The command writes a 767 × 629 PNG at 96 dpi and leaves the SVG unchanged. It retains transparency; no crop or background is added. A missing file or failed export prints an error and exits unsuccessfully: correct the path or source before continuing. Use a source you trust, and inspect the PNG before uploading.
Other vector editors can export PNG too, but their rasterization can change edge pixels. This recipe uses the documented Sharp SVG input and density option, with the exact source and prepared-file hashes recorded on the horse example page.
Convert the PNG, then save the characters
Upload horse-clipart.png, not the SVG. Choose Standard ASCII Art, Output Width 40 and the Standard ramp, including its final space. Keep brightness, contrast and saturation at 100%, hue and sepia at 0, Invert off and Dithering None. Select Generate ASCII Art. The link below loads the same prepared PNG and settings.
Open the prepared horse PNG at 40 columns
Use Copy or Download TXT to keep editable text. Preserve every space and line break, choose a monospace font and turn wrapping off. Download PNG instead if your destination changes the spacing; that file is a picture of the characters, not the original vector.

Prepared PNG: the transparent background is displayed on white here, as it is composited by Standard mode. Exporting an SVG does not add detail to the character grid.

                                  ::    
                             -+#%%@#.   
                           -%@@@@@@@#   
                         .*@@@@@@%@@@*  
    ..::-==+==-:..   ..:=%@@@@@@-.-+@@+ 
  .*%%%@@@@@@@@@@%%%%%@@@@@@@@@#    -+: 
  *@@*%@@@@@@@@@@@@@@@@@@@@@@@@-        
 .@@%+@@@@@@@@@@@@@@@@@@@@@@@@#         
 :@@@-%@@@@@@@@@@@@@@@@@@@@@@@*         
 :@@@.=@@@@@#:-*#%@@@@@@@@@@@@-         
 :@@% -@@@@%.    .:::---=@@@@:          
 :@@#-%@+%@=            .%@@*           
 .%@+%%: #@.            .%@@:           
  -+:%:  -%             .%@#            
    :#   .#:            -**=            
    =%    +%.           +*=-            
    .##.   =*.          :%+#=           
      :.                 ..::

Reference: 40 columns × 18 rows, generated by the production Standard-mode renderer from a pinned Sharp/Lanczos3 sample. The browser editor uses canvas resizing, so some edge characters can differ. Compare the head, back, tail and gaps between the legs rather than expecting smoothed edges to match character for character.

If the result is blank, first open the PNG and check the artwork against its background. White artwork on transparency needs a dark background before upload; Invert cannot restore that lost contrast. The PNG transparency comparison below explains why. For a solid silhouette like this horse, begin without dithering so texture does not distract from the outline.

PNG to ASCII: transparency and white artwork

A PNG can contain transparent pixels. Before Standard mode maps pixels to characters, the converter blends them onto white. Fully transparent pixels and opaque white both become white, which maps to the final space in the Standard character ramp. A white logo on a transparent background can therefore look blank even when the file loaded correctly.

Invert runs after that white-background blend. It turns both the white artwork and its formerly transparent background dark, so it cannot recover the contrast between them. For white artwork, flatten a copy onto a dark background in an image editor before uploading. The page theme only changes how the preview is displayed, not the generated characters.

Five vertical bands: transparent, black, gray, white and half-transparent black — Original five-band PNG sample. The checkerboard shows transparency and is not part of the file. Each band occupies 10 columns in the results below.

How the same pixels map in Standard mode
PNG band	RGB	Alpha (0-255)	Invert off	Invert on
Transparent	0, 0, 0	0	space	@
Black	0, 0, 0	255	@	space
Gray	128, 128, 128	255	=	+
White	255, 255, 255	255	space	@
Half-transparent black	0, 0, 0	128	+	=

Half-transparent black blends with white to RGB 127, 127, 127 before adjustments, so it maps to a middle character, not the darkest one. The checkerboard is only a display aid. This walkthrough uses Standard mode with no dithering; other modes and dithering settings produce different character grids.

Invert off

          @@@@@@@@@@==========          ++++++++++
          @@@@@@@@@@==========          ++++++++++
          @@@@@@@@@@==========          ++++++++++
          @@@@@@@@@@==========          ++++++++++
          @@@@@@@@@@==========          ++++++++++
          @@@@@@@@@@==========          ++++++++++
          @@@@@@@@@@==========          ++++++++++
          @@@@@@@@@@==========          ++++++++++
          @@@@@@@@@@==========          ++++++++++

Try the standard PNG settings

Invert on

@@@@@@@@@@          ++++++++++@@@@@@@@@@==========
@@@@@@@@@@          ++++++++++@@@@@@@@@@==========
@@@@@@@@@@          ++++++++++@@@@@@@@@@==========
@@@@@@@@@@          ++++++++++@@@@@@@@@@==========
@@@@@@@@@@          ++++++++++@@@@@@@@@@==========
@@@@@@@@@@          ++++++++++@@@@@@@@@@==========
@@@@@@@@@@          ++++++++++@@@@@@@@@@==========
@@@@@@@@@@          ++++++++++@@@@@@@@@@==========
@@@@@@@@@@          ++++++++++@@@@@@@@@@==========

Try the inverted PNG settings

Both results use 50 columns and 9 rows, the Standard ramp including its final space, neutral adjustments and no dithering. They are generated from the sample pixels by the same Standard-mode code as the editor. The bands have no vertical detail, so resizing their height does not change their tones. Keep spaces and line breaks when copying. The transparent band is blank with Invert off and becomes @ characters with Invert on.

If you need a background other than white, flatten a copy onto that background in an image editor first. Keep the original PNG. After conversion, Copy and TXT preserve characters, not PNG transparency; Download PNG renders black text on white rather than recreating the source's alpha channel.

ASCII encoding and art - Distinguish ASCII encoding, Unicode and character art
Examples Gallery - Get inspired by our collection of ASCII art
Image to ASCII - Open the shared image editor
Frequently Asked Questions - Common questions about ASCII art creation

Ready to Create Your Own ASCII Art?

Open the editor, load a source, then follow the settings and export steps above.

Start Converting Now View Example Gallery

Navigation