Удаляем фон изображений в браузере — приватность и производительность в одном флаконе

Представьте: вам нужно быстро убрать фон с фотографии товара для интернет-магазина или подготовить изображение для презентации. Традиционные решения требуют либо установки громоздких программ, либо загрузки файлов на сторонние серверы. А что если вся магия может происходить прямо в вашем браузере, без отправки данных куда-либо?

Что это за проект?

bg-remove от Addy Osmani — это React-приложение, которое использует машинное обучение для удаления фона изображений. Главная фишка? Вся обработка происходит локально, в вашем браузере. Никаких загрузок на сервер, никаких подписок, никаких ограничений на количество обрабатываемых изображений.

Кому это пригодится?

Фронтенд-разработчикам, которые хотят добавить функцию обработки изображений в свои проекты
Владельцам малого бизнеса, работающим с каталогами товаров
Контент-менеджерам и дизайнерам, которым нужно быстро подготовить изображения
Всем, кто заботится о конфиденциальности своих данных

Основные возможности

Однокликовое удаление фона Загрузили изображение — получили результат. Никаких сложных настроек для базового сценария.
Гибкость вывода Можно сохранить изображение с прозрачным фоном или заменить его на:
- Сплошной цвет
- Другое изображение (например, для предпросмотра товара на разных фонах)
Полная приватность Ваши изображения никогда не покидают ваш компьютер. Это особенно важно для обработки:
- Конфиденциальных документов
- Персональных фотографий
- Коммерческих изображений
Две модели на выбор
- RMBG-1.4 — работает везде через WebAssembly
- MODNet — ускоренная версия для браузеров с поддержкой WebGPU
Готовое решение для интеграции MIT-лицензия позволяет свободно использовать код в своих проектах.

Как это работает под капотом?

Проект построен на современном стеке:

React + Vite для молниеносной работы интерфейса
Transformers.js — запуск ML-моделей прямо в браузере
TailwindCSS для стилизации
IndexedDB (через Dexie.js) для локального хранения

Интересная деталь: приложение использует две разные модели машинного обучения:

RMBG-1.4 — «рабочая лошадка» с хорошей точностью и поддержкой всех браузеров
MODNet — ускоренная версия для Chrome с WebGPU, которая может работать быстрее на мощных устройствах

Пример запуска проекта локально

git clone https://github.com/addyosmani/bg-remove.git
cd bg-remove
npm install
npm run dev

Где это можно применить?

Электронная коммерция Быстрая подготовка изображений товаров с прозрачным фоном для каталогов.
Контент-маркетинг Создание адаптивных изображений для статей, которые хорошо смотрятся на любом фоне.
Прототипирование интерфейсов Удаление фона у скриншотов для презентаций и мокапов.
Личные проекты Обработка фотографий для портфолио или социальных сетей.

Плюсы и минусы

✅ Преимущества:

Не нужно устанавливать Photoshop или другие тяжелые приложения
Не зависит от интернет-соединения после загрузки моделей
Открытый код и свободная лицензия
Поддержка всех современных браузеров

❌ Ограничения:

Требует достаточно мощного устройства для обработки больших изображений
WebGPU пока поддерживается не всеми браузерами
Нет пакетной обработки (по одному изображению за раз)

Вывод: стоит ли пробовать?

Если вам нужно:

Быстро удалять фон изображений без отправки данных на сервер
Иметь под рукой бесплатный инструмент для разовых задач
Изучить, как работают ML-модели прямо в браузере

...то этот проект точно заслуживает внимания. Для сложных задач вроде пакетной обработки или работы с видео потребуются другие решения, но для повседневных нужд bg-remove — отличный вариант.

Особенно рекомендую фронтенд-разработчикам посмотреть исходный код — это отличный пример современного веб-приложения с использованием машинного обучения.