10 Things Your Image of Text Can’t Do (That Real Text Can)

"The Quick Brown Fox Jumps Over The Lazy Dog." Each word is aggressively designed in a variety of conflicting fonts, colors, styles, shadows, glows, shapes, and more.
There are additional aesthetic reasons for why not to post this image of text made in Powerpoint 2011. Credit: Wikipedia

One thing I will go to great pains to avoid is using images of text unless it is absolutely necessary. What do I mean by “images of text”? I mean a JPG, GIF, or PNG that mostly contains text. There are all sorts of examples like Donate buttons, event posters, data tables, and, of course, MS Word WordArt:

There are certainly exceptions for things like images of power point slides, complex charts, and logos, but there are all sorts of times where images of text are drastically inferior to real text.

Accessibility Requirement: Alt Text

First, it’s critical to point out that if you use images of text, then it must have alternative text and that alt text must start with the words in the image. If you don’t do that, it’s inaccessible and the words might as well not exist for search engines either.

I would say that at least half the time I come across images of text, the alt text is missing or incomplete/inaccurate. That fact alone is enough to make me recommend against images of text whenever possible.

Things Images of Text Can’t Do

So with alt text, an image of text can be mostly made accessible, but there are so many other considerations. And so now, without further ado, I present you with the list of things images of text can’t do that real text can:

  1. Be copied and pasted (the text, that is)
  2. Be optimized for appearances on different screen size (font size, line-height, etc.)
  3. Wrap onto multiple lines on small screens (even with hyphens!)
  4. Contain more than one link
  5. Contain multiple elements (like a separate heading and link) or communicate complex relationships like a data table or nested list items
  6. Change color to support dark or high contrast modes
  7. Be restyled to match your new brand with CSS
  8. Quickly be edited and updated on your website through your CMS
  9. Have essentially zero impact on your site’s loading time
  10. Easily test color contrast of text and background color for accessibility

I’m sure there are 10 more (leave a comment!), but I hope this list is long enough to convince you already.

Images have their place for really specific designs that can’t be achieved (easily) any other way, but the downsides of images of text are immense, so think twice before you do it.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.