Stop exporting one version per language. A single .oim carries the live text of every language and shows the right one for each visitor, without duplicating files. This is how multilingual images work without making a PNG for each language.
Take a common case. A shop prepares the poster for its sale and wants it in Spanish, English and French. The designer makes the piece once and then copies it three times, changing only the text. Three files. On Monday the price changes: you open all three, correct them and export them again. And if one gets forgotten, the French version announces a price that no longer exists.
This is not a design problem. It is a problem with how we store images: the text is glued to the pixels, and to change one word you have to make another image.
One image that keeps all its languages
An OIM file separates what always looks the same (the photo, the background, the shapes) from what changes depending on who is looking (the text). The text is not drawn into the photo. It travels inside the same file, in every language, and is placed on top when shown.
For the person who receives it there is nothing new to learn. It is a PNG: it opens in any viewer, attaches to an email, uploads to a website. Where the OIM player is present, the image also speaks the reader's language.
This blog works this way. The image at the top is one file that serves both the Spanish and the English version of this article.
A step-by-step case: the sale poster
Back to the shop. The designer builds the piece with the main text in Spanish. Then, for each text, adds the English and French versions:
- "Rebajas de verano: 50 %" (es)
- "Summer Flash Sale: 50% Off" (en)
- "Vente Flash d'Été: -50 %" (fr)
The file is one. When Monday comes and the discount changes, you correct the text in each language inside the same file and publish it again. Nobody has to open three pieces or wonder which one is right.
On the web, the language is set with the lang attribute. For a language selector on your own page, call setLang():
<oim-player id="poster" src="poster.oim.png" lang="es"></oim-player>
<button onclick="document.getElementById('poster').setLang('fr')">Français</button>
The switch is instant. The image is not reloaded.
It is not only translating words
A headline in German takes up noticeably more room than in English. If translation only swaps the text, the layout breaks: the headline spills out of its box or covers the photo.
That is why text can adjust its size to the language. The designer decides once, looking at each version, and from then on every reader gets the layout planned for their language.
Text that stays text
There is an advantage that is noticed less and matters more. Because the text is not flattened onto the image:
- It can be selected and copied, as on any page.
- Screen readers read it, in the active language, so the image stops being a gap for people who cannot see it.
- It stays sharp at any size, including high-resolution screens.
An everyday example: someone with a screen reader set to English opens the poster and hears the headline in English. If they switch to French, the voice switches with it.
What changes day to day
A price change is made in one place. A ten-language campaign is one file, not ten. And nobody has to ask which version is the right one.
For the visitor nothing changes. They receive the same file, from the same link, and see the text in their language. Nobody has to be told which version to download. The same holds for a page served in more than two languages: the file stays the same, and each language is one more text layer.
How to start
- Create the piece in the OIM editor and write the text of each language in its layer.
- Load the player and declare the image with the starting language:
<script src="https://cdn.oim.media/player/v1/oim-player.js"></script>
<oim-player src="poster.oim.png" lang="es"></oim-player>
- To change language from your page, use
setLang()as in the example above.
The step-by-step guide is in the quick start. If you want to know what the signature does with a file like this, read digital signature for images: how to verify authorship.
Design the piece once. Let each reader receive it in their language.
Frequently asked questions
Can I change an image's language without reloading the page?
Yes. The setLang() method switches the image's text at once. The file does not have to be downloaded again.
Will a screen reader read the image in the right language?
Yes. Texts are read in the active language, with its language attribute, and the voice changes when the language changes.
What is shown if a translation is missing?
If a layer has no text in the reader's language, the player falls back to English, then Spanish, then the first language the layer has.
Further reading
- What is a .oim: an interactive image inside a PNG, to understand the file inside.
- Digital signature for images: how to verify authorship, to know who signed the version you are looking at.