Don’t use text in images

Everyone loves a big, beautiful image on a web site.

But I’ve noticed over the years that large image areas can often be seen as a short cut to providing extra messaging content – especially marketing messaging in a space where there was previously no requirement for text to exist.

In fact, it doesn’t even need to be large images as the following example shows.

Adding words into images on the web can be problematic for several reasons. Here are a few.

Accessibility issues

Text within images can create accessibility issues for users with visual impairments who rely on screen readers to access information on websites. It can also add to visual confusion or cognitive dissonance for all users.

Screen readers cannot reliably read text within images, therefore making the information inaccessible. This can also impact users with other disabilities, such as dyslexia or colour blindness, who may have difficulty reading text within images.

The image below – that we created as part of some training documentation – displays the point well. The coloured text doesn’t achieve acceptable contrast ratios.

Yet most content management systems allow editors to upload whatever images they want. This can lead to editors seeing images as the only vehicle to display their creativity on the company’s corporate website, but it’s often simply a case that the site’s design demands that an image is selected, so if the editor is posting about, say, an event, then the quick option is to use the poster that accompanies the event.

SEO concerns

Search engines rely on text to index and rank web pages, and text within images cannot be read by search engine crawlers.

This means that important keywords and phrases within images may not be indexed, negatively affecting the website’s visibility in search results.

Design and maintenance issues

Using text in images can make it challenging to update or edit the website’s content. If changes need to be made to the text, the entire image will need to be recreated, which can be time-consuming and costly.

Text within images cannot be resized or adjusted to fit different screen sizes, which can lead to distorted or pixelated images on smaller devices, or as demonstrated above, words being cut off.

Can’t copy/paste

Text in images cannot be copied, so anything that a user might want to reuse in image text is going to be a cause of frustration.

Exceptions

Ok, there may be times when it could be ok. Here are situations where the rule can be given some slack.

In this image, the text is an intrinsic part of the image. Just make sure you describe what’s in the image using alt text.

Additionally, if the image is a logo or brand name, it will be necessary to include text within the image. However, it’s important to ensure that the logo or brand name is also represented in a text-based format, so that it can be read by screen readers and search engines.

Summing up

In conclusion, using text in images on websites can create significant accessibility, SEO, design, and maintenance issues. It’s best practice to separate text and images whenever possible and to use text-based elements to provide context and information on the website. By doing so, you can ensure that all users can access the information on the website, improve the website’s SEO, and make it easier to maintain and update over time.