Cómo funciona RoundCut

Detalles técnicos sobre cómo las herramientas se ejecutan íntegramente en tu navegador — y cómo puedes verificarlo tú mismo.

La respuesta corta

RoundCut ejecuta todas las herramientas en tu navegador usando dos APIs nativas del browser: la Canvas API de HTML5 para operaciones a nivel de píxel, y WebAssembly para el trabajo más pesado — codificación/decodificación de formatos de imagen e inferencia de IA. Nada se sube. Nada se procesa en nuestros servidores, porque no tenemos servidores que toquen tus archivos.

Puedes verificarlo en unos 30 segundos: abre las DevTools de tu navegador, ve a la pestaña Network, limpia el log y usa cualquier herramienta. Las únicas peticiones de red que verás serán para assets estáticos del sitio — HTML, CSS, JavaScript, fuentes y los módulos WebAssembly. Tu imagen nunca sale de la página.

Por qué client-side

La mayoría de herramientas de imagen online funcionan al revés: subes el archivo, un servidor procesa, descargas el resultado. Ese modelo tiene algunos inconvenientes conocidos — tu archivo queda en la máquina de otra persona, esperas el viaje de ida y vuelta dos veces, y el operador paga por CPU-segundo de trabajo, que es por qué esos servicios tienden a añadir cuentas, marcas de agua o planes de pago.

Los navegadores han podido hacer la mayor parte de este trabajo de forma nativa durante años. El elemento <canvas> se encarga del recorte, rotación, redimensionado y recodificación; WebAssembly nos permite ejecutar las mismas bibliotecas C/Rust MozJPEG, libwebp, libavif y Oxipng que usa Squoosh, a velocidad casi nativa. Para cuando lanzamos la reconstrucción de 2026, el navegador había alcanzado eficazmente al kit de herramientas de edición de imágenes de escritorio. Ya no había razón para involucrar a un servidor.

El resultado es una stack con tres propiedades que se potencian: privacidad (tu archivo nunca sale de tu dispositivo), velocidad (sin subida, sin cola, sin viaje de ida y vuelta al servidor) y coste (servimos assets estáticos desde una CDN por céntimos al mes, independientemente de cuántas personas usen las herramientas).

El pipeline, paso a paso

1. Seleccionas un archivo

Cuando eliges una imagen — con el selector de archivos, arrastrando y soltando o pegando — el navegador le entrega a JavaScript un objeto File. JavaScript lee los bytes usando la API FileReader o Blob.arrayBuffer(). En ningún momento de este paso se envía el archivo por la red.

2. El navegador decodifica la imagen

Los navegadores modernos pueden decodificar nativamente JPG, PNG, WebP, GIF, AVIF y (en Safari y Chromium reciente) HEIC. Usamos createImageBitmap() para convertir los bytes en bruto en un bitmap con el que la GPU puede trabajar, fuera del hilo principal. Para HEIC en navegadores que no lo decodifican de forma nativa, recurrimos a un decoder WebAssembly que se ejecuta localmente en tu navegador.

3. La herramienta hace su trabajo

Lo que ocurre a continuación depende de la herramienta. RoundCut actualmente incluye tres:

  • Circle Crop — una transformación de píxeles Canvas 2D con una ruta de recorte circular. El bitmap se dibuja en un <canvas> con la rotación y zoom elegidos, se aplica el recorte circular y el interior del círculo se lee de vuelta como ImageData. Cropper.js gestiona la interacción del marco de recorte.
  • Compress — recodifica JPG, PNG, WebP o AVIF usando módulos WebAssembly de jSquash (MozJPEG, libwebp, libavif, Oxipng). Estos son los mismos codecs upstream que usa Squoosh. Se ejecutan en un Web Worker para que la interfaz siga siendo responsiva mientras se codifica una foto de varios megapíxeles, y una vista previa lado a lado te permite ver el compromiso antes de confirmar.
  • Remove Background — un pequeño modelo de IA en formato ONNX (unos pocos MB, descargado una vez y en caché) se ejecuta en tu navegador a través de ONNX Runtime Web, con WebAssembly como backend de ejecución. La primera ejecución descarga el modelo; todas las ejecuciones posteriores son locales e instantáneas.

4. Descargas el resultado

El bitmap de salida se codifica en un Blob, se envuelve en una object URL y se ofrece al diálogo estándar de guardar archivo de tu navegador. Donde está disponible, usamos la File System Access API para que puedas elegir la carpeta de destino directamente. El archivo aparece en tu disco; nada pasa por un servidor.

Cómo verificarlo tú mismo

La afirmación de “sin subida” es verificable en dos minutos. Elige el método que prefieras:

Método 1 — Observa la pestaña Network

  1. Abre RoundCut en una pestaña nueva.
  2. Abre las DevTools (F12 o clic derecho → Inspeccionar) y ve a la pestaña Network.
  3. Haz clic en el botón “limpiar” de la pestaña Network para empezar desde cero.
  4. Usa cualquier herramienta: carga una imagen, edítala, descarga el resultado.
  5. Mira el log de Network. Verás peticiones de HTML, CSS, JS, fuentes y (en el primer uso de una herramienta más pesada) el módulo WebAssembly correspondiente. No verás ninguna petición que contenga los bytes de tu imagen.

La columna “Initiator” te dice qué script activó cada petición, y la columna “Type” te dice qué se envió. Filtra por “Fetch/XHR” para centrarte en las peticiones de datos; verás que son todas pequeñas, todas al origen estático y ninguna contiene tu archivo.

Método 2 — Usa las herramientas sin conexión

  1. Carga cualquier página de herramienta de RoundCut. Úsala una vez para asegurarte de que los módulos WebAssembly relevantes estén en caché.
  2. Abre las DevTools, ve a la pestaña Network y marca la casilla Offline (o simplemente desactiva el Wi-Fi).
  3. Recarga la página. Sigue cargando, porque el navegador tiene en caché los assets estáticos.
  4. Usa la herramienta de nuevo, de principio a fin. Sigue funcionando.

Si la herramienta funcionó sin conexión, por definición no contactó con un servidor durante la operación. Esta es la prueba más sólida posible — el trabajo ocurrió en tu máquina porque no había otra máquina accesible.

Qué vemos nosotros

Para dejar claro qué se recopila: cuando cargas una página, nuestro proveedor de analytics (Cloudflare Web Analytics) registra que algún navegador cargó esa URL desde algún país. Sin cookies, sin identificadores persistentes, nada vinculado a una persona.

Para herramientas que descargan un módulo WebAssembly en el primer uso (codecs jSquash, el modelo ONNX de eliminación de fondo), nuestro proveedor de alojamiento sabe que alguien obtuvo el módulo — igual que sabe que alguien obtuvo el archivo CSS. El módulo en sí no contiene ninguna información sobre tu imagen.

El inventario completo de datos está en nuestra política de privacidad.

La stack tecnológica

Para los curiosos, aquí está en qué está construido RoundCut:

  • Astro — el generador de sitios estáticos. Cada página se entrega como HTML plano con “islands” JavaScript con mejora progresiva solo donde viven las herramientas interactivas.
  • CSS vanilla con propiedades personalizadas — sin Tailwind, sin CSS-in-JS. El sistema de diseño completo es un único archivo tokens.css.
  • jSquash — bindings WebAssembly para MozJPEG, libwebp, libavif y Oxipng para codificación de imágenes.
  • Cropper.js — la capa de interacción del rectángulo de recorte para las herramientas de recorte.
  • ONNX Runtime Web — ejecuta el modelo de eliminación de fondo en tu navegador a través de WebAssembly.
  • Cloudflare Pages — aloja el build estático, lo sirve desde el edge y proporciona DNS más protección DDoS.
  • Cloudflare Web Analytics — conteos de páginas vistas agregados, sin cookies.

Compatibilidad con navegadores

Todas las herramientas funcionan en la versión actual y la anterior de Chrome, Firefox, Safari y Edge — escritorio y móvil. El sitio usa mejora progresiva: donde un navegador soporta una API más nueva (ej.: showSaveFilePicker, OffscreenCanvas), la usamos; donde no, recurrimos al equivalente más antiguo. No hay barrera de “tu navegador no está soportado”.

El único requisito imprescindible es JavaScript. Con JavaScript desactivado, las herramientas no pueden ejecutarse — no hay fallback en el servidor porque no hay ningún servidor haciendo trabajo de imagen en primer lugar.

Preguntas

¿Algo que no hayamos cubierto? Escríbenos a support@araluma.com. Las preguntas técnicas son bienvenidas.