Text in images

It is possible for an image to contain text.  This could be incidental, as in the name stencilled on the window of a storefront pictured in the image.  It could be intentional, as in an illustration with labels.  Or it could be as a replacement for text, i.e. the image contains only text (usually done to ensure that the text font will appear exactly as shown in the image).

Truth

Some people with slow connections or a shortage of patience normally browse with image loading disabled.  Audio user agents, used by the blind, cannot, unaided by alt text, speak the text that appears in an image.  Unlike plain text, the foreground and background colors cannot be altered by the user to improve visibility.

Many browsers allow text to be resized, leaving image size unchanged, thus text in images is not resized along with normal text.  Some browsers allow a page to be zoomed, which resizes both normal text and images.  Zooming to make a page larger usually results in a horizontal scroll bar, requiring the user to scroll in order to see all parts of the page.

Text in images is not seen by search engines.

Consequences

If you rely on text in images to communicate your message, some of your visitors won't receive it, or may have to struggle (if the text is smaller than their preference).

Text in images will not contribute to search results.  Example: If the words 'hand crafted' appear only in an image on a page, search engines will not be able to direct people searching for those words to that page. 

Recommendations

Avoid using text in images.  If you must, ensure that the same information is conveyed somewhere other than within the image.

Tips

  1. Always specify alt= text within the <img> tag.
  2. If you are using an image in place of text, consider setting its width in ems, so that it gets larger as the text size is increased.  Note that this has consequences for image quality.  See Image size.

Last revised 7 Nov 2009