Considered bad practice in today's web standards, displaying images with text on them on your website is a terrible idea. It can harm your website. In this blog post, we'll discuss the three main reasons you should avoid using images with text in them.
When referring to images with text, we're talking about site graphics sporting text as part of the graphic itself. Please see below for an example. These images are often flyers or banners converted to web images from PDFs or other printable material, created using PhotoShop or Canva.
Adding text to images could lead visitors away from your website or
prevent them from finding the site content in the first place.
Here are the three most important reasons why images should never contain text:
1) The text is not web accessible:
Today's internet audience consists of many different types of people. Not everyone uses the internet in the same way. Some people with visual impairments rely on screen readers to navigate the web.
A screen reader, used by the visually impaired, scans and reads the text on a website page to the user. The screen reader cannot detect the text made part of an image during this scan. While you may consider the workaround to using an image's alternate (alt) text property to detail the page image, this is not the best practice. We caution you against it.
On the web, the best practice is to provide an image's alt text property as a title if the image acts as a link. Alt text does not give a paragraph summary detailing its contents. Screen readers will also cut alternate text short if it is longer than 125 characters, resulting in the user missing out on the message you intended to provide.
2) The text is not accessible to search engines:
For example, imagine you designed an image or flyer banner containing text. You intend to inspire click-through conversions to another website page, sell a product, or advertise a course or notice. You took a great deal of time to optimize the paragraph content of this banner, using lead titles, branded messaging, or slogans. The goal was to rely on search engines to find and index this image based on its provided content. You want to draw traffic to your website or add search weight to the website page itself. Unfortunately, this is a wasted effort.
Besides screen readers, Search Engines also cannot read text within images. All titles, paragraphs, leader phrases, slogans, dates, company names, prices, and event names are otherwise invisible to the search engine. A search engine is limited to an image's alt text property and nothing more. Because it cannot read the visual text of the image, it cannot index it. If it cannot index the text, it cannot return it to your potential visitors within search results. Search engines can only read and index headings, paragraphs, lists, and other text elements entered directly within page content.
3)Text within images is not mobile-friendly:
One important fact is to consider the different screen sizes when viewing your mobile-responsive website. An image prepared for a desktop display may not work well on a mobile device. If you use fonts within the image that look great on a desktop monitor or when printed as an 8" x 11" document, these fonts will shrink as part of the image to unreadable sizes on a mobile phone. It is the nature of responsive web image handling. Considering this image size reduction, text that may be legible on a desktop or laptop may become invisible to your visitors when read on their phones.
Most importantly, if you test your website to ensure it is Google Mobile Friendly, the test won't return a warning that the image text is too small. These scanning SEO tools cannot read the text on the image either. Therefore, you may be unwillingly leading your visitor(s) away from the page containing your image or missing leads you intended to generate on your website without any notification from Google informing you about what the issue could be.
So what do I do?
Always try to reproduce the layout of an image containing text as page content instead of using a single image. These layouts are typically solved using HTML. Your mobile responsive website is programmed using the best HTML and CSS standards for optimal display across all devices and screen sizes. We are here to help you achieve any custom website page layout you need.
If your image design does not meet the current design standards of your website, talk to us. Our design team can prepare a professional solution that reflects the design layout you are looking for. The benefits of using a cost-effective solution prepared by our team for a website far outweigh the disadvantages of using an inaccessible image. Also, your website's SiteCM code snippets may prove handy when creating a banner with text layers. These solutions come built with readable text layers available to search engines, image readers, and your users! Your website code snippets flow and wrap to single columns when necessary, and they keep their provided text readable on mobile devices.
If you have any questions about image accessibility, please do not hesitate to contact us. We are here to help you with future web projects or page layouts.
We hope you found this blog post helpful.