Overview
Having images with text on a website can be a bad idea for several reasons.
- Accessibility
- SEO
- Responsiveness
Let’s examine each of these individually!
Accessibility
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.
Technically, you can 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 designed for. Alt text should be used to describe the image itself, not the words over it.
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.
For example, if 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 completely miss out on the introductory paragraph because it cannot read it on the image. That time spent optimizing the introductory paragraph for search engines would be a complete waste of time.
Again, you could put text in the alt text of an image, but blog post information and other information besides direct descriptions of the image is not meant to be in the alt text.
Responsiveness
Another aspect that is often not taken into consideration is how images with text on them will look at difference 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 can get to a point where the image text is impossible to read.
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 images either!
Conclusion
Overall, it is better to use plain text for website content whenever possible, and to use images for visual elements such as photos, icons, or graphics. If images with text are necessary, they should be used sparingly and with attention to accessibility and usability considerations.
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 does not need to be readable for screen readers, search engines, or site visitors.
The Dev team at PIC is working towards the best practices in every area, including:
- Creating all new graphics responsive
- Getting all featured images social size (1200×628)
- Using SVG and WEBP formats whenever possible