Website Images - Dangers of Using Text Within Images

Using images with embedded text on your website is strongly discouraged in today's web standards, as it can harm your site's performance and usability. In this blog post, we'll delve into the three primary reasons you should steer clear of images containing text.

When we refer to images with text, we're discussing site graphics that feature text as an integral part of the design itself. A common example of such images includes flyers or banners converted from PDFs or other print materials, often created using tools like Photoshop or Canva, as shown below:

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 three crucial reasons to avoid using images with embedded text:

Text inaccessibility for screen readers:

Today's diverse internet audience includes users with various needs. Visually impaired individuals rely on screen readers to navigate the web. However, screen readers cannot detect text within an image, making it inaccessible to these users. While using an image's alternate (alt) text property to describe the image might seem like a solution, it is not a best practice and should be avoided.

Text inaccessibility for search engines:

If you've designed an image or flyer banner with text intending to drive conversions or promote content, search engines won't be able to read the text within the image. This means that search engines cannot index the titles, paragraphs, slogans, or other important details within the image. As a result, potential visitors won't find your content through search results, as search engines can only index actual text elements on a webpage.

Text within images isn't mobile-friendly:

With various screen sizes, it's crucial to consider how images appear on different devices. An image that looks great on a desktop might become unreadable on a mobile device due to font size reduction. This issue isn't detected by tools like Google's Mobile-Friendly Test, as they cannot read text within images either. Consequently, you might be unknowingly driving visitors away from your site or losing potential leads without any insight from SEO tools.

So what do I do?

To ensure a better user experience and improve search engine accessibility, consider these recommendations:

Use HTML and CSS layouts:

Instead of embedding text in images, recreate the layout using HTML and CSS. This will ensure your content is responsive and readable across different screen sizes and devices. Our team can assist you with custom page layouts tailored to your needs.

Consult with our design team:

If your design doesn't match your website's current standards, reach out to our design team. We can provide a cost-effective solution that reflects your desired layout while ensuring optimal performance and accessibility.

Utilize SiteCM code snippets:

Take advantage of your website's existing SiteCM code snippets to create banners with text layers. These solutions are not only search-engine friendly and accessible to screen readers but also maintain readability on mobile devices.

Please don't hesitate to contact us if you have questions about image accessibility or need assistance with future web projects and page layouts. We're here to help!

We hope you found this blog post informative and helpful in optimizing your website's content and accessibility.