← Volver al blog

Qué es un .oim: la imagen interactiva en un PNG

Por qué OIM guarda todo dentro del archivo

Un .oim es un PNG normal que guarda dentro capas, textos en varios idiomas, animaciones y firma digital. Es una imagen interactiva que sigue siendo un solo archivo. Así funciona y por qué el archivo no depende de un servidor para contar lo que dice.

Casi toda imagen de la web es muda. Un PNG guarda píxeles, y todo lo demás vive fuera: el texto en el HTML, las traducciones en otro servidor, las animaciones en un script, y la prueba de quién la hizo en ninguna parte.

OIM parte de la idea contraria: la imagen debe llevar consigo todo lo que necesita para ser ella misma.

Un archivo, no un sistema

Un .oim es un PNG normal. Cualquier visor lo abre. Pero dentro lleva la obra entera: capas, textos en cada idioma, animaciones e interacciones. Si lo copias, lo copias todo.

Un visor de imágenes corriente muestra solo la capa de fondo, sin los textos interactivos. Para ver los textos, los idiomas y los botones hace falta el player <oim-player>, que se explica en la sección «Cómo empezar». Lo que el archivo guarda no cambia; lo que cambia es quién lo interpreta.

Si dentro de diez años nuestro servidor no existe, la imagen base seguirá abriéndose en cualquier visor. Qué pasará con la parte interactiva depende de que alguien siga publicando el player. Si el script del player no carga, el lector sigue viendo la imagen base.

Un ejemplo sencillo: el cartel de una cafetería

Imagina el cartel de una cafetería. La foto del café es la capa de fondo y no cambia nunca. El título y el precio son capas de texto, cada una con su versión en español e inglés. El botón «Ver la carta» es una capa interactiva: al pulsarlo, la imagen avisa a la web y la web decide qué hacer.

Cuando cambia el precio del café, se corrige la capa de texto. La foto no se toca ni se vuelve a exportar.

Idiomas dentro, no al lado

El texto de una pieza OIM no se traduce generando otra imagen. Cada capa guarda su contenido en todos sus idiomas, y el player muestra el del lector. Una sola obra, tantas lenguas como haga falta.

El idioma se elige con el atributo lang del elemento. Si el sitio cambia de idioma, basta con llamar a setLang() y el texto cambia al instante, sin recargar la imagen.

La firma como confianza

Cada .oim va firmado con ECDSA. La firma cubre los datos y la imagen: si alguien altera el archivo, el player lo detecta y no lo muestra. No pedimos que confíes en nosotros; puedes comprobarlo.

Una imagen que no puede probar de dónde viene es una imagen que cualquiera puede reescribir.

La firma tiene su propio artículo, con los detalles del protocolo: firma digital de imágenes: cómo verificar su autoría. Aquí basta con saber que la firma existe y que se comprueba en el navegador del lector.

Sin llamar a casa

El player pinta en tu navegador. No hay lista de dominios, ni rastreadores, ni una petición a nuestros servidores cada vez que alguien mira la imagen. La única petición posible es la de una clave pública que aún no tiene. No carga fuentes externas: las fuentes de la pieza viajan dentro del archivo. Lo que ves es lo que el archivo contiene.

Lo que viene

Este blog es también un banco de pruebas: la imagen de arriba es un .oim real, creado desde nuestro conector MCP y publicado tal cual. Iremos usando esta sección para enseñar cómo se construyen piezas como esta, paso a paso. Si quieres ver cómo cambia una pieza según el idioma, lee imágenes multilingües: un PNG para diez idiomas.

Por qué importa

Una imagen que lleva su contenido no depende de que una página lo explique bien. Si alguien reenvía el archivo por correo, el mensaje sigue teniendo las capas, los textos en sus idiomas y la firma. Si la misma imagen se publica en tres sitios, es el mismo archivo en los tres. No hay que mantener tres copias alineadas, porque no hay copias que alinear. Pasa lo mismo con un cartel, un gráfico o una captura: la pieza viaja con lo que dice. Eso obliga a pensar cada pieza como un archivo completo, no como una imagen con notas al lado.

Cómo empezar

  1. Carga el script del player desde el CDN en la cabecera de tu página:
<script src="https://cdn.oim.media/player/v1/oim-player.js"></script>
  1. Declara la imagen con el elemento <oim-player> y el idioma que quieras mostrar:
<oim-player src="mi-cartel.oim.png" lang="es" mode="full"></oim-player>
  1. Si el archivo está en otro servidor, comprueba que ese servidor permite tu dominio (CORS). La guía completa está en inicio rápido.

Preguntas frecuentes

¿Un .oim se puede abrir como cualquier PNG?

Sí. Cualquier visor muestra la imagen base. Los textos interactivos, los idiomas y las animaciones solo aparecen con el player.

¿Necesito programar para usar una imagen OIM?

No para mostrarla. Solo necesitas programar si quieres que la web reaccione a un clic: el player emite un evento oim:action que tu código puede escuchar.

¿Qué pasa si alguien edita el archivo?

Si el archivo se altera, la firma deja de cuadrar y el player no muestra la imagen. El detalle está en firma digital de imágenes: cómo verificar su autoría.