Images are a great way to communicate. Online, they’re everywhere! We use them to communicate information and capture attention. But there is an overlooked danger in using images to replace text. Images that include text aren’t inherently bad, but there are some things to consider if you’re communicating only through image.
Live text is another word for HTML text, or any text you type on your website or email newsletter. It’s “living” because it remains fully editable — you can make changes at any time. From the user’s end, they’re able to select and copy live text.
Text that’s included in an image, however, is not live text. Common examples include your logo (if it has text), image-based infographics, and maps. Sometimes, you may use an image with text to replace live text. This is popular on social media websites but also shows up everywhere online.
There are many reasons it’s easy to use an image in place of text. If you’re working within specific size constraints, it may be easier to design an image with text built-in than to code something custom. This is especially common in email newsletters. For example, brands often use an image to represent their coupon.
It can also be quicker to create a unique design or layout using an image including text instead of live text. You can place the text anywhere and use any font. Using an image would save time having to recreate that using HTML, but you’re sacrificing live text for convenience.
When you use an image with text in place of live text, visually impaired or blind users may not be able to read it. Screen readers cannot read text contained inside an image. They can use an image’s alt text if that’s available, but that’s something that you need to add beforehand.
Aside from screen readers, live text is also crucial to some functions on mobile devices. For example, on most phones, users are able to highlight or tap a phone number to call the number without having to manually input it. Many devices can also recognize addresses and automatically open the user’s Maps app. This functionality doesn’t work if the text is embedded in an image.
Common reasons to use images instead of text are for size or design, but using an image isn’t a reliable way to work within these constraints. If your coupon is shown in image form and somebody tries to read your email with a slow connection, the image may load slowly or not at all. If there’s no live text to explain what the email is about, they may delete it because it’s empty.
Additionally, it’s hard to account for how text inside an image will look on all devices. What looks large and readable on a desktop might scale down to be too tiny to read on a phone. With live text and responsive web design, text can adjust to fit any device while still being legible. Ultimately, it’s more reliable to use HTML where necessary and maintain live text.
Search engine crawlers can’t read text stored inside an image. For SEO, this means any keywords you use in images won’t strengthen your page’s search rank. If you, for example, use a custom banner on every page instead of a header with live text, it can be detrimental for your SEO. How would a crawler know what the page’s purpose is? For good SEO, always be sure that important images are explained by the surrounding live text.
Images are a natural way to communicate and are important to make visually interesting websites and emails. However, if you’re using images to replace live text, consider alternative solutions. Contextualize images by the surrounding live text. Spend time to custom code your email newsletter instead of resorting to a static image out of ease. Keep in mind the important role live text plays online!