Коротко про головне
RoundCut запускає кожен інструмент у вашому браузері, використовуючи два вбудованих API: HTML5 Canvas API для операцій на рівні пікселів і 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 з якоїсь країни. Жодних файлів cookie, жодних постійних ідентифікаторів, нічого, що прив’язано до особи.
Для інструментів, що завантажують 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 — агрегований підрахунок переглядів сторінок без файлів cookie.
Підтримка браузерів
Всі інструменти працюють у поточній і попередній версіях Chrome, Firefox, Safari та Edge — на настільних і мобільних пристроях. Сайт використовує прогресивне покращення: де браузер підтримує новіший API (наприклад showSaveFilePicker, OffscreenCanvas) — ми його використовуємо; де ні — повертаємося до старішого еквівалента. Жодної стіни «ваш браузер не підтримується».
Єдина обов’язкова вимога — JavaScript. Без JavaScript інструменти не можуть працювати — серверного запасного варіанту немає, тому що ніякого сервера для обробки зображень не існує.
Питання
Щось, що ми не охопили? Пишіть нам: support@araluma.com. Технічні запитання вітаються.