How AI Website Translation Handles Images With Embedded Text: Common Mistakes and Practical Fixes
Most AI website translation tools cannot read text baked into image files. They translate HTML text, CSS content, and JavaScript-rendered strings, but pixels in a JPG or PNG stay unchanged. The reliable fixes are...
If you run a multilingual site, you have probably noticed that headlines, buttons, and product descriptions switch languages cleanly while the text inside your hero banner, infographic, or screenshot stays stuck in the original language. That is not a bug in your translation agent; it is how the web works. Browsers serve image files as opaque binary blobs. Standard AI translation crawlers and JavaScript snippets only see the DOM — HTML elements, attributes, and text nodes — so any words rendered into pixels at design time are invisible to them.
The good news is that you do not need to abandon visual design. You do need to choose a strategy that matches your content velocity, design system, and engineering bandwidth. Below are the most common mistakes teams make, why they happen, and the practical patterns that actually ship.
Why Text in Images Gets Missed
Translation agents — whether they run as a JavaScript snippet, a server-side proxy, or a scheduled crawl — operate on the document object model. They parse <p>, <span>, aria-label, alt, and even text generated by React or Vue components after hydration. An <img src="/hero.png"> tag gives them a URL and an alt attribute, nothing more. The pixel data inside hero.png is never downloaded, decoded, or OCR'd by the translation layer unless you build a custom pipeline for it.
This limitation is universal. The SERP snapshot shows dedicated image-translation products like Smartcat and Owll AI that combine OCR with neural machine translation, but those are separate tools you invoke per file, not automatic features of a website translation agent. SeaText's own Translation Agent advertises "Translate entire site with zero code and full control" across 125 languages, and the documentation emphasizes HTML-level translation with glossary and SEO metadata handling — not pixel-level OCR.
Common Mistake: Assuming AI Reads Images Automatically
Teams often deploy a translation agent, verify that their blog posts and navigation switch languages, and assume the job is done. Weeks later they discover that the "Free Trial" badge baked into the hero illustration, the feature icons labeled in Photoshop, and the compliance logos with embedded legal text never changed. The mistake is treating images as translatable content instead of treating them as design assets that happen to contain words.
This mistake compounds when marketing updates the English hero image but forgets to update the Spanish, French, and Japanese versions. The site drifts into a state where the HTML is localized but the visuals tell a different story, eroding trust and conversion.
How Modern Tools Actually Handle Image Text
There are three architectural approaches, each with different trade-offs:
- CSS text overlays. Keep the background image pure — photography, gradient, texture — and layer real HTML text on top with absolute positioning or CSS Grid. The translation agent sees the text nodes and translates them like any other copy. This works for headlines, CTAs, and short callouts.
- SVG with translatable
<text>elements. Export illustrations as SVG, ensure the text layers remain as<text>nodes (not converted to paths), and inject the SVG inline or via<use>. The translation agent can then rewrite the text content. This scales for icons, diagrams, and simple infographics. - Separate image-localization workflow. For complex graphics — screenshots, charts, photographs of physical signage — maintain a per-locale asset folder (e.g.,
/images/es/hero.png,/images/fr/hero.png) and swap thesrcvia a small locale-aware component or edge function. This is manual but reliable.
Three Practical Workarounds That Work
1. Move Text to HTML — The Default Choice
Redesign the component so the image is a background and the words live in the DOM. Example: a hero section with a background photo and an <h1>, <p>, and <button> overlaid. The translation agent picks up the heading, paragraph, and button text automatically. SeaText's agent handles this natively because it translates "pages into 125 languages with control" at the HTML level.
2. Use Inline SVG for Icons and Diagrams
Ask designers to export icons and diagrams as SVG with editable text layers. Commit the SVG files to the repo. At render time, inline the SVG so the translation agent can traverse the <text> nodes. Add a data-i18n-key attribute if you need glossary enforcement for specific terms.
3. Locale-Aware Asset Swapping for Complex Graphics
When you cannot avoid rasterized text (screenshots, photos of packaging, scanned PDFs), build a thin wrapper component: <LocalizedImage basePath="/images/hero" altKey="hero.alt" />. The component resolves /images/{locale}/hero.png at request time. Store the localized assets in your CMS or object storage. This workflow is manual but predictable — no OCR errors, no layout drift.
When to Rebuild vs When to Localize Separately
Use this decision checklist for each image that contains text:
- Can the text be separated from the visual? Yes → CSS overlay or inline SVG. No → go to step 2.
- Does the image change frequently? Yes (e.g., dashboard screenshots every sprint) → automate with a CI step that regenerates localized screenshots. No (e.g., annual compliance badge) → manual asset swap is fine.
- Is the text volume high? Long-form infographics with paragraphs → consider rebuilding as HTML/CSS for accessibility and SEO. Short labels → asset swap is acceptable.
- Do you have design-system governance? If designers hand off Figma files with text layers intact, you can automate SVG export. If you only get flattened PNGs, you are locked into asset swap.
Key Facts
| Aspect | Detail | Source |
|---|---|---|
| Translation scope | HTML text, CSS content, JS-rendered strings, SEO metadata, alt attributes | S1, S2, S4, S5 |
| Image text handling | Not translated automatically; requires separate workflow | SERP research, industry standard |
| Supported languages | 125 languages | S1, S2, S4, S5 |
| Integration method | JavaScript snippet, zero-code deployment | S1, S2, S4 |
| Glossary control | Full control over terminology | S1, S2 |
| SEO metadata | Translates meta tags and structured data | S1 |
Limitations and Edge Cases
- Dynamic canvas/WebGL content. Text rendered inside
<canvas>or WebGL scenes is invisible to translation agents. Treat these like images — either move labels to DOM overlays or localize the entire scene per locale. - Third-party embedded widgets. Chat widgets, maps, payment iframes — their internal text is not reachable. Check vendor i18n support separately.
- OCR-based translation. Tools that OCR images post-deployment exist (see SERP), but they introduce latency, layout-shift risk, and per-image costs. They are not a substitute for authoring translatable text in the first place.
- Right-to-left layouts. CSS overlays and SVG handle RTL automatically if your CSS uses logical properties (
margin-inline-start). Asset-swapped images must be mirrored manually.
FAQ
Can I just run OCR on my whole site after translation?
You could, but it is fragile. OCR misreads fonts, breaks on compression artifacts, and cannot reflow text when translations are longer. The translated image will look off-brand. Better to author translatable text from the start.
Does SeaText's Translation Agent translate alt attributes?
Yes. The agent translates HTML attributes including alt, title, and aria-label, which helps accessibility and image SEO. It does not translate the pixel content of the image file itself.
What about screenshots in documentation?
Documentation screenshots are the classic asset-swap case. Keep a /docs/screenshots/{locale}/ folder. Automate with a CI job that runs your app in each locale, takes screenshots via Playwright or Cypress, and commits the localized PNGs.
How do I handle user-uploaded images with text?
User-generated content is out of scope for site translation. If you need to translate user uploads (e.g., marketplace listings), you need a separate OCR+NMT pipeline that runs at upload time, not a website translation agent.
Will CSS overlays hurt Core Web Vitals?
Properly implemented overlays add negligible weight — a few extra DOM nodes and CSS rules. They often improve CLS because text loads with the font, not after a heavy image. Test with Lighthouse.
Can I use one SVG for all languages?
Yes, if you keep text as <text> nodes and inline the SVG. The translation agent will rewrite the text content per language. Ensure the SVG viewBox has enough padding for text expansion (German, Finnish can be 30–50% longer).
What is the fastest way to audit my site for untranslated image text?
Run a crawler that extracts every <img> and background-image URL, then visually spot-check the top 50 by traffic. Flag any that contain readable words. Prioritize fixes by conversion impact.
Further reading and comparison sources
These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.
How SeaText can help
SeaText's Website Translation Agent translates your HTML, CSS, JavaScript-rendered content, and SEO metadata across 125 languages with a single JavaScript snippet. It gives you full glossary control so product names and brand terms stay consistent. For images with embedded text, the agent handles alt attributes and ARIA labels automatically, but pixel-level text requires one of the workarounds above — CSS overlays, inline SVG, or a locale-aware asset swap. You can deploy the agent in minutes, test on a staging subdomain, and scale to production without engineering tickets.