DEV Community

Cover image for How to Localize App Screenshots Without Redrawing Them
hinkid
hinkid

Posted on Edited on

How to Localize App Screenshots Without Redrawing Them

You extracted every string. You wired up i18next (or react-intl, or .strings files). Your UI now speaks Japanese, German and Spanish.

Then you open your App Store listing, your landing page, or your docs, and every screenshot is still in English.

That's the part of localization most of us skip. It's also the part users see first. On an app store page, people look at screenshots before they read a single line of your description. A Japanese user scrolling past English screenshots has already decided your app "isn't for them."

This post covers which images actually need localizing, the usual ways teams handle it, and a faster approach I've been using.

Which images actually need localizing?

Before you translate anything, take inventory. Text baked into images usually hides in five places:

• App Store / Google Play screenshots — usually the highest-impact images you own.

• Open Graph and social share images — what people see when your link is shared.

• Landing page hero and feature images — especially UI mockups with button labels.

• Help docs and tutorials — screenshots of your own interface.

• Email banners and onboarding graphics.

A quick test: open your site with a non-English locale and screenshot every page. Any English you can still read is on your list.

The three usual approaches (and where they break)

  1. Recreate each image per language in Figma. This gives the best control, if you still have clean source files. But the work grows linearly: 5 screenshots × 10 languages is 50 assets. And every copy change means redoing all of them.

  2. Hand it to a designer or agency. Good quality, but slow and expensive for a small team. It also turns every small copy tweak into a ticket.

  3. OCR + machine translation + paste it back on top. Cheap, but the result usually looks off. The new text doesn't match the original font, the background behind the old text needs patching, and longer translations overflow their boxes.

None of these is great when you just want your screenshots to match your already-translated UI.

Translating text directly inside the image

AI image translation tools now handle the whole pipeline in one step: detect the text, translate it, erase the original, and render the translation back in roughly the same position and style.

I use Editaimg's image translator for this. The workflow:

  1. Upload the screenshot (PNG, JPG or WebP).
  2. Pick the target language.
  3. Let it detect and replace the text.
  4. Review the result and download.

Before and after: an App Store screenshot with English captions translated into Japanese, keeping the original layout and colors

Before and after: a SaaS dashboard screenshot with English buttons and table headers translated into German

It currently supports 16 languages: Arabic, Chinese, English, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Portuguese, Russian, Spanish, Thai, Turkish and Vietnamese.

It's pay-as-you-go with credit packs rather than a subscription, which suits localization work: you do a big batch when you launch a language, then almost nothing for months.

Tips to get usable results

AI translation gets you most of the way. These habits close the gap:

• Start from screenshots with less text. Fewer, shorter labels translate more cleanly than dense paragraphs.

• Leave room for expansion. German and Russian often run 20–35% longer than English. If a button label is already tight, it will overflow.

• Check right-to-left languages manually. For Arabic, confirm the text direction and alignment look natural, not just that the words are correct.

• Inspect CJK and Thai rendering. Make sure characters aren't clipped and line breaks fall in sensible places.

• Use your own glossary. If your UI calls it a "Workspace," the screenshot shouldn't say "Project." Compare against your translation files.

• Get a native speaker to glance at the hero images. Ten minutes of review on your top three images is worth it.

A workflow that scales

Don't localize everything at once. Pick the two or three languages where you already see traffic or sign-ups in your analytics. Translate only your store screenshots and landing page hero for those. Watch conversion for a few weeks, then expand to the rest of your images and languages.

Keep your English originals and translated versions in a predictable folder structure (for example screenshots/ja/01-home.png). Then your store upload or static site build can pick the right file per locale.

Wrapping up

Localization isn't done when the strings are translated. If your screenshots still speak only English, so does the first impression of your product.

If you're localizing e-commerce images rather than app screenshots, I wrote a separate guide on translating Amazon listing images.

How does your team handle screenshot localization today? I'd love to hear what's worked for you in the comments.

Top comments (0)