Internationalization and localization of images

In today’s world, website HTML pages, computer software and related products contain enormous amounts of multimedia resources in the form of audio and video files, including static or moving images. The web industry and its translators are required to take a multilingual and multicultural approach in the face of this progress. A message can only be suitably interpreted by the end user if it has been filtered through his or her cultural context. In this article I would like to show you how images are handled from the source through the globalization process, and offer concrete technical solutions to obtain the best outcome for your localized images.

First, I’ll describe the cultural aspects inherent in image interpretation before going on to discuss the linguistic aspects. Then, with a few concrete demonstrations, I’ll point out the technical solutions for image and content localization, in various ways and using various programs.

Cultural aspects

To understand how much our visions of the world vary according to where we happen to be in it, have a look at this map:

Source: http://www.jmthivel.com/jmt_arbrevoyage/voyages/voyages_cartes.htm

Nothing surprising about that, you say; it’s just an ordinary map of the world, the kind that we Europeans are used to seeing.

Now have a look at this one:

Source: http://derrierelescartes.over-blog.com/article-13788300.html

This is how Asian populations such as the Chinese or Japanese see the world. They cut the Atlantic Ocean in half and put Asia in the center of the map. In fact, the translation of the word « China » is « the middle kingdom ».

And here is an Australian view of the world:

Source: http://incredimazing.com/page/Australiacentered_World_Map

They see the world upside-down compared to the European view. The South Pole figures at the top, and Australia appears in the center. This is more for the anecdote, because in today’s world, Australians are more likely to refer to a map of the world with Europe at its center.

Anyway, the reason I’m talking about the frames we use to view the world is to incite you to reflect about the perception of images and the fact that interpretation is everything. Of course, it’s easier for the population of a given country to find their homeland in the center of the map, rather than having to hunt for it in one of the far corners.

However, this choice reveals a biased perception of the world, which can imply that the countries shown in the center are more important than the others. This is the phenomenon of ethnocentricity. What’s ethnocentricity, you say? The World English Dictionary offers us this definition: « Belief in the intrinsic superiority of the nation, culture, or group to which one belongs… »

To localize an image is to conceive of it through the eyes of the eventual beholder – the hypothetical member of the cultural group who will see it once it’s out there – and to imagine what it will represent for that person. The localized version should carry the same message and meaning as the original.

Colors or numerals are another example of symbols that have vastly diverse interpretations from one population to another.

Take, for example, the color white:

In the Occident, white is generally associated with purity, innocence, chastity, peace (as in the white flag), virginity, marriage, spirituality, holiness and life.

In Asia or Africa, white is the color of death and grief. Death being the necessary passageway to a new world, it is considered a renewal, of which white represents the purity.

Color interpretations according to culture

Country Red Blue Green Yellow White
United States Danger Masculinity Security Cowardliness Purity
France Anarchy, Communism Liberty, peace, royalty (blue blood) Criminality Temporality Monarchy, neutrality
Egypt Death, cruelty Virtue, truth, fidelity, immortality Fertility, strength, Islam Joy, prosperity Joy, celebration
India Life, creativity Communication, self-expression Prosperity, fertility Success Death, purity
Japan Anger, danger Cruelty, contemptibility Future, youth, energy Race, nobility Death
China Joy, marriage Heaven, lightness Ming dynasty, heaven, lightness Birth, health, strength Death, purity

Source: CRIM Training

Many symbols also have a cultural connotation.

This crux gammata, which decorates a Balinese temple, represents life, love, supreme perfection and infinity.

© Cornelia Buttmann-Scholl

The Swastika: symbol of Nazi Germany

© Wikipedia

The crux gammata is a very positive symbol in the Hindu religion; it represents construction and growth. In other cultures, it is perceived as a Swastika, symbol of Nazi Germany, and is therefore an extremely negative, even shocking, symbol.

Given these examples, it is easy to understand why it is preferable to avoid using this type of symbolism altogether when it comes to globalization, as symbols procure very different interpretations from one culture to the next.

Here is a series of religious symbols, © Wikipedia:

Left to right and top to bottom:

Cross (Christianity)

Star of David (Judaism)

Om (Hinduism)

Star and crescent (Islam)

Dharma wheel (Buddhism)

Torii (Shinto)

Khanda (Sikhism)

Nine-pointed star (Baha’ism)

Khamsa (Common to all Middle Eastern religions:

Islam, Christianity and Sephardic Judaism)

It is better to be familiar with these, and, in a globalization approach, avoid using them altogether to avoid interpretation problems.

Here are two stop signs:

Occidental Stop Sign, © Wikipedia

Japanese Stop Sign, © Wikipedia

Just by seeing the shape of the Occidental sign on the left, we think of a stop sign. But the Japanese don’t have the same cultural reference, as they are used to triangular stop signs.

It is very important to understand the meaning of various symbols, and when localizing an image, to be aware that the content of an image can be perceived very differently from one culture to the next.

Here we have two screen snapshots from a bilingual Arabic / English website for the Saudi Arabian Ikea stores.

Arabic version, © IKEA

IKEA en arabe

English version, © IKEA

Several elements stand out.

First of all, observe the little image of the family shopping at IKEA at the bottom of the image. The man is in traditional dress and the woman is veiled; we can see their child and shopping cart. This is clearly a culture-specific image. In the Middle East, it would not be appropriate to show certain images, such as lightly clad women.

A great number of image banks all over the world are available to provide the images needed in localization, that is to say in replacing culturally inappropriate images with new ones. To cite just a few: Getty, Corbis, Jupiter Images, Fotolia, Alamy, Andia, etc. To find them, just type « image bank » into your search engine and you’ll get a large selection.

The use of images from image banks is generally subject to the conditions of an image use license. There are two general types of licenses: royalty free and rights managed. I’m not going to enter into the finer details here, but keep in mind that for rights managed licensed images, the price to be paid depends on how the image is going to be used. According to the needs of the client (for example, the size and duration of the image’s use), the price may vary considerably. Royalty free licenses are more freely available for use, implying an unlimited authorization (for example, on various media, for an unlimited time, etc).

For each situation there is an image solution.

Up to this point, we have been discussing the pictorial contents of images.

Let’s refer back to the Saudi Arabian Ikea website.

After our quick analysis of the image, let’s turn towards the linguistic aspects of the image content.

We may observe that the text is included in buttons and so the text zones function as images.

We can observe the direction of the writing and thus the direction that the reader’s eyes will follow. Depending on the language one is reading, the eyes scan from left to right, right to left or top to bottom.  The page layout must be adapted as the document is localized to accommodate the direction of the writing. On the English version of the Ikea website, the sequence begins on the left and leads towards the right, whereas on the Arabic site, the sequence is reversed. Following this directional adaptation, the button containing the text (or other control, such as a blank-box, cursor, input field, etc.) must also be adapted according to these changes.

In Photoshop, this is simply accomplished through the menu Image > Image Rotation > Flip  Canvas Horizontal (or Flip  Canvas Vertical, accordingly).

Character chain length

Obviously, the number of characters in a word will not be the same once that word is translated into another language; but in certain cases, the distances between the letters and the spaces between lines change as well.

Have a look at some English-to-German translations:

Link -> Verknüpfung / 4 letters -> 11 letters

Login -> Anmeldung / 5 letters -> 9 letters

Update -> Aktualisierung / 6 letters -> 14 letters

If these translations are to be viewed within buttons or on background images, the dimension of the image will have to change accordingly to avoid problems.

Changing all the background images takes a lot of time.

The ideal solution would be to anticipate this type of problem from the start, when the page is designed, and to adopt an internationalization approach in ensuring that the CSS (Cascading Style Sheet) can accommodate the various translations of its content.

For those of you who are familiar with CSS and who would like to learn more on the possible solutions or view the codes to be used, I recommend the following articles:

http://www.w3.org/International/questions/qa-resizing-backgrounds

http://webghusse.free.fr/cours_html/background.html

Another example of text found within an image is that of the screen snapshot. Let’s take a specific example: you are localizing a website that features a screen snapshot on its ‘access map’ page. Let’s say the snapshot is of a Google map in French. To localize this image into English, for example, you could access Google maps in English, define the same geographical coordinates and take a new screen snapshot of the result. So… If the resources are available on-line, as in this example, it is best to create a new screen snapshot in the target language rather than translating the text.

This is a simple example, but sometimes access to a specific program or database is necessary if the screen snapshot includes meaningful information from such a source. The easiest solution for the translator without access to such a source would be to contact the person who took the original screen snapshots and request that a new version be taken in the target language.

Diagrams

When translating the explanations of a diagram, it is easiest if the explanations correspond with numbers or letters, as is the case in the user manual of this household blender:

© SEB

Thanks to these numbers, the translator will not have to alter the image to localize the diagram. If a title or textual explanation is necessary, it is better that these be placed in separate fields (‘title’ and ‘description’) to facilitate the translation process. That way, the translator can insert the translations directly into the appointed space, without having to use image editing software.

If text must be translated within an image despite the best intentions of globalization approaches, there are still various technical solutions for the translator dealing with it.

First let’s look at handling static images. These images come in various formats, such as jpg, tif, png, bmp, etc. However, an image containing text cannot be directly generated in one of these formats. There is necessarily a source file where the text is displayed in an overlay. If the image was created with Photoshop, the original format is psd. The translator will have to request the original files from the contractor or client. It is then possible to translate directly in the text overlays and create a different overlay for each language version.

Here is a demonstration of the process in Photoshop:

This is a background and a text layer that can be easily modified. In a jpg or png file format, the layers are flattened and cannot be directly changed. It’s also a guessing game to determine the font style and size, etc.

While we’re on the subject, let me mention that there is an Open Source program that can process bitmap images and that is often considered a free alternative to Adobe Photoshop. It’s called GIMP. This program addresses the general public but gives professional quality results. It works with the Windows, Mac and Linux operating systems. Layers and other parameters specific to images published with GIMP are preserved through the XCF format.

What about moving images?

In gif images, we are dealing with several files that have been sequenced with a specific display time for each image. Each file consists of a moving gif which must be handled separately like a static image, then put back in the sequence. The translator must remember to adapt the image display time to give the reader necessary time to read the text in the target language.

The software from the Adobe CS3 Suite adapted to processing moving gif images is called Adobe Fireworks. A great number of freeware such as Image Ready, Animation-Shop, Gif Builder or the plug-in GIMP-Animation Package, are also available.

Among multimedia resources frequently encountered on the web, I must also mention the Flash format. Without going into technical details, I would just like to briefly touch on the handling of Flash files. Flash is a graphic creation program used to produce moving images (videos, animation, etc.) as well as browsing interfaces. The readable Flash file (in swf format) is obtained from the source file (fla format) compilation. A file in swf format cannot be directly changed; you have to work on the source file in fla format. As for an animated gif, it is necessary to adapt the display time of the text.

One of the more interesting aspects of the Flash program is a function it provides to externalize text chains in an xml file, which can then be integrated dynamically into the swf file. Thus translation work does not have to be carried out in the fla file format, which would call for a technical understanding of Flash, but simply in xml format. For more information on this function, please consult the following page: http://www.adobe.com/support/flash/languages/flashlocalization/

Image localization is a service that is offered by a certain number of translation agencies and translators specialized in localization. When translating with a program featuring translation memory functions, such as SDL Trados, a sub-directory for image treatment is generally available. All you have to do is place the new screen snapshots or translated images – or the unchanged images, depending on your requirements – into the specified folder.

To wrap up…

…this article, I’d like to localize the words of Philippe Geluck’s cat: « Better to be safe than sorry »!

Cat

© Philippe Geluck, Le calendrier du chat

That is to say, to gain time and therefore save money in the long run, the ideal approach is to design your product with internationalization in mind and anticipate a hypothetical localization by taking the various measures implied in this process from the beginning. And of course, if you’re hoping to rank with outstanding leading-edge translators specialized in localization, you must be able to understand and make use of the tools and programs available to produce localized images of the highest quality.

Répondre à cet article