Десять років тому редагувати зображення на сайті означало завантажити його, зачекати, поки сервер зробить роботу, і завантажити результат. Сьогодні браузер може стиснути фото на 30 MB, конвертувати PNG у WebP чи змінити розмір пакета зображень, ніколи не контактуючи із сервером. Дві технології зробили цей зсув можливим: Canvas і WebAssembly. Жодна не таємнича, щойно ви побачите, що робить кожна.
Canvas: поверхня для малювання з доступом на рівні пікселів
Кожен сучасний браузер постачається з Canvas API — порожнім прямокутником, на якому можна малювати за допомогою JavaScript. Його справжня сила для інструментів зображень — не малювання фігур; це те, що Canvas дає коду прямий доступ до окремих пікселів зображення.
Коли ви завантажуєте фото в полотно, браузер віддає вашому коду масив чисел: значення червоного, зеленого, синього й альфа (прозорості) для кожного пікселя. Звідти звичайні операції стають простими:
- Зміна розміру означає семплінг тієї сітки пікселів у меншу чи більшу.
- Обрізання означає копіювання прямокутної ділянки в нове полотно.
- Поворот і віддзеркалення — геометричні перетворення, застосовані перед малюванням.
- Конвертація формату відбувається, коли ви експортуєте полотно — попросіть JPEG, PNG чи WebP, і браузер закодує пікселі відповідно.
Усе це працює на вашому власному пристрої, використовуючи ваш CPU і, де доступно, ваш GPU. Нічого не завантажується, бо пікселі ніколи не залишають сторінку. Саме тому Конвертер зображень може перетворити PNG на WebP тієї миті, коли ви його кидаєте — немає ходки, на яку треба чекати.
WebAssembly: швидкість близька до нативної всередині браузера
Canvas впорається зі звичайними перетвореннями, але деякі роботи потребують серйозної обчислювальної сили — високоякісне кодування JPEG, оптимізація PNG, запуск моделі ШІ для вирізання фону. Самого JavaScript може бути надто повільно для цього. Тут і з'являється WebAssembly (часто скорочують до Wasm).
WebAssembly — це компактний, низькорівневий формат, який браузери можуть виконувати майже з нативною швидкістю. Розробники беруть швидкий, перевірений код, написаний мовами на кшталт C, C++ чи Rust — ті самі бібліотеки, що живлять десктопне ПЗ для зображень — і компілюють його в Wasm. Браузер потім запускає цей код у щільному, ізольованому середовищі, значно швидше за еквівалентний JavaScript.
На практиці це означає, що вкладка браузера тепер може робити роботу, яка раніше вимагала сервера чи десктопного застосунку: кодувати зображення зі стисненням професійного рівня, знімати метадані чи запускати нейронну мережу для видалення фону — усе локально.
Чому локальна обробка водночас приватна й швидка
Поєднайте Canvas і WebAssembly — і переваги випливають природно.
Приватність структурна, а не обіцянка. Оскільки пікселі лишаються в сторінці, а обробка працює на вашому CPU, немає кроку завантаження. Немає серверної копії вашого файлу, щоб зберігати, логувати, кешувати чи тренувати на ній — бо файл ніколи не передавався. Вам не треба довіряти політиці приватності; ви можете перевірити це, увімкнувши режим польоту й дивлячись, як інструмент продовжує працювати.
Швидкість походить від повного викидання мережі. Найповільніший крок серверного інструмента — зазвичай перекидання вашого файлу вгору й назад униз. Приберіть це — і фото на 40 MB обробляється приблизно так само швидко, як на 40 KB. Немає також черги — ваш пристрій працює лише над вашим зображенням, а не тисячами чужих.
Є бонус, якого більшість не очікує: оскільки весь інструмент — це просто код і матеріали, браузер може кешувати його. IMG.DIY — це PWA із сервіс-воркером, тож після першого відвідування інструменти зберігаються на вашому пристрої й продовжують працювати офлайн — у режимі польоту, у літаку, будь-де. Стиснення й конвертація взагалі не потребують з'єднання.
Компроміси, чесно
Браузерна обробка не магія й не позбавлена обмежень. Дуже великі пакети можуть напружити пам'ять слабкого телефона, бо робота використовує ресурси вашого пристрою, а не дата-центру. А кільком функціям справді потрібна мережа — будь-що, що викликає зовнішній сервіс, як аудит швидкості сторінки, не може працювати офлайн. Видалення фону — проміжний випадок: воно працює локально, але лише після одноразового завантаження файлу моделі.
Але для щоденних робіт — стиснути, конвертувати, змінити розмір, обрізати, повернути — браузер тепер повноцінна, приватна, швидка майстерня зображень, що просто живе у вкладці. Без завантаження, без сервера, без очікування.