Something I am seeing more and more on websites is images with text on them.
And to clarify, I’m talking about images where the text is actually a part of the image. It’s been added to that image via design software like Photoshop or Canva.
Every time I see it I want to bang my head against my desk!
Why? Because it’s really bad. It’s bad for you and it’s bad for your visitors. And believe it or not, it could be leading visitors to leave your website or be preventing visitors from finding your website in the first place.
In this post, I’m going to explain why you need to stop putting text on images.
It’s not accessible
Not everyone uses the internet in the same way. For example, people with visual impairments may use a screen reader to navigate the web. The screen reader scans the text on a website and reads it out to the user.
Unfortunately, screen readers can’t read the text that is displayed on an image. This means that anyone using a screen reader won’t be able to read the text that is on the image, and they will miss out on this piece of content.
Yes, you could technically set the text that is on the image as the alt text and the screen reader will read this out loud, but that’s not what alt text is used for. Alt text should be used to describe the image itself.
Also, screen readers often cut off alt text after 125 characters, so if the text on your image is longer than this then the user isn’t going to be able to read all of the text.
It’s bad for SEO
It’s not just screen readers that can’t read the text on images. Search engines are also unable to read text on images.
So let’s say for example you have created an image with text on it, and this text is the introductory paragraph for a blog post you have written. This piece of text contains carefully selected keywords that you’ve intentionally used for SEO purposes.
A search engine crawler or spider is going to come along and they’re going to completely miss out that introductory paragraph because they can’t read it. That time spent optimising that introductory paragraph for search engines will have been a complete waste.
Again, you could put the text in the alt text of an image, but I would avoid this technique for the reasons previously mentioned.
It’s often not mobile-friendly or responsive
Another thing that often isn’t taken into consideration is how images with text on them will look like on different screen sizes, including mobile devices.
The text might be legible on desktop and laptop screens, but as the screen size gets smaller, so does the text, and it gets to the point where it’s impossible to read.
And if you were to run your website through a tool like Google Mobile-Friendly Test, the test wouldn’t warn you that the text is too small because those tools can’t read the text on the image either!
So how should you do it?
I know a lot of you are going to hate me for saying this but the best way to add text to an image is using HTML and CSS.
I know, I’m sorry! But it’s the only way to ensure that the text can be read by screen readers, search engines, and on smaller screen sizes.
The good news is if you are a WordPress user, there is a block in the block editor called Cover, and this allows you to upload an image and add text to it without needing to touch any code.
You can add an overlay that you can change the colour and opacity of, you can change the colour of the text and you can change the alignment of the text.
The block editor also has a Media & Text block that allows you to display an image and some text side by side if you’d prefer this type of layout.
There are similar sorts of solutions on other website builders such as Squarespace and Wix, so hopefully, you’ll be able to find a better way to display text on an image no matter what platform your website is on.
Are there any exceptions to the rule?
There are of course some occasions where using text within an image on a website is perfectly acceptable.
For example, you can use text within a logo that is saved as an image. This is mainly because it can be extremely difficult to replicate a logo with HTML and CSS!
Another example of where you can use text on an image is when you are using a screenshot. If you do use screenshots on your website, make sure the alt text describes the content of that image as accurately as possible
You can also use text on an image when it is used for decorative purposes and therefore doesn’t need to be readable for screen readers and search engines. For example, you might have an image of some quotation marks that you’re using as a background image.
Finally, there’s images that are made for specifically to be turned into pins for Pinterest (like you can see at the bottom of this post). It’s very common for pinable images to contain text, and you can get away with displaying these on a website because they don’t really add to the content of the way.
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.
Pin for later?
