Обрізати

Обрізка в коло Обрізка зображення

Оптимізація

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

Редагування

Зміна розміру зображення

Конвертація

Інші

Зображення у PDF

Як працює Araluma

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

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

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

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

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

Чому гібридний підхід

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

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

  • Стиснення зображень, при фінальному завантаженні. Серверний sharp + libvips 8.17 створює файли на 10–15% менші байт-за-байтом, ніж браузерні кодеки при однаковій візуальній якості, і надає доступ до налаштування швидкості/хроми AVIF та виводу JPEG XL, яких браузер не підтримує. Слайдер/попередній перегляд все одно працює у Вашому браузері, щоб ітерація залишалась миттєвою; лише натискання «Завантажити» проходить через наш сервіс.
  • AI-видалення фону, на стандартному шляху. Модель BiRefNet, яку запускає cf.image.segment від Cloudflare (та сама архітектура, що й у remove.bg), потребує справжнього GPU для завершення за 1–3 секунди. Резервний варіант у браузері (ISNet через ONNX Runtime + WebAssembly) працює, але займає 20–40 секунд при першому запуску та 2–10 секунд надалі, і дає помітно грубіший результат на волоссі, хутрі та тонких краях.

Ціна, яку ми приймаємо за серверну обробку на цих двох шляхах, — один мережевий запит на операцію. Ціна, яку ми уникаємо, залишаючись на клієнтській стороні всюди в іншому (Circle Crop, попередній перегляд Compress), — плата за запит туди-назад на тих частинах робочого процесу, де ітерація відбувається найшвидше.

Конвеєр покроково

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

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

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

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

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

  • Circle Crop. Піксельне перетворення Canvas 2D з круговим контуром обрізки. Бітмап малюється у <canvas> з вибраним обертанням і масштабом, застосовується кругове обрізання, а вміст кола зчитується назад як ImageData. Інтерактивну рамку кадрування обробляє Cropper.js. Повністю у Вашому браузері.
  • Compress — попередній перегляд і слайдер. Перекодує JPG, PNG, WebP або AVIF за допомогою canvas.toBlob, щоб паралельний попередній перегляд оновлювався в міру переміщення слайдера якості. Повністю у Вашому браузері. Ніякого завантаження ще немає.
  • Compress — Завантажити. Коли Ви натискаєте «Завантажити», зображення надсилається один раз на api.araluma.com (сервіс Fastify на VPS у Німеччині на базі Hostinger, Node 24 + sharp 0.34 + libvips 8.17, ті самі C-бібліотеки, що їх Squoosh використовує на серверному шляху). Зображення перекодується з тими ж параметрами, які Ви встановили у попередньому перегляді, і байти стримуються назад до Вашого браузера. Сервіс підтримує ізольований за тенантами кеш із адресацією за вмістом (хеш вхідних байтів + параметрів) з обмеженням 500 МБ, щоб повторне завантаження того самого зображення з тими самими налаштуваннями відтворювало кешовані байти — кеш не індексується за Вами, IP або іменем файлу. Якщо сервіс недоступний, інструмент повертається до блобу попереднього перегляду в браузері.
  • Remove Background — стандартний хмарний шлях. Зображення завантажується один раз на Cloudflare Worker (araluma-bg-remover), розміщується у приватному бакеті R2 (araluma-bg-temp), обробляється трансформацією cf.image.segment від Cloudflare, яка запускає модель BiRefNet на GPU Cloudflare edge, і вирізаний об’єкт стримується назад. Розміщений об’єкт R2 видаляється протягом однієї години правилом життєвого циклу R2, незалежно від результату. Типова фотографія завершується за 1–3 секунди. Денні ліміти на IP та ліміт завантаження 5 МБ дозволяють безкоштовному тарифу залишатись стабільним.
  • Remove Background — резервний варіант WebAssembly. Якщо Worker недоступний (мережа впала, Ви за суворим брандмауером, денна квота вичерпана або файл перевищує хмарний ліміт 5 МБ), інструмент прозоро перемикається на модель ISNet, що працює локально у Вашому браузері через ONNX Runtime Web з WebAssembly. Перший запуск завантажує модель ~80 МБ і займає 20–40 секунд; наступні запуски займають 2–10 секунд. Жодного завантаження на цьому шляху — Ви можете перевірити це в DevTools.

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

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

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

Оберіть зручний спосіб:

Спосіб 1 — Спостерігайте за вкладкою Network

  1. Відкрийте Araluma у новій вкладці та відкрийте DevTools → Network.
  2. Скористайтеся Circle Crop або слайдером попереднього перегляду Compress. Ви побачите запити лише для HTML/CSS/JS/шрифтів, а також відповідні WebAssembly-модулі при першому використанні. Жоден запит не міститиме байти Вашого зображення.
  3. Тепер скористайтеся Compress → Завантажити або Remove Background. Ви побачите рівно один POST на api.araluma.com (Compress) або на Worker видалення фону, що містить Ваше зображення, — і одну відповідь із результатом. Наведіть курсор на будь-який запит, щоб побачити розмір і час.

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

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

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

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

Що бачимо ми — і чого не бачимо

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

На серверних шляхах:

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

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

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

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

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

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

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

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

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

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

Питання

Щось, що ми не охопили? Пишіть нам: support@araluma.com. Технічні запитання вітаються.