ASCII Art as Alt Image Tags

Not everyone tinkers with HTML any more. If you have and know what the alt image tags are (and where they are) you could give this a try. It’s not so practical now that almost no one uses a text based web browser. In the early days of the Internet a text based browser was practical because there were few images and if you stuck with text only web surfing you could be much faster in the days of  dial up modems.

As you can see below the code is basic HTML for adding an image with the addition of the alt attribute to describe the image. This alt tag is still practical for people who concern themselves with SEO. Mainly it is good for keeping your site accessible for those who are vision impaired and have technology which will read those image tags but be unable to describe the image unless the tag exists to be read.

To do this, have your ASCII art ready. Create an ASCII image to go with the graphical image you are using.

In your HTML code include the entire <IMG> tag inside <PRE>…</PRE> tags, and put the ASCII art inside the ALT attribute.  (See the image below which I recreated and then cut and pasted from the site where I found this idea.)

ASCII image tag

With this code a text only web browser would pick up only the image text and thus show your ASCII art picture. The ASCII art picture would not benefit the vision impaired web reader/ browser. So it is a good idea to add a word to describe your image along with the ASCII art picture.

Do not add text before or after the image itself. It will work as part of the image. Keep it all between the quote marks and the PRE tags (which tell the web browser this is pre-formatted information which should be kept “as is” with line breaks and spaces).

Leave a comment