OIM OBJECT INTERACTIVE MEDIA

Es un PNG. Y lleva dentro su texto. It’s a PNG. And it carries its text inside.

Con Object Interactive Media (OIM), la multimedia evoluciona hacia objetos espaciales y dinámicos dentro de una imagen normal. Guarda capas vivas, tipografía y lógica interactiva en el mismo archivo, preservando una imagen base intacta que cualquier visor puede abrir. With Object Interactive Media (OIM), digital media evolves into spatial and dynamic objects inside an ordinary image. It packs living layers, typography, and interactive logic into the same file, keeping an intact base image that any viewer can open.

Solicitar Acceso Request Access
Ver Galería OIM View OIM Gallery
PNG CUALQUIER VISOR ANY VIEWER
ECDSA AUTORÍA FIRMADA SIGNED AUTHORSHIP
57 KB EL REPRODUCTOR THE PLAYER
PNG base · cualquier visorBase PNG · any viewer
Capas vivas · reproductor OIMLive layers · OIM player
ES 1 archivo · 10 idiomas · firmado 1 file · 10 languages · signed
01 / 07

Generar es barato. Mantener, no. Generating is cheap. Maintaining isn't.

La IA te da mil versiones en minutos. Ninguna se puede editar, traducir ni indexar después: el texto quedó fundido en los píxeles. AI gives you a thousand versions in minutes. None of them can be edited, translated or indexed afterwards: the text was fused into the pixels.

Flujo Tradicional Traditional Flow Redundante (5x) Redundant (5x)
showcase_es.png 66.6 KB
ES
showcase_en.png 66.4 KB
EN
showcase_zh.png 68.2 KB
ZH
showcase_fr.png 66.5 KB
FR
…showcase_de.png (67.1 KB) y más…showcase_de.png (67.1 KB) and more
DE
Almacenamiento Total Total Storage 334.8 KB

Cada traducción exige re-exportar y almacenar un archivo PNG completo con el texto quemado en los píxeles (5 archivos = 334.8 KB). Each translation requires re-exporting and storing a full PNG file with the text burned into the pixels (5 files = 334.8 KB).

Flujo OIM (.oim.png) OIM Flow (.oim.png) Eficiente (1x) • -58% Efficient (1x) • -58%
chunk tEXt (OIM_Data)
{ "es": "Esto es OIM" }
Simular inyección de idioma: Simulate language injection:
Almacenamiento Total Total Storage 140.8 KB -58%

El chunk tEXt (OIM_Data) ocupa solo 2.1 KB. Un único archivo de 140.8 KB sirve a los 5 idiomas sin duplicar descargas ni almacenamiento. The tEXt chunk (OIM_Data) takes only 2.1 KB. A single 140.8 KB file serves all 5 languages without duplicating downloads or storage.

Global por diseño Global by design
Un solo archivo .oim.png sirve a todo el mundo. Cambiar o traducir un texto es inmediato, sin re-exportar la imagen base. A single .oim.png file serves the whole world. Changing or translating text is immediate, without re-exporting the base image.
Calidad Intocable Untouchable Quality
Re-exportar degrada o duplica activos. OIM conserva los bytes IDAT originales e inyecta la capa viva en un chunk tEXt firmado. Re-exporting degrades or duplicates assets. OIM preserves the original IDAT bytes and injects the living layer into a signed tEXt chunk.
Interactividad Real Real Interactivity
Los formatos de imagen tradicionales carecen de nodos DOM y eventos de interacción. OIM compone capas dinámicas directamente sobre el lienzo a 60 FPS. Traditional image formats lack DOM nodes and interaction events. OIM composes dynamic layers directly over the canvas at 60 FPS.
02 / 07

Comparativa Interactiva Interactive Comparison

Capas dinámicas sobre la imagen horneada. A simple vista parece un PNG normal, pero al interactuar se activa una capa de metadatos superpuestos. Esta arquitectura permite servir múltiples idiomas, animaciones y componentes interactivos desde un único archivo, sin alterar los píxeles base ni perder calidad. Arrastra el divisor para comparar la imagen estática con su capa interactiva. Dynamic layers over the baked image. At first glance it looks like a standard PNG, but interacting with it reveals an overlaid metadata layer. This architecture allows serving multiple languages, animations, and interactive components from a single file, without touching base pixels or degrading quality. Drag the divider to compare the static image with its interactive layer.

▲ REVELA PNG BASE REVEALS BASE PNG
REVELA CAPA OIM REVEALS OIM LAYER ▼
OIM interactive canvas with embedded translation and vector interactive layers
▲ OCULTA CAPA OIM HIDES OIM LAYER
OCULTA PNG BASE HIDES BASE PNG ▼
03 / 07

Separación en 3 capas 3-layer separation

Como el texto viaja como texto y no como píxeles, los buscadores lo leen: tus imágenes interactivas son indexables. Because the text travels as text and not as pixels, search engines read it: your interactive images are indexable.

CAPA +1: DINÁMICA LAYER +1: DYNAMIC
Lo que vive What stays live
Texto en cada idioma, botones, animaciones y, si lo eliges, filtros y máscaras. El reproductor lo dibuja encima. Text in every language, buttons, animations and, if you choose, filters and masks. The player draws it on top.
CAPA 0: SEPARADOR LAYER 0: SEPARATOR
La línea entre las dos The line between them
Simbólica: no guarda nada. Marca qué queda en píxeles y qué sigue vivo. Symbolic: it holds nothing. It marks what becomes pixels and what stays live.
CAPA −1: HORNEADA LAYER −1: BAKED
Lo que fijas en la imagen What you fix in the image
Tú eliges qué capas se hornean en el PNG, filtros y máscaras incluidos. Cualquier visor la muestra. You choose which layers are baked into the PNG, filters and masks included. Any viewer shows it.
Horneada Baked
STATIC
Separador Separator
Dinámica Dynamic
// chunk tEXt: OIM_Data
{
"id": "offer-1",
"content": {
"es": "Hola OIM"
}
}
El reproductor HTML5 ensambla las capas dinámicamente en el dispositivo del cliente. The HTML5 player assembles layers dynamically on the client device.
Cero carga adicional en la GPU; el texto es vectorizado y responsivo. Zero additional GPU load; text is vectorized and responsive.
04 / 07

Casos de Uso Use Cases

Explora la interactividad de OIM/OVM en acción a través de diferentes formatos y flujos de trabajo. Explore OIM/OVM interactivity in action across different formats and workflows.

E-Commerce

Fichas de producto interactivas con cambio de idioma en tiempo real y hotspots de compra. Interactive product sheets with real-time translation and purchase hotspots.

OIM Shape

Máscaras vectoriales y formas dinámicas superpuestas sobre el lienzo de la imagen base. Vector masks and dynamic shapes layered on top of the base image canvas.

OIM SVG

Formatos vectoriales escalables con hotspots interactivos integrados en coordenadas. Scalable vector formats with coordinate-based interactive hotspots.

OIM design library showcasing interactive and multilingual templates for web applications
OIM Lottie

Animaciones vectoriales de Lottie renderizadas dinámicamente y sincronizadas con eventos del visor. Lottie vector animations rendered dynamically and synced with viewer events.

OIM Animation

Efectos de parallax sutiles y animaciones basadas en físicas de interacción. Subtle parallax effects and interactive physics-based animations.

OVM Video

Videos interactivos con capas temporales, hotspots dinámicos y reproducción controlada. Interactive videos with temporal layers, dynamic hotspots, and playback control.

Ver Biblioteca Completa Explore Full Library
05 / 07

Ecosistema OIM OIM Ecosystem

La suite completa para medios interactivos. Elige tu punto de partida: cada herramienta, cada conector, cada formato. The end-to-end suite for interactive media. Choose your starting point: every tool, every connector, every format.

Producción profesional, de principio a fin Professional production, end to end

Diseña visualmente, añade capas multilingües en tiempo real y distribuye imágenes y videos interactivos en un solo archivo. Visually design, add real-time multilingual layers, and distribute interactive media in a single file.

Abrir Studio → Open Studio →
Interactive Layer · Slot 01 Live DOM
Text Layer: Headline [EN]

Design Interactive Media

Vector typography and dynamic slots over pristine PNG bytes.

Explore Spec Inspect Metadata
60 FPS Vector
Canvas: 800 × 520 px Zoom: 100%
Chunk: tEXt (OIM_Data) · 2.1 KB ECDSA Verified
06 / 07

Stack e Integraciones Stack & Integrations

Construido sobre estándares abiertos y diseñado para encajar en cualquier flujo de distribución moderno. Built on open standards and designed to fit any modern distribution workflow.

Core / Binary

TypeScript, esquemas de validación Zod y compresión Deflate raw (RFC 1951) empaquetados en chunks tEXt de PNG. TypeScript, Zod validation schemas, and raw Deflate compression (RFC 1951) packaged in PNG tEXt chunks.

TypeScript Zod Deflate

Web Component

Un elemento nativo para el navegador escrito en Vanilla JS. Cero dependencias externas y renderizado directo en el DOM a 60FPS. A native browser element written in Vanilla JS. Zero external dependencies and direct DOM rendering at 60FPS.

Custom Elements Shadow DOM 60 FPS

Compatibilidad de Reproductores & Ad-Tech Player Compatibility & Ad-Tech

Diseñado para ser inyectado como una capa interactiva sobre cualquier reproductor HTML5 y estándares de publicidad interactiva. Designed to be injected as an interactive layer on top of any HTML5 player and interactive advertising standards.

Video.js Plugin
VAST / VPAID Ad-Tech
Shopify Headless
React / Next.js / Vite
:::::: COMPRESSION // DEFLATE_RAW [wbits=-15]
[ SECURE // ECDSA_SHA256 ]
Cryptographic signature verification board ensuring visual content authenticity in OIM Ecosystem
07 / 07

Seguridad y Confianza Security and Trust

La seguridad en OIM está diseñada para proteger la propiedad intelectual de tus contenidos. La imagen horneada y su capa dinámica viajan juntas como una sola pieza sellada, sin servidores intermedios ni rastreadores. Security in OIM is designed to protect the intellectual property of your content. The baked image and its dynamic layer travel together as a single sealed piece, with no intermediary servers or trackers.

Firma ECDSA ECDSA Signature
Cada exportación se sella con una firma criptográfica. Si alguien altera textos, traducciones o interactividad, la firma se rompe y el visor alerta la manipulación. Every export is sealed with a cryptographic signature. If anyone tampers with texts, translations or interactivity, the signature breaks and the viewer flags it.
Datos embebidos en el PNG Data embedded in the PNG
Sin bases de datos intermedias: la capa dinámica viaja comprimida (Deflate raw) dentro del propio archivo, junto a la imagen horneada, reduciendo la superficie de ataque. No intermediary databases: the dynamic layer travels compressed (raw Deflate) inside the file itself, alongside the baked image, shrinking the attack surface.
Render 100% local 100% local rendering
La descompresión y el renderizado ocurren en el navegador de cada usuario. Sin librerías de terceros ni rastreadores de publicidad: privacidad por defecto. Decompression and rendering happen in each user's browser. No third-party libraries, no ad trackers: privacy by default.
Contacto Contact

¿Tienes dudas sobre la integración? Any integration questions?

Prueba el estándar OIM en tu propia infraestructura o hablemos sobre soporte Enterprise a la medida de tu negocio. Try the OIM standard in your own infrastructure or let's discuss custom Enterprise support for your business.

Qué incluye cada plan What each plan includes

Límites actuales durante la beta cerrada. Current limits during the closed beta.

Free Free
  • 100 exportaciones firmadas / mes100 signed exports / mo
  • 100 MB de almacenamiento100 MB storage
  • Firma ECDSA de origen e integridadECDSA signature for origin and integrity
  • Sin IANo AI
Pro Pro
  • 5.000 exportaciones firmadas / mes5,000 signed exports / mo
  • 5 GB de almacenamiento5 GB storage
  • Firma ECDSA de origen e integridadECDSA signature for origin and integrity
  • 100 consultas de IA / día100 AI requests / day
  • Publicar obras para incrustarPublish works for embedding
Empresarial Enterprise
  • Exportaciones firmadas sin topeUnlimited signed exports
  • 50 GB de almacenamiento50 GB storage
  • Firma ECDSA de origen e integridadECDSA signature for origin and integrity
  • 1.000 consultas de IA / día1,000 AI requests / day
  • Publicar obras para incrustarPublish works for embedding
  • Claves de API para integracionesAPI keys for integrations
FAQ Dudas Frecuentes Common Questions

Todo lo que necesitas saber sobre OIM Everything you need to know about OIM

Respuestas claras sobre la arquitectura del formato, licenciamiento, integración y seguridad criptográfica. Clear answers on format architecture, licensing, web integration, and cryptographic security.

01 ¿Qué es el formato OIM y cómo funciona?

OIM (Object Interactive Media) es un formato abierto de medios enriquecidos que desacopla la imagen rasterizada de su capa interactiva y de texto. Todo se almacena dentro de un archivo .oim.png estándar usando el chunk tEXt con compresión Deflate raw.

Cuando el archivo se visualiza con el componente <oim-player>, el reproductor decodifica la metadata en milisegundos y monta una capa interactiva sobre el DOM: el texto sigue siendo seleccionable, traducible y accesible, mientras que la imagen de fondo conserva total fidelidad visual.

OIM (Object Interactive Media) is an open rich media format that decouples the rasterized base image from its interactive and textual layer. Everything is stored inside a standard .oim.png file via the tEXt chunk using raw Deflate compression.

When loaded with <oim-player>, the player parses the metadata in milliseconds and mounts an interactive layer over the DOM: text remains selectable, translatable, and accessible, while the background maintains full visual fidelity.

02 ¿En qué se diferencia de un SVG, PNG o archivo Lottie?

PNG tradicional: «Quema» los textos en los píxeles. Modificar una palabra o traducir un banner exige rehacer el diseño y guardar múltiples archivos pesados.

SVG: Es óptimo para iconos vectoriales simples, pero ineficiente y complejo al renderizar texturas fotorrealistas de alta resolución o composición fotográfica.

Lottie: Excelente para animaciones vectoriales basadas en JSON, pero carece de modelo nativo de imagen rasterizada con firma de autoría criptográfica y traducción desacoplada en tiempo real.

OIM une lo mejor de los tres mundos: compatibilidad universal como imagen PNG estándar con la potencia, accesibilidad y dinamismo del DOM web.

Traditional PNG: Bakes text straight into pixels. Translating a banner requires opening design software and re-exporting multiple asset duplicates.

SVG: Great for simple vector iconography, but heavy and inefficient for high-resolution photorealistic textures or multi-layered photography.

Lottie: Superb for JSON vector animations, but lacks a raster-first paradigm with cryptographic authorship and decoupled runtime translation.

OIM merges the best of all worlds: universal PNG fallback compatibility with modern DOM interactivity, accessibility, and zero-overhead localization.

03 ¿Cómo funciona la inyección de idiomas sin duplicar archivos?

Un solo archivo .oim.png guarda el diccionario de textos para todos los idiomas configurados. En tu página web o aplicación, simplemente usas el atributo lang en el reproductor (por ejemplo <oim-player lang="en">) o dejas que detecte automáticamente el idioma del navegador del usuario.

El reproductor sustituye los textos dinámicamente en el DOM sin realizar peticiones de red adicionales ni re-renderizar la imagen pesada de fondo, ahorrando hasta un 85% de ancho de banda en CDNs.

A single .oim.png file holds text dictionaries for all configured languages. In your markup, simply define the lang attribute on the component (e.g. <oim-player lang="en">) or let it auto-detect user browser preferences.

The player swaps text nodes on the DOM instantly without secondary network fetches or re-downloading background assets, slashing CDN bandwidth by up to 85%.

04 ¿Qué navegadores y plataformas son compatibles con <oim-player>?

<oim-player> es un Web Component estándar basado en especificaciones W3C nativas (Custom Elements y Shadow DOM). Funciona de forma inmediata en:

• Google Chrome, Mozilla Firefox, Apple Safari y Microsoft Edge (versiones modernas de escritorio y móvil).
• Cualquier framework moderno: React, Next.js, Vue, Nuxt, Svelte, Astro o HTML estático puro.
• Si un cliente no soporta JavaScript o es un crawler de mensajería (WhatsApp, Telegram, Twitter), el archivo se visualiza como un PNG estándar con su imagen de respaldo.

<oim-player> is a standards-compliant W3C Web Component (Custom Elements and Shadow DOM). It works out of the box on:

• Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge (modern desktop & mobile).
• Any modern web framework: React, Next.js, Vue, Nuxt, Svelte, Astro, or plain HTML.
• If JavaScript is disabled or a social crawler previews the link, the file gracefully renders as a standard PNG fallback image.

05 ¿Qué es la firma criptográfica ECDSA e immutable lock?

Cada archivo OIM puede ser firmado digitalmente mediante el algoritmo criptográfico ECDSA (curva secp256k1), vinculando la identidad del autor con el hash SHA-256 de las capas y de la imagen base.

El Immutable Lock permite al creador sellar la obra: cualquier alteración no autorizada del texto, las fuentes o la imagen destruye la validez de la firma digital, garantizando la autenticidad e integridad del activo en entornos corporativos o de distribución de medios.

Every OIM file can be digitally signed using ECDSA (curve secp256k1), binding author identity to the SHA-256 hash of both layers and base image data.

Immutable Lock allows creators to seal their design: any unauthorized alteration of text, fonts, or pixels breaks cryptographic validity, guaranteeing asset provenance and integrity across enterprise workflows.

06 ¿OIM es de código abierto o privativo?

El ecosistema está estructurado para maximizar la adopción y la interoperabilidad:

• Abierto (Apache-2.0): La especificación del formato binario, la librería de manipulación @oim-media/core y el reproductor web @oim-media/player-oim son de código abierto y de uso libre para proyectos comerciales y comunitarios.
• Propietario: El editor visual OIM-Studio, las extensiones de integración en la nube, el servicio de firma backend y la infraestructura alojada son productos comerciales de Xue Studios LLC.

The ecosystem is architected for broad adoption and interoperability:

• Open Source (Apache-2.0): The binary format specification, the @oim-media/core parser library, and the @oim-media/player-oim web component are open source and free for commercial and community use.
• Proprietary: The OIM-Studio visual editor, Cloud integration extensions, backend signing APIs, and managed infrastructure are commercial services developed by Xue Studios LLC.

Construyamos un estándar vivo
para imagen y video. Let’s build a living standard
for image and video.

Object Interactive Media (OIM) es un formato abierto, un protocolo de metadatos y un ecosistema de herramientas. Empieza hoy. Object Interactive Media (OIM) is an open format, a metadata protocol, and a tooling ecosystem. Start today.

Abrir el visor Open viewer Solicitar Acceso Request Access