Deja de exportar una versión por idioma. Un solo .oim lleva el texto vivo de cada idioma y lo muestra según el visitante, sin duplicar archivos. Así se hacen imágenes multilingües sin fabricar un PNG por cada lengua.
Pongamos un caso corriente. Una tienda prepara el cartel de sus rebajas y lo quiere en español, inglés y francés. El diseñador hace la pieza una vez y luego la duplica tres veces, cambiando solo el texto. Tres archivos. El lunes cambia el precio: hay que abrir los tres, corregirlos y volver a exportarlos. Y si alguno se olvida, la versión francesa anuncia un precio que ya no existe.
No es un problema de diseño. Es un problema de cómo guardamos las imágenes: el texto queda pegado a los píxeles, y para cambiar una palabra hay que fabricar otra imagen.
Una imagen que guarda todos sus idiomas
Un archivo OIM separa lo que se ve siempre igual (la foto, el fondo, las formas) de lo que cambia según quién mira (el texto). El texto no se dibuja dentro de la foto: viaja dentro del mismo archivo, en todos sus idiomas, y se coloca encima al mostrarse.
Para quien lo recibe no hay nada nuevo que aprender. Es un PNG: se abre en cualquier visor, se adjunta a un correo, se sube a una web. Donde esté el player de OIM, además, la imagen habla el idioma del lector.
Este mismo blog funciona así. La imagen de la portada es un único archivo que sirve igual a la versión en español y a la versión en inglés de este artículo.
Un caso paso a paso: el cartel de rebajas
Volvamos a la tienda. El diseñador crea la pieza con el texto principal en español. Después añade, para cada texto, su versión en inglés y en francés:
- «Rebajas de verano: 50 %» (es)
- «Summer Flash Sale: 50% Off» (en)
- «Vente Flash d'Été: -50 %» (fr)
El archivo es uno. Cuando llega el lunes y el descuento cambia, se corrige el texto en cada idioma dentro del mismo archivo y se publica de nuevo. Nadie tiene que abrir tres piezas ni preguntarse cuál es la buena.
En la web, el idioma se elige con el atributo lang. Para un selector de idioma en la propia página, basta con llamar a setLang():
<oim-player id="cartel" src="cartel.oim.png" lang="es"></oim-player>
<button onclick="document.getElementById('cartel').setLang('fr')">Français</button>
El cambio es instantáneo. La imagen no se recarga.
No es solo traducir palabras
Un titular en alemán ocupa bastante más que en inglés. Si la traducción se limita a sustituir el texto, el diseño se rompe: el titular se sale de su caja o pisa la foto.
Por eso el texto puede ajustar su tamaño según el idioma. El diseñador lo decide una vez, mirando cada versión, y desde entonces cada lector recibe la composición pensada para su lengua.
Texto que sigue siendo texto
Hay una ventaja que se nota menos y pesa más. Como el texto no está aplastado contra la imagen:
- Se puede seleccionar y copiar, como en cualquier página.
- Lo leen los lectores de pantalla, en el idioma activo, así que la imagen deja de ser un hueco para quien no ve.
- Se ve nítido a cualquier tamaño, también en pantallas de alta resolución.
Un ejemplo de la vida diaria: alguien con un lector de pantalla en inglés abre el cartel y oye el titular en inglés. Si cambia al francés, la voz cambia con él.
Lo que cambia en el día a día
Un cambio de precio se hace en un sitio. Una campaña en diez idiomas es un archivo, no diez. Y nadie tiene que preguntarse cuál de las versiones es la buena.
Para quien visita la página no cambia nada. Recibe el mismo archivo, desde el mismo enlace, y ve el texto en su idioma. Nadie tiene que indicarle qué versión descargar.
Cómo empezar
- Crea la pieza en el editor de OIM y escribe el texto de cada idioma en su capa.
- Carga el player y declara la imagen con el idioma inicial:
<script src="https://cdn.oim.media/player/v1/oim-player.js"></script>
<oim-player src="cartel.oim.png" lang="es"></oim-player>
- Para cambiar de idioma desde tu página, usa
setLang()como en el ejemplo anterior.
La guía paso a paso está en inicio rápido. Si quieres saber qué hace la firma con un archivo así, lee firma digital de imágenes: cómo verificar su autoría.
Diseña la pieza una vez. Que cada lector la reciba en su idioma.
Preguntas frecuentes
¿Puedo cambiar el idioma de una imagen sin recargar la página?
Sí. El método setLang() cambia el texto de la imagen al instante. No hace falta volver a descargar el archivo.
¿Un lector de pantalla lee la imagen en el idioma correcto?
Sí. Los textos se leen en el idioma activo, con su atributo de idioma, y la voz cambia al cambiar de idioma.
¿Qué se muestra si falta una traducción?
Si una capa no tiene texto en el idioma del lector, el player recurre al inglés, luego al español y, después, al primer idioma que tenga la capa.
Otras lecturas
- Qué es un .oim: la imagen interactiva en un PNG, para entender el archivo por dentro.
- Firma digital de imágenes: cómo verificar su autoría, para saber quién firmó la versión que estás viendo.