Should You Embed Text in Images? Web Design Best Practices Explained

Posted February 19, 2026 · 8 min read

In the early days of the web, embedding text inside images was popular. Styling technologies, such as CSS, were in their infancy, and options to format text were limited. Embedding text in images allowed for greater creative flexibility. Today, however, design and development standards strongly advise against this practice for most use cases. Text should be delivered as HTML text whenever possible, for reasons spanning accessibility, multilingual support and internationalization, search engine optimization, responsiveness and usability, continuity of design, performance and maintainability, and legal and compliance risks.

The Web Content Accessibility Guidelines (WCAG), which form the internationally accepted standard for accessible digital content, explicitly recommend using text instead of pictures of text when HTML and CSS can present the same information. This is part of WCAG Success Criterion 1.4.5: Images of Text (Level AA), whose goal is to ensure users can adjust how text is presented by using text instead of pictures of text. Exceptions include logos and other highly specific use cases where the style is a matter of a brand mark, or the specific graphic form of the text is critical.

Accessibility

As is the case with most web design and development best practices, accessibility is the most critical reason to avoid text embedded in images.

Assistive technologies, like screen readers, cannot read text embedded in images. Screen readers are relied upon by people who are blind or have low vision. Screen readers are able to read the alt attribute of the image, but not the visual text itself.
Formatting within the alt text of an image is not possible, meaning large or complex text cannot be presented in a way that can be easily digested. Multiple sentences, heading, and bullet content cannot be encoded in alt attributes. Alt text is intended for short, descriptive text, not long informational content.
Visually impaired users often increse the zoom scale of their browser text to improve readability. Mobile devices make it especially easy to change the scale of content. Text embedded within images does not respond to the same native scaling methods as text.
When images are scaled, text in images is rendered pixelated and often unreadable. Text in images is generally raster in nature—made up of pixels that cannot be scaled while maintaining clarity. However, HTML text is vector-based, meaning it is created by geometric paths that can be infinitely scaled, never losing quality.

From an inclusivity standpoint, embedding text in images excludes users from equal access to content, which is the opposite of accessible design best practices.

Multilingual Support and Internationalization

One of the most overlooked problems with embedding text in images is how it undermines multilingual support and internationalization. Internationalization (i18n) is another website standard and goal of the World Wide Web Consortium (W3C)—the authority on developing standards and guidelines which allow us all to enjoy an accessible web.

Modern websites frequently support multiple languages to accommodate global audiences and a multilingual user base.

Similar to screen readers, many users utilize a browser extension or device-level translation feature which translates the content they are consuming into their native language. Text embedded within images is not currently translated by these utilities.
If text is embedded in images, then either all users are served the same language (which may not be consistent with the language set in their device), or individual image assets need to be created for each language.
If using a graphic for each language, a minor copy edit would require modification of multiple images rather than simply updating the text copy quickly and in one location.
Different languages expand and contract in unpredictable ways. German and Finnish, for example, often expand 20-35% longer than English. Chinese and Japanese are typically more compact.
In US states such as Texas (population 32 million), approximately 30% of the state's residents speak Spanish, suggesting that many of those users would prefer to digest content in a non-English language.

The W3C Internationalization Activity (W3C i18n) emphasizes separating content from presentation specifically to support global scalability and language adaptation. Embedding text in images directly violates this principle.

Search Engine Optimization

Search engines, like Google, index the textual content of web pages to determine relevance and rankings. While images are often indexed as well, they are not processed for their textual content in the same way, rather, as a supplement to written content.

When text is embedded inside images, search engines can't crawl it. The text that is crawled is from the alt attribute, which we mentioned doesn't allow for formatting that would otherwise provide the search engine with context clues in how the content best fits with the page copy.
While alt attributes help search engines understand images, they are not a substitute for HTML text and often don't carry the same weight in search engine algorithms.

Text in images ultimately weakens your SEO strategy by hiding semantic content from crawlers.

Responsive Design and Usability

By many estimates, approximately 64% of all modern internet traffic (as of 2025) originates from mobile devices. The unpredictable nature of modern screen sizes makes responsive design more important than ever.

Text in images does not change size when users are scaling only text in their browser, a feature commonly used by the visually impaired or simply demographics with aging eyes.
If the whole page is scaled, embedded text does not reflow or resize fluidly like HTML text. This can make it very difficult to read on smaller devices, hurting readability.
Mobile devices in particular make it easier than ever to scale content. Users expect text to scale with font settings and accessibility adjustments. Since embedded text is part of an image, it bypasses user preferences, leading to an unpredictable and often frustrating user experience.
Text in images can also not be easily copied by the user, as in the case of someone wanting to easily share or search for related content. On the note of accessibility, copy-paste is often essential for assistive workflows.
"Find on page" does not work for text embedded in images, so users trying to locate or refer back to specific content would experience unnecessary friction in using common tools such as on-page searches.

HTML text styled with CSS, in contrast, supports fluid scaling, line wrapping, and accessibility adjustments.

Continuity of Design

Thoughtful web design respects the Law of Continuity, rooted in Gestalt psychology. This principle explains how users naturally perceive visual elements as part of a unified whole rather than the sum of their parts. When typography, spacing, and alignment are consistent, users experience visual flow. When they are not, friction increases—even if the user cannot consciously articulate why.

The alignment, margins, padding, line height, letter spacing, and font rendering of embedded text rarely match the live HTML typography system exactly.
Rasterized text (embedded in an image) does not benefit from vector-based browser font rendering, subpixel smoothing, or responsive typographic scaling.
Image-based text cannot inherit global design rules such as font families, font weights, spacing variables, or line-height rules.
As images resize relative to their container, the typographic hierarchy (H1, H2, body, caption) becomes distorted. Headings may appear smaller than intended, or body text may appear disproportionately large compared to surrounding content.
Minor inconsistencies compound across a page, weakening visual rhythm and hierarchy.

These disruptions may seem subtle, but design continuity operates at a subconscious level. Inconsistent typography increases cognitive load because users must re-interpret visual patterns instead of relying on predictable structure. Over time, this erodes perceived polish and professional credibility.

Performance and Maintainability

Embedding text in images impacts performance and development workflow:

Each image adds an http request to the server, which can increase page load times, especially if many images are used to present what could instead be simple HTML text. Longer load times correlate with higher bounce rates and poorer user engagement, and contribute to greater server stress and resource needs as content and site views scale.
Updating text becomes cumbersome. Rather than simply updating a line of text, changing text in an image requires access to the original design/image file and use of a graphic editor. Often, these assets have been lost or forgotten, leading to lost time and ultimately design inconsistencies.
In the event of a site-wide style change, for example updating a site to a new font family, what would be a quick, global change within the stylesheet would instead require manually reworking every image that utilizes the font. This issue is compounded when multiple images are used for different languages or screen resolutions.

By contrast, HTML text is much more performant, can be updated inline, and the styling can be updated globally with minimal effort and without the need for graphic editing tools.

Legal and Compliance Risks

Beyond usability and performance concerns, embedding text in images introduces measurable legal and regulatory exposure.

Class-action lawsuit National Federation of the Blind et al v. Target Corporation mentioned accessibility barriers on the Target website, including missing and incomplete alt text for images and display of content that was incompatible with screen-reading technology.
Web accessibility litigation continues to rise, with thousands of cases filed annually.
Plaintiffs regularly allege inaccessible content blocks access to services, citing lack of alternative text, missing semantic text, inadequate font sizing and scaling options, or unnecessary reliance on graphic text.

Digital accessibility is no longer merely a best practice; in many jurisdictions, it is a legal requirement. In the United States, inaccessible websites have been challenged under the Americans with Disabilities Act (ADA), particularly under Title III, which governs public accommodations. Courts have increasingly interpreted commercial websites as places of public accommodation or as extensions of physical businesses.

WCAG 2 Level AA is widely recognized as the accessibility standard used in litigation and settlement agreements. Because WCAG Success Criterion 1.4.5 explicitly discourages images of text when HTML can present the same information, embedding text in images can create nonconformance risks.

So, should we be embedding text in images?

Short answer: no. There is a time and place for it, but as this article discussed, those times and places are few and far between, and the net benefit of the practice doesn't outweigh the measurable risks.