Десять лет назад отредактировать изображение на сайте значило загрузить его, подождать, пока сервер сделает работу, и скачать результат. Сегодня браузер может сжать фото на 30 МБ, конвертировать PNG в WebP или изменить размер пакета изображений, ни разу не связавшись с сервером. Этот сдвиг сделали возможным две технологии: Canvas и WebAssembly. Ни одна не таинственна, стоит увидеть, что делает каждая.
Canvas: поверхность для рисования с доступом на уровне пикселей
Каждый современный браузер поставляется с Canvas API — пустым прямоугольником, на котором можно рисовать через JavaScript. Его настоящая сила для инструментов изображений не в рисовании фигур; в том, что Canvas даёт коду прямой доступ к отдельным пикселям изображения.
Когда вы загружаете фото в canvas, браузер отдаёт вашему коду массив чисел: значения красного, зелёного, синего и альфа (прозрачности) для каждого пикселя. Отсюда обычные операции становятся простыми:
- Изменение размера — это выборка этой сетки пикселей в меньшую или большую.
- Обрезка — это копирование прямоугольной области в новый canvas.
- Поворот и отражение — геометрические преобразования, применяемые перед отрисовкой.
- Конвертация формата происходит при экспорте canvas — попросите JPEG, PNG или WebP, и браузер кодирует пиксели соответственно.
Всё это работает на вашем устройстве, используя ваш процессор и, где доступно, вашу видеокарту. Ничего не загружается, потому что пиксели никогда не покидают страницу. Вот почему конвертер изображений может превратить PNG в WebP в тот миг, когда вы его перетаскиваете — нет цикла, которого нужно ждать.
WebAssembly: почти нативная скорость внутри браузера
Canvas справляется с обычными преобразованиями, но некоторым задачам нужна серьёзная вычислительная мощь — высококачественное кодирование JPEG, оптимизация PNG, запуск ИИ-модели для вырезки фона. Один JavaScript может быть слишком медленным для этого. Вот тут вступает WebAssembly (часто сокращаемый до Wasm).
WebAssembly — это компактный низкоуровневый формат, который браузеры могут выполнять почти с нативной скоростью. Разработчики берут быстрый, проверенный код, написанный на языках вроде C, C++ или Rust — те же библиотеки, что питают десктопный софт для изображений — и компилируют его в Wasm. Затем браузер запускает этот код в тесной изолированной среде, куда быстрее эквивалентного JavaScript.
На практике это значит, что вкладка браузера теперь может делать работу, которая раньше требовала сервера или десктопного приложения: кодировать изображения со сжатием профессионального уровня, вырезать метаданные или запускать нейросеть для удаления фона — всё локально.
Почему локальная обработка и приватна, и быстра
Соедините Canvas и WebAssembly — и выгоды выпадают естественно.
Приватность структурна, а не обещание. Поскольку пиксели остаются в странице, а обработка идёт на вашем процессоре, шага загрузки нет. Нет серверной копии вашего файла, чтобы хранить, логировать, кэшировать или обучать на ней — потому что файл никогда не передавался. Вам не нужно доверять политике конфиденциальности; вы можете проверить это, включив режим полёта и наблюдая, как инструмент продолжает работать.
Скорость приходит от полного исключения сети. Самый медленный шаг серверного инструмента обычно — гонять ваш файл наверх и обратно вниз. Уберите это — и фото на 40 МБ обрабатывается примерно так же быстро, как на 40 КБ. Ещё и нет очереди — ваше устройство работает над вашим изображением одним, а не тысячами чужих.
Есть бонус, которого мало кто ждёт: поскольку весь инструмент — это просто код и ассеты, браузер может его закэшировать. IMG.DIY — это PWA с сервис-воркером, так что после первого визита инструменты хранятся на вашем устройстве и продолжают работать офлайн — в режиме полёта, в самолёте, где угодно. Сжатие и конвертация не нуждаются в соединении вовсе.
Компромиссы, честно
Браузерная обработка не волшебство и не свободна от ограничений. Очень большие пакеты могут напрячь память слабого телефона, ведь работа использует ресурсы вашего устройства, а не дата-центра. И несколько функций действительно нуждаются в сети — всё, что обращается к внешнему сервису, вроде аудита скорости страницы, не может работать офлайн. Удаление фона — промежуточный случай: оно работает локально, но только после разовой загрузки файла модели.
Но для повседневных задач — сжать, конвертировать, изменить размер, обрезать, повернуть — браузер теперь полноценная, приватная, быстрая мастерская изображений, которая просто живёт во вкладке. Без загрузки, без сервера, без ожидания.