Как работает конвертация изображений в браузере
Каждая конвертация — это четырёхэтапный конвейер, работающий полностью на JavaScript. Библиотеки кодеков не загружаются — декодирование и перекодирование выполняет встроенный Canvas API браузера.
- Считывает каждый загруженный файл как Blob и создаёт объектный URL, чтобы браузер мог декодировать его без отправки байтов на сервер.
- Отрисовывает декодированное изображение на внеэкранном элементе Canvas, применяя ограничения изменения размера с сохранением исходного соотношения сторон.
- Вызывает
canvas.toBlob(callback, targetMime, quality)для перекодирования пикселей. PNG всегда без потерь; JPEG и WebP учитывают ползунок качества. - Показывает миниатюру до/после с размерами и весом файла, затем предлагает кнопку скачивания для каждого изображения или единый ZIP для всей партии.
Зачем конвертировать форматы изображений?
- Переход с PNG на WebP сокращает типичный размер файла на 25–35% без видимой потери качества при значении 0.8, что напрямую снижает вес страницы и улучшает показатели LCP в Core Web Vitals.
- PNG сохраняет прозрачность, которую JPEG отбрасывает, поэтому PNG→JPEG рендерит прозрачные пиксели на белом фоне — полезно, когда принимающая сторона (почта, старый CMS) не принимает PNG.
- Социальные платформы и рекламные сети имеют строгие требования к форматам: Facebook и LinkedIn предпочитают JPEG для фото; OG-превью Twitter обрабатывает WebP; некоторые рекламные серверы отклоняют не-JPEG креативы.
- Приведение пакета изображений разных форматов (скриншоты PNG, фото JPEG, экспорты WebP) к единому формату перед загрузкой в CMS или DAM устраняет сложность обработки форматов в конвейере приёма данных.
Типичные сценарии использования
Конвертация формата нужна, когда исходный формат и ожидания получателя не совпадают.
- Подготовка фотографий товаров для Shopify или WooCommerce — JPEG-оригиналы конвертируются в WebP с качеством 0.85 для витрины, PNG сохраняется для печатных экспортов.
- Конвертация PNG-экспортов дизайнера в JPEG или WebP перед встраиванием в React или Next.js, чтобы оптимизатор изображений фреймворка начинал с меньшего источника.
- Пакетная обработка папки скриншотов из QA-прогона — PNG в JPEG с качеством 0.9 для уменьшения архива перед прикреплением к тикету в баг-трекере.
Практический пример: PNG 2 МБ → WebP 300 КБ
PNG-изображение-герой размером 2 МБ и 2400×1600 пикселей — типичная нагрузка на маркетинговых лендингах.
Перетащите PNG сюда, выберите WebP как целевой формат, установите качество 0.8 и при желании задайте максимальную ширину 1200, чтобы вдвое уменьшить размеры в пикселях. Конвейер Canvas отрисует изображение в размере 1200×800 (соотношение сохранено), перекодирует в WebP, и карточка вывода покажет результат — как правило, 280–320 КБ, уменьшение на 85%. Нажмите Скачать на карточке или загрузите ZIP пакетно, если конвертировали несколько изображений.
Какие форматы поддерживаются?
Исходные изображения: любой формат, который браузер может декодировать — PNG, JPEG, WebP, GIF и BMP принимаются все. Форматы вывода: PNG (без потерь), JPEG и WebP. AVIF-вывод пока не поддерживается, так как кодировщик Canvas API доступен только в Chrome 105+ и отсутствует в Safari и Firefox; WASM-путь для AVIF запланирован в будущем релизе.
Всё происходит на моём устройстве?
Да. Страница использует нативный Canvas API браузера и Web File API. Никакие данные изображений не отправляются на сервер; конвейер конвертации работает полностью во вкладке браузера. Вы можете проверить это, открыв DevTools и посмотрев вкладку Network — после загрузки страницы исходящих запросов нет.
В чём разница в качестве между PNG и JPEG?
PNG — формат без потерь: каждый пиксель точно сохраняется в цикле кодирования. JPEG использует сжатие DCT и отбрасывает мелкие детали, которые глаз редко замечает; качество 0.8 — распространённая «золотая середина», при которой визуальная разница с оригиналом незаметна большинству зрителей, но файл в 4–6 раз меньше PNG. WebP может работать как в режиме без потерь, так и с потерями; ползунок качества здесь управляет кодировщиком с потерями, и качество 0.85 обычно превосходит JPEG 0.85 на 25–30% на естественных фотографиях.
Когда появится поддержка AVIF?
Кодирование AVIF через canvas.toBlob(…, 'image/avif') сегодня работает только в Chrome 105+; Safari и Firefox его не поддерживают. Будущий релиз добавит опциональный AVIF-путь с лёгким WebAssembly-кодировщиком, чтобы функция работала во всех браузерах. До тех пор опция AVIF отображается как «скоро», а кодировщик WebP (универсально поддерживается в современных браузерах) — рекомендуемая альтернатива следующего поколения.
Перетащите изображения, выберите формат, конвертируйте. Всё работает в вашей вкладке — без загрузки, без аккаунта, без ожидания сервера.