Коротко о главном
RoundCut запускает все инструменты в вашем браузере, используя два браузерных API: Canvas API из HTML5 для операций на уровне пикселей и WebAssembly для более тяжёлых задач — кодирования/декодирования форматов изображений и AI-инференса. Ничего не загружается на сервер. Ничего не обрабатывается на наших серверах, потому что у нас нет серверов, которые касаются ваших файлов.
Это можно проверить примерно за 30 секунд: откройте DevTools браузера, перейдите на вкладку Network, очистите журнал и воспользуйтесь любым инструментом. Единственные сетевые запросы, которые вы увидите, — это запросы за статическими ресурсами сайта: HTML, CSS, JavaScript, шрифтами и модулями WebAssembly. Ваше изображение никогда не покидает страницу.
Почему на стороне клиента
Большинство онлайн-инструментов для работы с изображениями работают иначе: вы загружаете файл, сервер обрабатывает, вы скачиваете результат. У этой модели есть несколько известных недостатков — ваш файл хранится на чужом сервере, вы дважды ждёте туда-обратно, а оператор платит за каждую секунду процессора, что и объясняет, почему такие сервисы добавляют аккаунты, водяные знаки или платные тарифы.
Браузеры способны выполнять большую часть этой работы нативно уже много лет. Элемент <canvas> обрабатывает кадрирование, поворот, масштабирование и перекодирование; WebAssembly позволяет запускать те же самые C/Rust-библиотеки MozJPEG, libwebp, libavif и Oxipng, которые использует Squoosh, — с почти нативной скоростью. К моменту выпуска редизайна 2026 года браузер фактически догнал настольный инструментарий для редактирования изображений. Не осталось причин задействовать сервер.
Результат — стек с тремя взаимоусиливающими свойствами: приватность (файл никогда не покидает ваше устройство), скорость (без загрузки, без очереди, без обращения к серверу) и стоимость (мы раздаём статику с CDN за копейки в месяц, сколько бы людей ни пользовалось инструментами).
Пайплайн по шагам
1. Вы выбираете файл
Когда вы выбираете изображение — через файловый диалог, перетаскивание или вставку — браузер
передаёт JavaScript объект File. JavaScript читает байты
с помощью API FileReader или Blob.arrayBuffer(). На этом шаге
файл не отправляется по сети ни в какой момент.
2. Браузер декодирует изображение
Современные браузеры умеют нативно декодировать JPG, PNG, WebP, GIF, AVIF и (в Safari и
свежем Chromium) HEIC. Мы используем createImageBitmap(), чтобы вне основного потока
превратить сырые байты в битмап, с которым может работать GPU. Для HEIC в браузерах,
которые не поддерживают его нативно, мы используем WebAssembly-декодер, работающий
локально в вашем браузере.
3. Инструмент выполняет свою работу
Дальнейшие действия зависят от инструмента. Сейчас RoundCut предлагает три:
- Circle Crop — трансформация пикселей Canvas 2D с круговым контуром обрезки. Битмап отрисовывается в
<canvas>с выбранными поворотом и масштабом, применяется круговая обрезка, а содержимое круга считывается какImageData. За интерактивную рамку кадрирования отвечает Cropper.js. - Compress — перекодирует JPG, PNG, WebP или AVIF с помощью WebAssembly-модулей jSquash (MozJPEG, libwebp, libavif, Oxipng). Это те же upstream-кодеки, что использует Squoosh. Они работают в
Web Worker, чтобы интерфейс оставался отзывчивым во время кодирования многомегапиксельного фото, а сравнение «до/после» позволяет оценить компромисс перед сохранением. - Remove Background — небольшая AI-модель в формате ONNX (несколько мегабайт, загружается однажды и кешируется) работает в браузере через ONNX Runtime Web с WebAssembly в качестве бэкенда исполнения. При первом запуске модель скачивается; при каждом последующем — всё происходит локально и мгновенно.
4. Вы скачиваете результат
Выходной битмап кодируется в Blob, оборачивается в
object URL и передаётся в стандартный диалог сохранения файла браузера.
Там, где это поддерживается, мы используем File System Access API,
чтобы вы могли напрямую выбрать папку назначения. Файл появляется на диске; ничего
не проходит через сервер.
Как проверить самостоятельно
Утверждение «без загрузки» можно проверить за две минуты. Выберите удобный способ:
Способ 1 — Наблюдайте за вкладкой Network
- Откройте RoundCut в новой вкладке.
- Откройте DevTools (F12 или правый клик → Просмотр кода) и перейдите на вкладку Network.
- Нажмите кнопку «Очистить» на вкладке Network.
- Воспользуйтесь любым инструментом: загрузите изображение, отредактируйте, скачайте результат.
- Посмотрите на журнал Network. Вы увидите запросы за HTML, CSS, JS, шрифтами и (при первом использовании тяжёлого инструмента) соответствующим модулем WebAssembly. Запросов, содержащих байты вашего изображения, вы не увидите.
Столбец «Initiator» показывает, какой скрипт инициировал каждый запрос, а столбец «Type» — что именно было отправлено. Отфильтруйте по «Fetch/XHR», чтобы сосредоточиться на запросах данных: все они маленькие, все направлены к статическому источнику и ни один не содержит ваш файл.
Способ 2 — Используйте инструменты офлайн
- Откройте любую страницу инструмента RoundCut. Воспользуйтесь им один раз, чтобы нужные модули WebAssembly оказались в кеше.
- Откройте DevTools, перейдите на вкладку Network и поставьте галочку Offline (или просто отключите Wi-Fi).
- Перезагрузите страницу. Она загрузится — браузер закешировал статику.
- Снова воспользуйтесь инструментом от начала до конца. Он по-прежнему работает.
Если инструмент заработал офлайн, значит, по определению, он не обращался к серверу во время работы. Это сильнейшее из возможных доказательств: работа произошла на вашем компьютере, потому что никакой другой машины не было доступно.
Что видим мы
Чтобы прояснить, что именно собирается: когда вы загружаете страницу, наш провайдер аналитики (Cloudflare Web Analytics) фиксирует, что какой-то браузер загрузил этот URL из какой-то страны. Никаких куков, никаких постоянных идентификаторов, ничего, что было бы привязано к личности.
Для инструментов, которые при первом использовании скачивают WebAssembly-модуль (кодеки jSquash, ONNX-модель для удаления фона), наш хостинг-провайдер видит, что кто-то запросил этот модуль, — точно так же, как он видит, что кто-то запросил CSS-файл. Сам модуль не содержит никакой информации о вашем изображении.
Полный перечень собираемых данных — в нашей политике конфиденциальности.
Технологический стек
Для любопытных — вот из чего состоит RoundCut:
- Astro — генератор статических сайтов. Каждая страница отдаётся как обычный HTML; JavaScript-«острова» с прогрессивным улучшением появляются только там, где живут интерактивные инструменты.
- Ванильный CSS с кастомными свойствами — никакого Tailwind, никакого CSS-in-JS. Вся дизайн-система — один файл
tokens.css. - jSquash — WebAssembly-привязки к MozJPEG, libwebp, libavif и Oxipng для кодирования изображений.
- Cropper.js — слой взаимодействия с прямоугольником кадрирования для инструментов обрезки.
- ONNX Runtime Web — запускает модель удаления фона в браузере через WebAssembly.
- Cloudflare Pages — хостинг статической сборки с раздачей из edge-узлов, DNS и защита от DDoS.
- Cloudflare Web Analytics — агрегированный подсчёт просмотров страниц без куков.
Поддержка браузеров
Все инструменты работают в текущей и предыдущей версиях Chrome, Firefox, Safari и Edge — на десктопе и мобильном. Сайт построен по принципу прогрессивного улучшения: там, где браузер поддерживает более новый API (showSaveFilePicker, OffscreenCanvas и др.), мы его используем; там, где нет — откатываемся к старому эквиваленту. Никакого «ваш браузер не поддерживается».
Единственное жёсткое требование — JavaScript. Без JavaScript инструменты не работают: серверного fallback нет, потому что никакого сервера для обработки изображений не существует.
Вопросы
Что-то не охватили? Напишите нам: support@araluma.com. Технические вопросы приветствуются.