Обрізати

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

Оптимізація

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

Редагування

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

Конвертація

Інші

JPG у PDF

Як працює Araluma

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

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

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

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

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

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

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

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

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

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

  • Стиснення, при фінальному завантаженні. Серверні sharp плюс libvips дають файли на 10 до 15% менші байт у байт, ніж кодувальники браузера за тієї самої візуальної якості, і відкривають налаштування швидкості та кольоровості AVIF, яких браузер не дає. Повзунок і перегляд усе ще працюють у Вашому браузері, щоб ітерації лишалися миттєвими. Лише дотик до “Завантажити” проходить через нашу службу.
  • Видалення фону ШІ, на типовому шляху. Модель BiRefNet, яку запускає сегментація зображень Cloudflare (та сама архітектура, що в remove.bg), потребує справжнього GPU, щоб упоратися за секунду чи дві. Запасний варіант у браузері (ISNet через ONNX Runtime плюс WebAssembly) працює, але триває значно довше й дає помітно грубіше вирізання на волоссі, хутрі й тонких краях.
  • Збільшення за допомогою ШІ, на типовому шляху. Хмарна надвисока роздільна здатність відновлює деталь, яку повторна вибірка в браузері не може, із запасом у браузері, коли служба недосяжна.

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

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

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

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

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

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

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

  • Інструменти лише для браузера (обрізання, зміна розміру, перегляд і повзунок стиснення, збирання PDF та більшість перетворень форматів). Вони виконуються як піксельні перетворення Canvas і перекодування canvas.toBlob прямо на Вашій машині. Інтерактивна рамка обрізання використовує Cropper.js. Ніщо не покидає сторінку.
  • Завантаження стиснення. Коли Ви торкаєтеся “Завантажити”, зображення один раз іде на api.araluma.com (служба Fastify на VPS Hostinger у Німеччині, Node плюс sharp і libvips, ті самі бібліотеки C, що Squoosh використовує на своєму серверному шляху). Воно перекодовується з параметрами, заданими Вами в перегляді, і байти повертаються потоком. Служба тримає ізольований за орендарями, адресований за вмістом кеш (хеш вхідних байтів плюс параметри), тож повторне завантаження того самого зображення з тими самими налаштуваннями відтворює байти з кешу. Цей кеш не індексується за Вами, Вашою IP чи іменем файлу. Якщо служба недосяжна, інструмент повертається до переглядового блоба в браузері.
  • Видалення фону, типовий хмарний шлях. Зображення один раз завантажується до Cloudflare Worker, розміщується в приватному бакеті R2, опрацьовується сегментацією зображень Cloudflare, яка запускає модель BiRefNet на межевих GPU, і вирізання повертається потоком. Розміщений об’єкт видаляється протягом години правилом життєвого циклу R2, незалежно від результату. Звичайна світлина завершується за секунду чи дві. Добові обмеження на IP та розмір надсилання тримають безкоштовний рівень стійким.
  • Видалення фону, запас на WebAssembly. Якщо Worker недосяжний (Ваша мережа впала, суворий брандмауер його блокує, добова квота заповнена або файл завеликий для хмарної межі), інструмент тихо перемикається на модель ISNet, яка працює локально через ONNX Runtime Web і WebAssembly. Перший запуск завантажує модель і триває довше, наступні запуски швидші. Без надсилання на цьому шляху, що можна перевірити в DevTools.
  • Збільшення за допомогою ШІ. Типовий шлях один раз надсилає зображення до хмарної служби надвисокої роздільної здатності й повертає збільшений результат потоком, із запасом у браузері, якщо служба недосяжна.

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

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

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

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

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

  1. Відкрийте Araluma в новій вкладці й відкрийте DevTools, потім панель Network.
  2. Скористайтеся інструментом лише для браузера, як-от Circle Crop чи повзунок перегляду стиснення. Ви побачите запити лише до HTML, CSS, JS та шрифтів, а також відповідні модулі WebAssembly при першому використанні. Жоден запит не винесе байти Вашого зображення.
  3. Тепер скористайтеся інструментом зі зверненням до сервера, як-от Завантаження стиснення чи Видалення фону. Ви побачите рівно один POST, що несе Ваше зображення до названої кінцевої точки, і одну відповідь із результатом. Наведіть курсор на будь-який запит, щоб прочитати його розмір і час.

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

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

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

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

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

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

На шляхах зі зверненням до сервера:

  • Завантаження стиснення бачить байти зображення протягом кодування (зазвичай кілька сотень мілісекунд), тримає запис кешу з адресацією за вмістом протягом його 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 розміщує статичну збірку й роздає її з межі мережі, а також запускає Workers, R2 та конвеєр сегментації зображень (BiRefNet) за типовим шляхом Видалення фону.
  • Fastify із sharp і libvips на Node, служба завантаження стиснення за адресою api.araluma.com, на VPS Hostinger у Німеччині.
  • Cloudflare Web Analytics, агрегований підрахунок переглядів сторінок без cookie.

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

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

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

Запитання

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