# Resizo Embed — Resumen Resizo Embed es un sistema de seis widgets gratuitos de herramientas de imagen basados en iframe que cualquier sitio web puede incrustar con un único fragmento de HTML. Los widgets se sirven desde [resizo.in](https://www.resizo.in/es/embed/), se ejecutan íntegramente en el navegador del visitante y no requieren clave de API, cuenta ni integración de backend. Los embeds son gratuitos para uso personal, comercial y empresarial; la única condición es que el pequeño enlace "Powered by Resizo" en el pie del widget permanezca visible. ## Widgets disponibles | Widget | Ruta de embed | Propósito | | --- | --- | --- | | Image Resizer | `/embed/image-resizer/` | Redimensiona por dimensiones exactas en píxeles con bloqueo de relación de aspecto. | | JPG Compressor | `/embed/compress-image/` | Reduce el tamaño de archivos JPG, PNG y WebP con un control deslizante de calidad. | | WebP Converter | `/embed/webp-converter/` | Convierte PNG y JPG a WebP. | | Passport Photo | `/embed/passport-photo/` | Genera fotos de pasaporte / visa según las especificaciones oficiales de EE. UU., Reino Unido, UE, India y Canadá. | | Batch Resize | `/embed/batch-resize/` | Redimensiona muchas imágenes a la vez en lote; los resultados se descargan como ZIP. | | Watermark Tool | `/embed/watermark/` | Añade marcas de agua de texto con posición, color, opacidad y rotación. | ## Fragmento mínimo de embed ```html ``` Cada widget pesa aproximadamente entre 5 y 10 KB en total (HTML + CSS + JavaScript vainilla) y se carga de forma diferida por defecto. No hay frameworks, ni SDKs de tracking, ni balizas de analítica dentro del iframe. ## Parámetros de URL | Parámetro | Valores | Valor por defecto | Descripción | | --- | --- | --- | --- | | `theme` | `light`, `dark` | (sigue a `prefers-color-scheme`) | Fuerza un tema visual fijo. Omite el parámetro para coincidir automáticamente con la preferencia del SO del visitante. | El patrón de URL base es `https://www.resizo.in/embed/{tool-id}/[?theme=light|dark]`. ## Modelo de privacidad y seguridad El embed hereda la arquitectura de Resizo "sin subida, sin persistencia": - **Sin subida.** El widget usa `FileReader` para leer el archivo del usuario y la HTML5 Canvas API para procesarlo. No existe ningún endpoint de red que reciba datos de imagen. - **Sin cookies.** No se establecen cookies dentro del iframe. Por defecto, no se escribe nada en `localStorage` ni en `sessionStorage`. - **Sin telemetría sobre el contenido del archivo.** No se transmiten nombres de archivo, dimensiones ni metadatos. - **Cumple GDPR + CCPA por arquitectura**, no por política. Verifícalo en DevTools → pestaña Network: no se dispara ninguna petición durante el procesamiento. - **El atributo `sandbox` no es compatible.** Debe omitirse, ya que `sandbox` bloquea las descargas de archivos de las que depende el widget. Si está en vigor una Content-Security-Policy estricta, añade `frame-src https://www.resizo.in;`. ## Protocolo de auto-redimensionado (postMessage) Cada widget publica la altura de su contenido a la ventana padre cada vez que cambia el layout: ```json { "source": "resizo-embed", "type": "size", "height": 742 } ``` La página padre puede escuchar el mensaje y actualizar el `style.height` del iframe para eliminar barras de desplazamiento internas. Compara `event.source` con el `contentWindow` de cada iframe para enrutar correctamente las actualizaciones de altura en páginas con múltiples embeds. No se requiere ninguna librería de terceros tipo `iframe-resizer`. ## Compatibilidad de plataformas El mismo fragmento de iframe funciona en cada plataforma que acepta HTML personalizado: - **WordPress** — bloque HTML personalizado (Editor de bloques) o pestaña "Texto" (Editor clásico). Es posible que los plugins de seguridad necesiten añadir `resizo.in` a la lista de permitidos. - **Ghost** — tarjeta HTML. - **Webflow** — elemento Embed. - **Wix** — Añadir → Embed Code → Embed HTML. - **Squarespace** — bloque de código. - **Notion** — comando slash `/embed` con la URL del widget. - **Shopify** — Pages → clic en `` (Show HTML) → pegar. - **HTML estático** — pega directamente en el archivo; sin paso de build. También se proporcionan componentes listos para integrar para **React** (con auto-resize vía `useEffect`), **Vue** (`onMounted` / `onBeforeUnmount`) y **Angular** (`ngOnInit` / `ngOnDestroy`). ## Compatibilidad de navegadores | Navegador | Versión mínima | | --- | --- | | Chrome / Edge (Chromium) | 80+ | | Firefox | 78+ | | Safari (incl. iOS Safari) | 14+ | | Chrome Android | 80+ | La exportación WebP es totalmente compatible en Chrome, Safari y Edge. La Canvas API usada internamente tiene un soporte global superior al 98,5 % según [caniuse.com/canvas](https://caniuse.com/canvas). ## Versionado El embed se obtiene de `resizo.in` en tiempo de renderizado, por lo que las mejoras se despliegan automáticamente. El *código* del embed que pegues en tu sitio permanece igual. Se evitan cambios incompatibles en la URL o en el formato de mensaje; si se vuelven necesarios, la URL antigua seguirá sirviendo el comportamiento anterior bajo una ruta versionada. ## Documentación relacionada - [Embed Generator](https://www.resizo.in/es/embed/) — generador interactivo que emite el fragmento del iframe. - [Documentación de Embed (HTML)](https://www.resizo.in/es/embed/docs/) — guía completa de integración con tutoriales por plataforma, componentes de framework y solución de problemas. - [Resumen de Resizo](https://www.resizo.in/docs/overview.es.md) — qué es Resizo y la justificación arquitectónica. - [Cómo funciona Resizo](https://www.resizo.in/docs/how-it-works.es.md) — flujo de procesamiento en el navegador y modelo de privacidad. - [Funcionalidades](https://www.resizo.in/docs/features.es.md) — lista completa de funciones y dimensiones de los presets de redes sociales.