Обрізати

Обрізати фото Обрізати фото по колу

Оптимізація

Стиснути зображення Видалити фон Збільшити зображення

Редагування

Змінити розмір

Конвертація

Інші

JPG у PDF

Як працює RoundCut

Технічні подробиці про те, що робить кожен інструмент, де він запускається та як ви можете це самостійно перевірити.

Коротко про головне

RoundCut використовує гібридну архітектуру: більшість інструментів працює цілком у вашому браузері з нульовим завантаженням, а жменька надсилає один-єдиний мережевий запит через нашу власну інфраструктуру, коли браузер не може зрівнятися за якістю, і завжди з непомітним резервним варіантом на боці клієнта. Ми кажемо вам, на якому ви шляху, у кожному інструменті й на цій сторінці.

Таблиця нижче репрезентативна, а не вичерпна (нові інструменти виходять регулярно). Вона показує по одному прикладу кожного типу шляху:

Приклад інструментаДе відбувається робота
Обрізання по колу (лише браузер)100% у вашому браузері, Canvas API. Без завантаження, працює офлайн.
Попередній перегляд стиснення (лише браузер)100% у вашому браузері, canvas.toBlob. Без завантаження. Повзунок залишається миттєвим.
Фінальне завантаження стиснення (торкається сервера)Один повний цикл до нашого сервісу на api.roundcut.com.br (Fastify + sharp + libvips на VPS у Німеччині), із резервним варіантом у браузері.
Видалення тла (торкається сервера)Один повний цикл до Cloudflare Worker, який запускає BiRefNet на крайових GPU Cloudflare, із резервним варіантом на WebAssembly у вашому браузері, коли хмара недосяжна.

Обрізання, зміна розміру, конвертація формату (окрім кодування AVIF) і попередній перегляд стиснення, усе це працює повністю у вашому браузері. Видалення тла, завантаження стиснення, ШІ-збільшення, кодування AVIF і PDF із кількома зображеннями кожне надсилає один-єдиний запит і повертається до браузера, коли хмара недосяжна.

Ви можете перевірити твердження про бік клієнта приблизно за 30 секунд: відкрийте DevTools → Network, очистьте журнал, потім скористайтеся інструментом лише для браузера, як-от Обрізання по колу чи повзунок попереднього перегляду стиснення, ви побачите нуль запитів, що виносять байти вашого зображення за межі сторінки. Для інструментів, що торкаються сервера, ви побачите рівно одне завантаження на операцію, до названих кінцевих точок.

Чому гібридна

Більшість онлайн-інструментів для зображень сидить на одному з країв: завантажити-усе-на-сервер (ви чекаєте на повні цикли, а оператор зберігає ваш файл) або усе-в-браузері (ви платите якістю і швидкістю на кроках кодування/ШІ). Жоден край не виграє всюди.

Ми обрали бік клієнта там, де браузери вже чудові, елемент <canvas> справляється з обрізанням, обертанням, зміною розміру та кодуванням попереднього перегляду з втратами в JPG/WebP, і бік сервера там, де браузер досі вимірно програє:

  • Стиснення зображень, при фінальному завантаженні. Серверні sharp + libvips 8.17 дають файли на 10-15% менші байт у байт, ніж кодувальники браузера за тієї самої візуальної якості, і дають доступ до налаштування швидкості/кольоровості AVIF та виводу JPEG XL, який браузер не надає. Повзунок і попередній перегляд досі працюють у вашому браузері, щоб ітерація залишалася миттєвою, через наш сервіс проходить лише дотик «Download».
  • ШІ-видалення тла та ШІ-збільшення, на шляху за замовчуванням. Моделям (BiRefNet для сегментації, суперроздільність для збільшення) потрібен справжній GPU, щоб завершити за секунди. Резервні варіанти в браузері працюють, але вони повільніші й дають помітно грубіший результат на волоссі, хутрі та тонких краях.
  • Кодування AVIF, при конвертації. Вбудований у браузер кодувальник AVIF повільний на деяких пристроях, тож вивід AVIF надсилає один запит до Worker стиснення, із кодуванням у браузері в головному потоці як резервний варіант.

Ціна, яку ми приймаємо за бік сервера на цих шляхах, це один повний цикл на операцію. Ціна, якої ми уникаємо, залишаючись на боці клієнта в усьому іншому, це плата за повний цикл на тих частинах процесу, що ітерують найшвидше.

Конвеєр, крок за кроком

1. Ви обираєте файл

Через вибір файлу, перетягування або вставлення браузер передає JavaScript об’єкт File. JavaScript читає байти за допомогою FileReader або Blob.arrayBuffer(). У жоден момент цього кроку файл не надсилається мережею, незалежно від того, яким інструментом ви користуєтеся.

2. Браузер декодує зображення

Сучасні браузери нативно декодують JPG, PNG, WebP, GIF і AVIF. Ми використовуємо createImageBitmap(), щоб перетворити сирі байти на растр, з яким GPU може працювати, поза головним потоком. Для HEIC у браузерах, які не декодують його нативно, ми повертаємося до декодера WebAssembly, що працює локально у вашому браузері.

3. Інструмент робить своє, ось тут шляхи розходяться

  • Інструменти лише для браузера (обрізання, зміна розміру, конвертація формату в PNG/JPEG/WebP, попередній перегляд стиснення). Перетворення пікселів у Canvas 2D або кодек WebAssembly повторно кодує растр локально. Результат готовий без жодного завантаження. Cropper.js керує інтерактивною рамкою обрізання в інструментах обрізання, а canvas.toBlob відповідає за повторне кодування попереднього перегляду. Цілком у вашому браузері.
  • Стиснення, завантаження. Коли ви торкаєтеся «Download», зображення один раз надсилається на api.roundcut.com.br (сервіс Fastify, що працює на VPS у Німеччині під керуванням Hostinger, Node 24 + sharp 0.34 + libvips 8.17, ті самі C-бібліотеки, що Squoosh використовує на своєму серверному шляху). Воно повторно кодується з тими самими параметрами, які ви задали в попередньому перегляді, а байти потоком повертаються до вашого браузера. Сервіс тримає ізольований за орендарем, адресований за вмістом кеш (хеш вхідних байтів + параметрів), обмежений 500 МБ, щоб повторне завантаження того самого зображення з тими самими налаштуваннями відтворювало кешовані байти, кеш не індексується за вами, IP чи іменем файлу. Якщо сервіс недосяжний, інструмент повертається до blob попереднього перегляду в браузері.
  • Видалення тла, хмарний шлях за замовчуванням. Зображення один раз завантажується на Cloudflare Worker, тимчасово розміщується в приватному бакеті R2, обробляється перетворенням cf.image.segment від Cloudflare, яке запускає модель BiRefNet на крайових GPU Cloudflare, а вирізаний об’єкт повертається потоком. Тимчасовий об’єкт R2 видаляється протягом години правилом життєвого циклу R2, хай яким буде результат. Типове фото завершується за 1-3 секунди. Денні ліміти на IP і завантаження до 5 МБ тримають безкоштовний рівень сталим.
  • Інші інструменти з хмарною підтримкою (ШІ-збільшення, кодування AVIF, PDF із кількома зображеннями) ідуть за тією самою формою: один запит до названої інфраструктури (хмарний API для зображень заради суперроздільності, Worker стиснення для кодування AVIF, наш сервіс VPS для PDF із кількома зображеннями), результат потоком назад і прозорий резервний варіант у браузері, якщо цей запит не пройде.
  • Резервний варіант на WebAssembly. Якщо відповідний хмарний шлях недосяжний (ваша мережа впала, ви за суворим брандмауером, денна квота вичерпана або файл перевищує хмарний ліміт), інструмент прозоро перемикається на локальну модель чи кодек, що працює у вашому браузері, наприклад модель видалення тла ISNet через ONNX Runtime Web з WebAssembly. Перший запуск завантажує модель і йде повільніше, наступні запуски швидші. Без жодного завантаження на цих резервних шляхах, ви можете перевірити це в DevTools.

4. Ви завантажуєте результат

Вихідний растр кодується в Blob, обгортається в object URL і пропонується стандартному діалогу збереження файлу вашого браузера. Файл з’являється на вашому диску.

Як перевірити самостійно

Оберіть те, що вам зручніше:

Спосіб 1. Стежте за вкладкою Network

  1. Відкрийте RoundCut у новій вкладці й відкрийте DevTools → Network.
  2. Скористайтеся інструментом лише для браузера, Обрізанням по колу чи повзунком попереднього перегляду стиснення. Ви побачите запити лише на HTML/CSS/JS/шрифти, плюс відповідні модулі WebAssembly при першому використанні. Жоден запит не винесе байти вашого зображення.
  3. Тепер скористайтеся інструментом, що торкається сервера, Стиснення → Download або Видалення тла. Ви побачите рівно один POST, що несе ваше зображення, і одну відповідь, що повертається з результатом. Наведіть курсор на будь-який запит, щоб побачити розмір і час.

Стовпець «Initiator» каже вам, який скрипт ініціював кожен запит, а стовпець «Type» каже, що було надіслано. Ми не ховаємо жодного з них.

Спосіб 2. Використовуйте інструменти офлайн

  1. Завантажте будь-яку сторінку інструмента RoundCut. Скористайтеся Видаленням тла один раз на маленькому зображенні, щоб модель ISNet у браузері потрапила в кеш.
  2. Відкрийте DevTools → Network → позначте Offline (або вимкніть Wi-Fi).
  3. Перезавантажте сторінку, статичні ресурси в кеші, тож вона все одно завантажується.
  4. Спробуйте інструменти:
    • Інструменти лише для браузера (Обрізання по колу, зміна розміру, попередній перегляд стиснення) працюють далі, їм ніколи не була потрібна мережа.
    • Завантаження стиснення повертається до blob попереднього перегляду в браузері (кодування трохи менш ефективне, але робоче).
    • Видалення тла повертається до моделі ISNet на WebAssembly і працює без жодного вихідного запиту.

Якщо інструменти спрацювали офлайн (ті, що з хмарною підтримкою, трохи послаблені, ті, що лише для браузера, ідентичні), то за визначенням жоден сервер не бачив вашого зображення.

Що ми бачимо, а чого ні

На шляхах боку клієнта ми не бачимо нічого про ваше зображення. Немає запиту, щоб подивитися, немає кешу, щоб його зберегти, немає рядка журналу, щоб пошукати.

На шляхах боку сервера:

  • Сервіс стиснення і PDF бачить байти зображення на час кодування (зазвичай кілька сотень мілісекунд), тримає запис кешу, адресований за вмістом, протягом TTL кешу, і на цьому все. Кеш не індексується за користувачем, IP, іменем файлу чи будь-яким ідентифікатором, який ми могли б використати, щоб знайти «ваші» зображення. Ми не логуємо вміст зображення. Сервіс кодування розділяється між тими самими двома орендарями, яких v1 обслуговувала до міграції, із CORS на орендаря, лімітами частоти та канонічними URL, підписаними HMAC.
  • Видалення тла та інші шляхи ШІ бачать зображення на час тимчасового завантаження та виклику моделі (зазвичай кілька секунд), після чого тимчасова копія видаляється правилом життєвого циклу R2. Модель BiRefNet працює всередині власної інфраструктури Cloudflare, а не на зовнішньому API у стилі remove.bg / fal.ai / Replicate.

На кожному шляху наш постачальник аналітики (Cloudflare Web Analytics) записує агреговані дані про перегляди сторінок. URL, країна, родина браузерів, Core Web Vitals. Без cookie, без постійних ідентифікаторів, нічого прив’язаного до особи.

Для інструментів, що завантажують модуль WebAssembly при першому використанні (декодер HEIC, модель ISNet ONNX), наш постачальник хостингу бачить, що хтось отримав модуль, так само, як бачить, що хтось отримує CSS-файл. Сам модуль не містить жодної інформації про ваше зображення.

Повний опис даних наведено в нашій політиці конфіденційності.

Технологічний стек

Для допитливих:

  • Astro, генератор статичних сайтів. Кожна сторінка постачається як чистий HTML із прогресивно покращуваними «островами» JavaScript лише там, де живуть інтерактивні інструменти.
  • Чистий CSS із користувацькими властивостями, без Tailwind, без CSS-in-JS. Уся система дизайну, це один файл tokens.css.
  • canvas.toBlob / <canvas>. Кодування в JPEG, PNG, WebP, AVIF (підтримуване браузером) в інструментах лише для браузера, і вся робота з обрізання та зміни розміру.
  • Cropper.js, шар взаємодії з прямокутником обрізання.
  • ONNX Runtime Web, запускає резервний варіант ISNet на WebAssembly для Видалення тла.
  • Cloudflare Pages, хостить статичний білд, віддає його з краю мережі.
  • Cloudflare Workers + R2 + cf.image.segment (BiRefNet), конвеєр Видалення тла за замовчуванням.
  • Fastify + sharp 0.34 + libvips 8.17 на Node 24, сервіс стиснення і PDF на api.roundcut.com.br, на VPS Hostinger у Німеччині.
  • Cloudflare Web Analytics, агрегований підрахунок переглядів сторінок без cookie.

Підтримка браузерів

Кожен інструмент працює в поточній і попередній версії Chrome, Firefox, Safari і Edge, на десктопі та мобільному. Сайт використовує прогресивне покращення: де браузер підтримує новіший API (наприклад, showSaveFilePicker, OffscreenCanvas), ми його використовуємо, де не підтримує, повертаємося до старішого еквівалента. Немає жодної стіни «ваш браузер не підтримується».

Єдині жорсткі вимоги, це JavaScript (для будь-якого інструмента) і мережеве з’єднання (лише при використанні інструмента з хмарною підтримкою на його шляху за замовчуванням, інструменти лише для браузера працюють повністю офлайн після першого завантаження сторінки).

Питання

Щось ми не охопили? Пишіть на support@roundcut.app. Технічні питання вітаються.