# How to Translate Website Banners for Each Market | Vitra.ai

> Homepage banners carry their words inside the image, so translation means re-rendering. How to handle text expansion, right-to-left layouts and seasonal swaps.

**Canonical URL**: https://www.vitra.ai/retail/translate-website-banners
**Source**: This is the Markdown rendering of https://www.vitra.ai/retail/translate-website-banners, generated at build time from that page.

---

4 min read

# How to Translate Website Banners for Each Market

Homepage banners carry their words inside the image, so translation means re-rendering. How to handle text expansion, right-to-left layouts and seasonal swaps.

[Samhitha J Bhatt](https://www.vitra.ai/author/samhitha)
Senior Product Manager , Vitra.ai
Updated Aug 17, 2026

![How to Translate Website Banners for Each Market](https://www.vitra.ai/static/images/blog/translate-website-banners.jpg)

Table of contents

[The banner is the last English thing on a translated homepage](#the-banner-is-the-last-english-thing-on-a-translated-homepage)

[Expansion, and what it breaks](#expansion-and-what-it-breaks)

[Right-to-left is a layout decision](#right-to-left-is-a-layout-decision)

[Making it a batch](#making-it-a-batch)

[FAQ](#faq)

Contributors

[Samhitha J Bhatt](https://www.vitra.ai/author/samhitha)
Senior Product Manager

Subscribe to our newsletter

Subscribe

> **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](https://www.vitra.ai/platform) 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

Language

Length against English

First thing to break

German

About a third longer

The headline overflows its band

French, Spanish

About a fifth longer

Two lines become three

Russian

Somewhat longer

Button labels

Arabic, Hebrew

Similar, reversed

The whole composition mirrors

Chinese, Japanese

Shorter

Nothing, though spacing looks loose

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](https://www.vitra.ai/features/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](https://www.vitra.ai/features/image-personalization) produces the desktop, mobile and app placements from it.

Hold the promotional vocabulary steady with a [translation memory](https://www.vitra.ai/features/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](https://www.vitra.ai/retail/translate-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.

Our blog

## Lastest blog posts

Tool and strategies modern teams need to help their companies grow.

Automotive

[Automotive Brochure Localization by Market](https://www.vitra.ai/automotive/automotive-brochure-localization)
A car brochure is a spec grid, a legal footer and a photo library, all market-specific. What actually has to change, and why the layout decides the schedule.

[Samhitha J Bhatt](https://www.vitra.ai/author/samhitha)
Aug 18, 2026

Automotive

[Automotive Campaign Localization Across Markets](https://www.vitra.ai/automotive/automotive-campaign-localization)
Campaigns run through national companies and dealer networks, so one master becomes hundreds of files. Where the offer text and the disclaimers actually break.

[Samhitha J Bhatt](https://www.vitra.ai/author/samhitha)
Aug 18, 2026

Automotive

[Car Service Manual Translation for Technicians](https://www.vitra.ai/automotive/automotive-service-manual-translation)
A workshop manual is read mid-repair by someone with the car on a lift. What that demands of procedures, torque figures and fault codes, in every language.

[Samhitha J Bhatt](https://www.vitra.ai/author/samhitha)
Aug 18, 2026

[View all posts](https://www.vitra.ai/blog/page/1)

---

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.vitra.ai/retail/translate-website-banners"
  },
  "headline": "How to Translate Website Banners for Each Market",
  "image": [
    {
      "@type": "ImageObject",
      "url": "https://www.vitra.ai/static/images/blog/translate-website-banners.jpg"
    }
  ],
  "datePublished": "2026-08-17T00:00:00.000Z",
  "dateModified": "2026-08-17T00:00:00.000Z",
  "author": [
    {
      "@type": "Person",
      "name": "Samhitha J Bhatt"
    }
  ],
  "publisher": {
    "@type": "Organization",
    "name": "Vitra.ai",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.vitra.ai/static/images/vitra-v-logo.png"
    }
  },
  "description": "Homepage banners carry their words inside the image, so translation means re-rendering. How to handle text expansion, right-to-left layouts and seasonal swaps."
}
```

```json
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.vitra.ai"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Retail",
      "item": "https://www.vitra.ai/retail"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "How to Translate Website Banners for Each Market",
      "item": "https://www.vitra.ai/retail/translate-website-banners"
    }
  ]
}
```

```json
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Why do translated websites still show English banners?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "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."
      }
    },
    {
      "@type": "Question",
      "name": "How much extra space do banner headlines need?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "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."
      }
    },
    {
      "@type": "Question",
      "name": "Should banners be mirrored for Arabic and Hebrew?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "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."
      }
    },
    {
      "@type": "Question",
      "name": "How can banner translation be made repeatable?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "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."
      }
    }
  ]
}
```