Considered bad practice in today's web standards, displaying images with text on them on your website is a very bad idea. It can harm your website. In this blog post, we'll be discussing the three main reasons why you should avoid using images with text in them.
When talking about images with text, we're talking about images that have text added to them as part of the image itself. Please see below for an example. These images are often flyers or banners that have been converted to web images from PDFs, or other printable material. They are created using PhotoShop or Canva.
Adding text to images could lead visitors away from your website or be prevented from finding it 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 is designed to scan and read out the text on a website page to the user. During this scan, the screen reader cannot detect the text made part of an image. While you may consider the work around to using an image's alternate (alt) text property to detail the image, this is not best practice and we caution you against it.
The alt text property of an image should be used to title the image. It should not be used to provide a full 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:
Let's say for example you worked really hard on an image or flyer/banner, containing text. Perhaps the flyer is designed to inspire click-through conversions to
another page of the website, or to sell a product or advertise a course. A great deal of time was taken to optimise the paragraph content of this banner using targeting titles branded messaging or slogans. The goal was to rely on search engines to find and index this image based on the content it provided, drawing traffic to your website, or to add search weight to the website page itself. This is unfortunately a wasted effort.
Besides screen readers, Search Engines also cannot read text within images. All titles, paragraphs, leader phrases, slogans, dates, company names, prices, important event names etc... are otherwise invisible to the search engine. A search engine is limited to the alt text property of an image, 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:
It is always important to consider the different screen sizes that will be viewing your mobile based website. An image prepared for desktop display may not work well when shown on a mobile device. If you use fonts within the image for example that look great on a desktop monitor, or when printed as an 8" x 11" document, these fonts will surely shrink as part of the image to incredibly small sizes on a mobile phone. This 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 an irritant to your visitors when read on their phones.
Most importantly, if the website is put through a test like Google Mobile Friendly, the test wouldn't provide any warning that the image text is too small. These tools cannot read the text on the image either. Therefore, you may be unwillingly leading your visitor(s) away from the page containing the image since they cannot read its contents or they experienced a missed message from the image itself.
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 created using the best HTML and CSS standards meant for display across all devices and we are here to help you achieve any website page layout you need.
If the design of the image 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 to using a cost effective solution prepared for a website far out-weight the disadvantages to using an image that cannot be read or respond to search engines. Also, your website's SiteCM code snippets may come in handy when creating a banner with text layers. These solutions come built with readable text layers that are available to search engines, image readers and most importantly... your users! They are designed to flow and wrap to single columns when necessary and they keep their provided text readable on mobile devices.
If you have any questions about this topic please do not hesitate to reach out to us. We are here to help you with your future web projects or page layouts.
We hope you found this blog post helpful.