Come funziona RoundCut

La risposta breve

RoundCut esegue ogni strumento nel tuo browser usando due API native del browser: la Canvas API di HTML5 per le operazioni a livello di pixel, e WebAssembly per il lavoro più pesante — codifica/decodifica di formati immagine e inferenza IA. Non viene caricato nulla. Nulla viene elaborato sui nostri server, perché non gestiamo server che toccano i tuoi file.

Puoi verificarlo in circa 30 secondi: apri le DevTools del tuo browser, passa alla scheda Network, svuota il log e usa qualsiasi strumento. Le uniche richieste di rete che vedrai sono per gli asset statici del sito — HTML, CSS, JavaScript, font e i moduli WebAssembly. La tua immagine non lascia mai la pagina.

Perché lato client

La maggior parte degli strumenti immagine online funziona al contrario: carichi, un server elabora, scarichi il risultato. Quel modello ha alcuni svantaggi noti — il tuo file vive sul server di qualcun altro, aspetti due volte il viaggio di andata e ritorno, e l’operatore paga per CPU-secondo di lavoro, motivo per cui questi servizi tendono ad aggiungere account, filigrane o piani a pagamento.

I browser sono in grado di fare la maggior parte di questo lavoro nativamente da anni. L’elemento <canvas> gestisce il ritaglio, la rotazione, il ridimensionamento e la ricodifica; WebAssembly ci permette di eseguire le stesse librerie C/Rust MozJPEG, libwebp, libavif e Oxipng usate da Squoosh, a velocità quasi nativa. Quando abbiamo lanciato la ricostruzione 2026, il browser aveva effettivamente raggiunto il kit di strumenti di editing immagini desktop. Non c’era più nessuna ragione per coinvolgere un server.

Il risultato è uno stack con tre proprietà che si sommano: privacy (il tuo file non lascia mai il tuo dispositivo), velocità (nessun upload, nessuna coda, nessun round-trip al server) e costo (serviamo asset statici da un CDN per pochi centesimi al mese, indipendentemente da quante persone usano gli strumenti).

La pipeline, passo dopo passo

1. Selezioni un file

Quando scegli un’immagine — tramite il selettore file, trascinamento o incolla — il browser passa a JavaScript un oggetto File. JavaScript legge i byte usando l’API FileReader o Blob.arrayBuffer(). In nessun momento di questo passaggio il file viene inviato sulla rete.

2. Il browser decodifica l’immagine

I browser moderni possono decodificare nativamente JPG, PNG, WebP, GIF, AVIF e (su Safari e Chromium recente) HEIC. Usiamo createImageBitmap() per convertire i byte grezzi in una bitmap con cui la GPU può lavorare, fuori dal thread principale. Per HEIC nei browser che non lo decodificano nativamente, ricorriamo a un decoder WebAssembly che gira localmente nel tuo browser.

3. Lo strumento fa il suo lavoro

Quello che accade dopo dipende dallo strumento. RoundCut ne offre attualmente tre:

• Circle Crop — una trasformazione pixel Canvas 2D con un percorso di ritaglio circolare. La bitmap viene disegnata in un <canvas> alla rotazione e allo zoom scelti, viene applicato il ritaglio circolare e l’interno del cerchio viene riletto come ImageData. Cropper.js gestisce l’interazione del riquadro di ritaglio.
• Compress — ricodifica JPG, PNG, WebP o AVIF usando i moduli WebAssembly jSquash (MozJPEG, libwebp, libavif, Oxipng). Sono gli stessi codec upstream usati da Squoosh. Girano in un Web Worker in modo che l’interfaccia rimanga reattiva durante la codifica di una foto da molti megapixel, e un’anteprima fianco a fianco ti permette di vedere il compromesso prima di confermare.
• Remove Background — un piccolo modello IA in formato ONNX (pochi MB, scaricato una volta e messo in cache) gira nel tuo browser tramite ONNX Runtime Web, con WebAssembly come backend di esecuzione. La prima esecuzione scarica il modello; ogni esecuzione successiva è locale e istantanea.

4. Scarichi il risultato

La bitmap di output viene codificata in un Blob, avvolta in una object URL e proposta alla finestra di dialogo standard di salvataggio file del tuo browser. Dove supportato, usiamo la File System Access API per permetterti di scegliere direttamente la cartella di destinazione. Il file appare sul tuo disco; nulla transita attraverso un server.

Come verificarlo da solo

L’affermazione “nessun upload” è verificabile in due minuti. Scegli il metodo che preferisci:

Metodo 1 — Osserva la scheda Network

1. Apri RoundCut in una nuova scheda.
2. Apri le DevTools (F12 o clic destro → Ispeziona) e vai alla scheda Network.
3. Clicca sul pulsante “svuota” nella scheda Network per ripartire da zero.
4. Usa qualsiasi strumento: carica un’immagine, modificala, scarica il risultato.
5. Guarda il log di Network. Vedrai richieste per HTML, CSS, JS, font e (al primo utilizzo di uno strumento più pesante) il modulo WebAssembly pertinente. Non vedrai nessuna richiesta che contenga i byte della tua immagine.

La colonna “Initiator” ti dice quale script ha attivato ciascuna richiesta, e la colonna “Type” ti dice cosa è stato inviato. Filtra per “Fetch/XHR” per concentrarti sulle richieste di dati; vedrai che sono tutte piccole, tutte verso l’origine statica e nessuna contiene il tuo file.

Metodo 2 — Usa gli strumenti offline

1. Carica qualsiasi pagina strumento di RoundCut. Usala una volta per assicurarti che i moduli WebAssembly pertinenti siano in cache.
2. Apri le DevTools, vai alla scheda Network e spunta la casella Offline (o semplicemente disattiva il Wi-Fi).
3. Ricarica la pagina. Si carica ancora, perché il browser ha in cache gli asset statici.
4. Usa di nuovo lo strumento, dall’inizio alla fine. Funziona ancora.

Se lo strumento ha funzionato offline, per definizione non ha contattato un server durante l’operazione. Questa è la prova più solida possibile — il lavoro è avvenuto sulla tua macchina perché non c’era nessun’altra macchina raggiungibile.

Cosa vediamo noi

Per essere chiari su cosa viene raccolto: quando carichi una pagina, il nostro provider di analytics (Cloudflare Web Analytics) registra che qualche browser ha caricato quell’URL da qualche paese. Nessun cookie, nessun identificatore persistente, nulla legato a una persona.

Per gli strumenti che scaricano un modulo WebAssembly al primo utilizzo (codec jSquash, il modello ONNX di rimozione sfondo), il nostro provider di hosting vede che qualcuno ha recuperato il modulo — allo stesso modo in cui vede qualcuno recuperare il file CSS. Il modulo stesso non contiene nessuna informazione sulla tua immagine.

L’inventario completo dei dati è nella nostra informativa sulla privacy.

Lo stack tecnologico

Per i curiosi, ecco su cosa è costruito RoundCut:

• Astro — il generatore di siti statici. Ogni pagina viene consegnata come HTML semplice con “islands” JavaScript migliorati progressivamente solo dove vivono gli strumenti interattivi.
• CSS vanilla con proprietà personalizzate — senza Tailwind, senza CSS-in-JS. L’intero sistema di design è un singolo file tokens.css.
• jSquash — binding WebAssembly per MozJPEG, libwebp, libavif e Oxipng per la codifica delle immagini.
• Cropper.js — il layer di interazione del rettangolo di ritaglio per gli strumenti di ritaglio.
• ONNX Runtime Web — esegue il modello di rimozione dello sfondo nel tuo browser tramite WebAssembly.
• Cloudflare Pages — ospita la build statica, la serve dall’edge e fornisce DNS e protezione DDoS.
• Cloudflare Web Analytics — conteggi di visualizzazioni di pagina aggregati, senza cookie.

Supporto dei browser

Tutti gli strumenti funzionano sulla versione attuale e su quella precedente di Chrome, Firefox, Safari e Edge — desktop e mobile. Il sito usa il miglioramento progressivo: dove un browser supporta un’API più recente (es. showSaveFilePicker, OffscreenCanvas), la usiamo; dove non la supporta, ricorriamo all’ equivalente più vecchio. Non c’è nessuna barriera “il tuo browser non è supportato”.

L’unico requisito imprescindibile è JavaScript. Con JavaScript disabilitato, gli strumenti non possono funzionare — non c’è nessun fallback lato server perché non c’è nessun server che elabora immagini.

Domande

Qualcosa che non abbiamo coperto? Scrivici a support@araluma.com. Le domande tecniche sono benvenute.