How to Translate Website Banners for Each Market

Quick answer — Website banners keep their headline inside the image file, so translating one means re-rendering it rather than editing text. Build the banner as layers and the next language is a batch job; flatten it and every language is a design request.

Vitra.ai Universe makes, adapts and translates the whole set.

The banner is the last English thing on a translated homepage

A retailer translates the navigation, the categories, the product copy and the footer. Then the hero banner at the top of the page still says "Mid-Season Sale — Up to 50% Off" in English, because that sentence is pixels.

It is also the largest element on the page and the first thing anybody sees.

Expansion, and what it breaks

The usual response is to shrink the type until it fits, which produces a headline nobody reads on a phone.

The better response is to design the English version with room in it. A banner laid out tightly around a short English phrase has no capacity for a language that needs more, and no amount of clever typesetting creates space that was never there.

Right-to-left is a layout decision

Mirroring an Arabic banner is usually correct, because reading order moves and a composition that leads from the left leads from the wrong side.

The product photograph inside it should not mirror. A reversed product is a different product to anyone looking closely, and on packaging it is visibly wrong.

Making it a batch

Keep the text as a live layer. Then image translation swaps the string and lays it out again, and eleven markets is one job. Banners also change constantly — a promotion every fortnight, a sale every quarter — so this is not a one-time migration. It is a recurring cost that either scales or does not.

Once each language version exists, image personalization produces the desktop, mobile and app placements from it.

Hold the promotional vocabulary steady with a translation memory. "Sale", "clearance" and "up to" carry legal weight in some markets, and they should read identically every time rather than being re-decided per banner.

The printed equivalent behaves differently, because a wrong sign cannot be swapped at midnight - see in-store signage.

FAQ

Why do translated websites still show English banners? Because the headline lives inside the image rather than in a content field. Everything the CMS holds gets translated, and the largest element on the page is a flat file the workflow never touches.

How much extra space do banner headlines need? German commonly runs about a third longer than English, French and Spanish about a fifth. Design the original with slack rather than shrinking type later, since a smaller headline is unreadable on a phone.

Should banners be mirrored for Arabic and Hebrew? The arrangement should flip, because a banner leads the eye from the reading-start side and the call-to-action belongs at the end of that path. The logo lockup and the product photograph stay as they are.

How can banner translation be made repeatable? Keep the headline as a live text layer rather than flattening the export. Banners change every few weeks, so this is a recurring cost, and layered sources turn each round into a batch instead of a design request.