La resposta breu
RoundCut executa cada eina al teu navegador fent servir dues API natives del browser: la Canvas API de HTML5 per a les operacions a nivell de píxel, i WebAssembly per a la feina més feixuga — codificació/descodificació de formats d’imatge i inferència d’IA. Res s’envia. Res es processa als nostres servidors, perquè no tenim servidors que toquin els teus fitxers.
Pots verificar-ho en uns 30 segons: obre les DevTools del teu navegador, passa a la pestanya Network, esborra el registre i fes servir qualsevol eina. Les úniques peticions de xarxa que veuràs seran per als recursos estàtics del lloc — HTML, CSS, JavaScript, tipografies i els mòduls WebAssembly. La teva imatge mai no surt de la pàgina.
Per què del costat del client
La majoria d’eines d’imatge en línia funcionen al revés: puges el fitxer, un servidor el processa, te’n descarregues el resultat. Aquest model té uns quants inconvenients ben coneguts — el teu fitxer queda a la màquina d’algú altre, esperes el viatge d’anada i tornada dues vegades, i l’operador paga per CPU-segon de treball, que és per això que aquests serveis solen afegir comptes, filigranes o plans de pagament.
Els navegadors ja fa anys que poden fer la major part d’aquesta feina de manera nativa. L’element
<canvas> s’ocupa del retall, la rotació, el redimensionament i la recodificació;
WebAssembly ens permet executar les mateixes biblioteques C/Rust MozJPEG, libwebp, libavif i Oxipng
que fa servir Squoosh, a velocitat gairebé nativa. Quan vam llançar la reconstrucció del 2026, el
navegador havia assolit efectivament el kit d’eines d’edició d’imatges d’escriptori. Ja no hi havia
cap raó per implicar un servidor.
El resultat és una pila amb tres propietats que es reforcen mútuament: privadesa (el teu fitxer mai no surt del teu dispositiu), velocitat (sense pujada, sense cua, sense anada i tornada al servidor) i cost (servim recursos estàtics des d’una CDN per uns cèntims al mes, independentment de quantes persones facin servir les eines).
La canonada, pas a pas
1. Selecciones un fitxer
Quan tries una imatge — via el selector de fitxers, arrossegant-la o enganxant-la — el
navegador passa a JavaScript un objecte File. JavaScript llegeix els bytes
usant l’API FileReader o Blob.arrayBuffer(). En cap
moment d’aquest pas s’envia el fitxer per la xarxa.
2. El navegador descodifica la imatge
Els navegadors moderns poden descodificar nativament JPG, PNG, WebP, GIF, AVIF i (a Safari i
Chromium recent) HEIC. Fem servir createImageBitmap() per convertir els bytes bruts
en un bitmap amb el qual la GPU pot treballar, fora del fil principal. Per a HEIC en navegadors
que no el descodifiquen nativament, recorrem a un descodificador WebAssembly que funciona
localment al teu navegador.
3. L’eina fa la seva feina
Allò que passa a continuació depèn de l’eina. RoundCut n’inclou tres ara mateix:
- Circle Crop — una transformació de píxels Canvas 2D amb un camí de retall circular. El bitmap es dibuixa en un
<canvas>amb la rotació i el zoom triats, s’aplica el retall circular i l’interior del cercle es llegeix de tornada com aImageData. Cropper.js gestiona la interacció del marc de retall. - Compress — recodifica JPG, PNG, WebP o AVIF fent servir els mòduls WebAssembly de jSquash (MozJPEG, libwebp, libavif, Oxipng). Són els mateixos còdecs upstream que fa servir Squoosh. S’executen en un
Web Workerperquè la interfície es mantingui responsiva mentre es codifica una foto de molts megapíxels, i una vista prèvia costat a costat et permet veure el compromís abans de confirmar. - Remove Background — un model d’IA petit en format ONNX (uns quants MB, descarregat una vegada i emmagatzemat a la memòria cau) s’executa al teu navegador via ONNX Runtime Web, amb WebAssembly com a backend d’execució. La primera execució descarrega el model; totes les execucions posteriors són locals i instantànies.
4. Descarregues el resultat
El bitmap de sortida es codifica en un Blob, s’embolicarà en una
object URL i s’oferirà al diàleg estàndard de guardat de fitxers del teu navegador.
On és compatible, fem servir la File System Access API
perquè puguis triar directament la carpeta de destinació. El fitxer apareix al teu disc; res
no passa per un servidor.
Com verificar-ho tu mateix
L’afirmació «sense pujada» és comprovable en dos minuts. Tria el mètode que prefereixis:
Mètode 1 — Observa la pestanya Network
- Obre RoundCut en una pestanya nova.
- Obre les DevTools (F12 o clic dret → Inspeccioneu) i passa a la pestanya Network.
- Fes clic al botó «esborra» a la pestanya Network per començar de zero.
- Fes servir qualsevol eina: carrega una imatge, edita-la, descarrega el resultat.
- Mira el registre de Network. Veuràs peticions d’HTML, CSS, JS, tipografies i (en el primer ús d’una eina més pesant) el mòdul WebAssembly corresponent. No veuràs cap petició que contingui els bytes de la teva imatge.
La columna «Initiator» t’indica quin script ha iniciat cada petició, i la columna «Type» t’indica el que s’ha enviat. Filtra per «Fetch/XHR» per centrar-te en les peticions de dades; veuràs que totes són petites, totes van cap a l’origen estàtic i cap no conté el teu fitxer.
Mètode 2 — Fes servir les eines sense connexió
- Carrega qualsevol pàgina d’eina de RoundCut. Usa-la una vegada per assegurar-te que els mòduls WebAssembly pertinents estan a la memòria cau.
- Obre les DevTools, ves a la pestanya Network i marca la casella Offline (o simplement apaga el Wi-Fi).
- Recarrega la pàgina. Encara es carrega, perquè el navegador ha emmagatzemat els recursos estàtics a la memòria cau.
- Fes servir l’eina de nou, de principi a fi. Encara funciona.
Si l’eina ha funcionat sense connexió, per definició no ha contactat amb cap servidor durant l’operació. Aquesta és la prova més sòlida possible — la feina ha passat a la teva màquina perquè no hi havia cap altra màquina accessible.
Què veiem nosaltres
Per ser clars sobre el que es recull: quan carregues una pàgina, el nostre proveïdor d’analítiques (Cloudflare Web Analytics) registra que algun navegador ha carregat aquella URL des d’algun país. Sense galetes, sense identificadors persistents, res vinculat a una persona.
Per a les eines que descarreguen un mòdul WebAssembly en el primer ús (còdecs jSquash, el model ONNX d’eliminació de fons), el nostre proveïdor d’allotjament veu que algú ha demanat el mòdul — igual que veu que algú ha demanat el fitxer CSS. El mòdul en si no conté cap informació sobre la teva imatge.
L’inventari complet de dades és a la nostra política de privadesa.
La pila tecnològica
Per als curiosos, aquí teniu sobre què s’ha construït RoundCut:
- Astro — el generador de llocs estàtics. Cada pàgina s’envia com a HTML simple amb «illes» JavaScript millorades progressivament només on viuen les eines interactives.
- CSS vanilla amb propietats personalitzades — sense Tailwind, sense CSS-in-JS. El sistema de disseny complet és un únic fitxer
tokens.css. - jSquash — enllaços WebAssembly a MozJPEG, libwebp, libavif i Oxipng per a la codificació d’imatges.
- Cropper.js — la capa d’interacció del rectangle de retall per a les eines de retall.
- ONNX Runtime Web — executa el model d’eliminació de fons al teu navegador via WebAssembly.
- Cloudflare Pages — allotja la compilació estàtica, la serveix des de l’edge i proporciona DNS i protecció DDoS.
- Cloudflare Web Analytics — recompte de visualitzacions de pàgina agregat, sense galetes.
Compatibilitat amb navegadors
Totes les eines funcionen a la versió actual i l’anterior de Chrome, Firefox, Safari
i Edge — escriptori i mòbil. El lloc fa servir la millora progressiva: on un
navegador admet una API més nova (p. ex. showSaveFilePicker,
OffscreenCanvas), la fem servir; on no, recorrem a
l’equivalent antic. No hi ha cap barrera «el teu navegador no és compatible».
L’únic requisit imprescindible és JavaScript. Amb JavaScript desactivat, les eines no poden funcionar — no hi ha cap solució alternativa al servidor perquè no hi ha cap servidor que faci la feina de processament d’imatges.
Preguntes
Alguna cosa que no hem cobert? Envia’ns un correu electrònic a support@araluma.com. Les preguntes tècniques són benvingudes.