Como o RoundCut funciona

A resposta curta

O RoundCut executa todas as ferramentas no seu navegador usando duas APIs nativas do browser: a Canvas API do HTML5 para operações em nível de pixel, e WebAssembly para o trabalho mais pesado — codificação/decodificação de formatos de imagem e inferência de IA. Nada é enviado para servidores. Nada é processado nos nossos servidores, porque não temos servidores que tocam nos seus arquivos.

Você pode verificar isso em cerca de 30 segundos: abra o DevTools do seu navegador, vá para a aba Network, limpe o log e use qualquer ferramenta. As únicas requisições de rede que você vai ver são para assets estáticos do site — HTML, CSS, JavaScript, fontes e os módulos WebAssembly. Sua imagem jamais sai da página.

Por que client-side

A maioria das ferramentas de imagem online funciona ao contrário: você faz upload, um servidor processa, você baixa o resultado. Esse modelo tem algumas desvantagens conhecidas — seu arquivo fica na máquina de outra pessoa, você espera a ida e volta duas vezes, e o operador paga por CPU-segundo de trabalho, o que é por isso que esses serviços tendem a adicionar contas, marcas d’água ou planos pagos.

Os navegadores já conseguem fazer a maior parte desse trabalho nativamente há anos. O elemento <canvas> cuida de recorte, rotação, redimensionamento e recodificação; WebAssembly nos permite rodar as mesmas bibliotecas C/Rust MozJPEG, libwebp, libavif e Oxipng que o Squoosh usa, em velocidade quase nativa. Quando lançamos a reconstrução de 2026, o navegador já havia alcançado o kit de ferramentas de edição de imagem para desktop. Não havia mais razão para envolver um servidor.

O resultado é uma stack com três propriedades que se somam: privacidade (seu arquivo jamais sai do seu dispositivo), velocidade (sem upload, sem fila, sem round-trip para o servidor) e custo (servimos assets estáticos de uma CDN por centavos por mês, independentemente de quantas pessoas usam as ferramentas).

O pipeline, passo a passo

1. Você seleciona um arquivo

Quando você escolhe uma imagem — pelo seletor de arquivos, arrastar e soltar ou colar — o navegador passa ao JavaScript um objeto File. O JavaScript lê os bytes usando a API FileReader ou Blob.arrayBuffer(). Em nenhum momento nessa etapa o arquivo é enviado pela rede.

2. O navegador decodifica a imagem

Navegadores modernos conseguem decodificar nativamente JPG, PNG, WebP, GIF, AVIF e (no Safari e Chromium recente) HEIC. Usamos createImageBitmap() para converter os bytes brutos em um bitmap com o qual a GPU pode trabalhar, fora da thread principal. Para HEIC em navegadores que não o decodificam nativamente, recorremos a um decoder WebAssembly que roda localmente no seu navegador.

3. A ferramenta faz o seu trabalho

O que acontece a seguir depende da ferramenta. O RoundCut atualmente tem três:

• Circle Crop — uma transformação de pixel Canvas 2D com um caminho de recorte circular. O bitmap é desenhado em um <canvas> na rotação e zoom escolhidos, o recorte circular é aplicado e o interior do círculo é lido de volta como ImageData. O Cropper.js cuida da interação do quadro de recorte.
• Compress — recodifica JPG, PNG, WebP ou AVIF usando módulos WebAssembly jSquash (MozJPEG, libwebp, libavif, Oxipng). Esses são os mesmos codecs upstream usados pelo Squoosh. Eles rodam em um Web Worker para que a interface continue responsiva enquanto uma foto com vários megapixels é codificada, e uma prévia lado a lado permite ver o compromisso antes de confirmar.
• Remove Background — um pequeno modelo de IA em formato ONNX (alguns MB, baixado uma vez e cacheado) roda no seu navegador via ONNX Runtime Web, com WebAssembly como backend de execução. A primeira execução baixa o modelo; todas as execuções posteriores são locais e instantâneas.

4. Você baixa o resultado

O bitmap de saída é codificado em um Blob, envolvido em uma object URL e oferecido ao diálogo padrão de salvar arquivo do seu navegador. Onde suportado, usamos a File System Access API para que você possa escolher a pasta de destino diretamente. O arquivo aparece no seu disco; nada passa por um servidor.

Como verificar por conta própria

A afirmação de “sem upload” é verificável em dois minutos. Escolha qual prefere:

Método 1 — Observe a aba Network

1. Abra o RoundCut em uma aba nova.
2. Abra o DevTools (F12 ou clique com botão direito → Inspecionar) e vá para a aba Network.
3. Clique no botão “limpar” da aba Network para começar do zero.
4. Use qualquer ferramenta: carregue uma imagem, edite-a, baixe o resultado.
5. Observe o log de Network. Você verá requisições de HTML, CSS, JS, fontes e (no primeiro uso de uma ferramenta mais pesada) o módulo WebAssembly relevante. Você não verá nenhuma requisição que contenha os bytes da sua imagem.

A coluna “Initiator” diz qual script acionou cada requisição, e a coluna “Type” diz o que foi enviado. Filtre por “Fetch/XHR” para focar nas requisições de dados; você verá que são todas pequenas, todas para a origem estática e nenhuma contém seu arquivo.

Método 2 — Use as ferramentas offline

1. Carregue qualquer página de ferramenta do RoundCut. Use-a uma vez para garantir que os módulos WebAssembly relevantes estejam em cache.
2. Abra o DevTools, vá para a aba Network e marque a caixa Offline (ou simplesmente desligue o seu Wi-Fi).
3. Recarregue a página. Ela ainda carrega, porque o navegador cacheou os assets estáticos.
4. Use a ferramenta novamente, do início ao fim. Ela ainda funciona.

Se a ferramenta funcionou offline, por definição ela não entrou em contato com um servidor durante a operação. Esta é a prova mais sólida possível — o trabalho aconteceu na sua máquina porque não havia outra máquina acessível.

O que vemos

Para ser claro sobre o que é coletado: quando você carrega uma página, nosso provedor de analytics (Cloudflare Web Analytics) registra que algum navegador carregou aquela URL de algum país. Sem cookies, sem identificadores persistentes, nada vinculado a uma pessoa.

Para ferramentas que baixam um módulo WebAssembly no primeiro uso (codecs jSquash, o modelo ONNX de remoção de fundo), nosso provedor de hospedagem sabe que alguém buscou o módulo — da mesma forma que sabe que alguém buscou o arquivo CSS. O módulo em si não contém nenhuma informação sobre sua imagem.

O inventário completo de dados está em nossa política de privacidade.

A stack de tecnologia

Para os curiosos, aqui está o que o RoundCut é construído em:

• Astro — o gerador de sites estáticos. Cada página é entregue como HTML simples com “islands” JavaScript progressivamente aprimoradas apenas onde as ferramentas interativas vivem.
• CSS vanilla com propriedades personalizadas — sem Tailwind, sem CSS-in-JS. O sistema de design completo é um único arquivo tokens.css.
• jSquash — bindings WebAssembly para MozJPEG, libwebp, libavif e Oxipng para codificação de imagens.
• Cropper.js — a camada de interação do retângulo de recorte para as ferramentas de corte.
• ONNX Runtime Web — executa o modelo de remoção de fundo no seu navegador via WebAssembly.
• Cloudflare Pages — hospeda o build estático, serve-o a partir da borda e fornece DNS mais proteção DDoS.
• Cloudflare Web Analytics — contagens de visualizações de página agregadas, sem cookies.

Suporte a navegadores

Todas as ferramentas funcionam na versão atual e na anterior do Chrome, Firefox, Safari e Edge — desktop e mobile. O site usa aprimoramento progressivo: onde um navegador suporta uma API mais nova (ex.: showSaveFilePicker, OffscreenCanvas), usamos ela; onde não suporta, recorremos ao equivalente mais antigo. Não há barreira de “seu navegador não é suportado”.

O único requisito obrigatório é JavaScript. Com JavaScript desabilitado, as ferramentas não conseguem rodar — não há fallback no servidor porque não há servidor fazendo trabalho de imagem em primeiro lugar.

Dúvidas

Algo que não cobrimos? Envie um e-mail para support@araluma.com. Perguntas técnicas são bem-vindas.