Text should be text and images should be images. Putting your address, your phone number, your business name, workshop information, or important page headings into images is not a good idea at all.
Perhaps people are doing this because it’s a way to make the text look pretty. You can go into any photo editing software and insert text over an image or style it with cool fonts and alignments or make it into a work of graphic art.
But when you do this, the information becomes inaccessible.
Some Examples of Important Text Inside of Images
For example, a common mistake is to put webpage banner images on every page. Perhaps something like this:
The banner is just this part:
This banner could be achieved with a good website design where you can insert an image and then text next to it with those styles and background colors. But I’m talking about when this isn’t part of the web design and someone creates this entire banner as a graphic image.
The page title “About” and the tagline about what the therapist does, “Therapy and coaching for women and teens struggling with depression” is inside of the image. And these details are super important.
Another example of this mistake in action is on a contact page where the contact information is inside of an image like this:
In this example, to get the desired alignments and style, the therapist inserted their address and phone number into an image. Again, this could be, and should be, achieved through website design.
Why You Shouldn’t Insert Important Text Into Images
1. You can’t copy and paste out of images.
This is also about website usability. Your website visitors may want to interact with the information that you put into an image. Many visitors will have the expectation that they can copy and paste text that appears on a webpage. And you shouldn’t make it impossible for them to do so.
Especially if it’s an address, they will no longer be able to highlight and copy over into their favorite maps app for instance.
2. Images are resource intensive.
Page load times are important because people don’t have the attention spans for waiting – so you should do what you can to have your website load quicker. Putting what could be quickly loading text into an image will increase images used on your website. Reducing unnecessary images is good and it’s not necessary for these to be images.
3. Images are not search engine friendly.
Even if you take my advice and use filenames and alt tags to let google know what your images are about, images are still not as seo friendly as text. (More about that in the technical example below).
4. Phone numbers can’t be found on mobile.
Browsers on mobile phones are pretty smart. You can write code that recognizes phone numbers so that on mobile devices, a website visitor can click the phone number and the device will call the clicked phone number. Cool trick… but not as easily done for images.
5. Images don’t resize well for mobile devices.
Graphics that you’ve created containing text that look perfectly sized on your desktop or laptop may resize to being unreadably tiny on a mobile device. If the rest of your website is responsive (as it should be) but that image resizes weird, that information will simply be lost and a visitor will not zoom in to read it.
6. Images, when not saved properly, can look terrible.
A jaggy, pixelated mess is not the way that you truly want to present any information.
7. You can’t as easily correct mistakes.
Most websites these days are run on content management systems. This means the content can easily be managed. Putting text into images means that the text is outside of being managed short of removing the entire image and replacing it with another image. If you missed a typo or need to update your address, you’ll need to create an entire new graphic image.
Let’s Get a Tad Technical
To drive point number 2 about SEO home, let’s look at a technical example what a search engine crawler will see when browsing a website where text is inside of an image vs. where text is included as text.
The result on a desktop computer looks completely the same. The difference is how it was built. In one case, the text is inside of an image:
And in the second case, the text is included as text:
<h1>Helping People Struggling with Addiction</h1><h2>Renewed Hope Therapy Center in Austin, TX</h2>
You don’t have to be a code nerd to read it for yourself and see that in the first example, search robots will simply see code and the second example, they see both code but also the content of the headings themselves.
This means that in the second example, “Addiction” and “Renewed Hope Therapy Center” and “Austin, TX” are all right there for a search engine to grab. This is important information. If it’s an image, google will only see the file name of the image, and not the headings themselves.
It actually is possible to optimize images to be seen by search engines to some extent but including these important headings inside of an image makes them unreachable as text and also, the image optimization alternative, is not as powerful as using an <h1> tag which is the most powerful tag for a page.
When Text Should Be Inside of Images (When Text is Not Important)
Sometimes it’s very appropriate and awesome to have text inside of images though. Here are a few examples where text inside of images makes sense:
- Purely decorative images
- Inspirational posters or quotes
- Certain other types of social share content
These are all considered either decorative or supplemental to your other content. These do not contain your vital information like what you do, who you are, how to get in touch, or where you are.
Text is Text for Good Reason
Keeping text as text and images as images is not for no reason. Knowing when to use text inside of images and when not to will help keep your website looking great, highly usable, and crawlable for search engines too.
It can be overwhelming trying to figure this stuff out on your own and the lure of making images in a photo editing software so that things can look as cool as you’d like is appealing. Yet keeping best practices in mind when selecting which information to include as images can help you get the most out of your website and importantly, help your website visitors have the best experience and best chances of finding you possible.