Конвертировать форматы изображений _

Как работает конвертация изображений в браузере

Каждое преобразование — это четырёхэтапный конвейер, работающий в вашем браузере. Для JPEG и PNG встроенный Canvas API браузера выполняет кодирование напрямую. Для WebP в Safari и AVIF в любом браузере страница загружает лёгкий кодек WebAssembly по требованию — всё равно всё локально, ваши изображения никогда не покидают устройство.

1. Считывает каждый загруженный файл как Blob и создаёт объектный URL, чтобы браузер мог декодировать его без отправки байтов на сервер.
2. Отрисовывает декодированное изображение на внеэкранном элементе Canvas, применяя ограничения изменения размера с сохранением исходного соотношения сторон.
3. Вызовите canvas.toBlob(callback, targetMimeType, quality) для перекодирования пикселей для PNG, JPEG и Chrome/Firefox WebP. Для Safari WebP и кодирования AVIF при первом использовании загружается рабочий процесс кодека WebAssembly, который выполняет кодирование в фоновом потоке. Вывод PNG всегда без потерь; JPEG, WebP и AVIF учитывают ползунок качества, который напрямую сопоставляется с настройкой квантования кодировщика.
4. Показывает миниатюру до/после с размерами и весом файла, затем предлагает кнопку скачивания для каждого изображения или единый 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. Вывод AVIF поддерживается через кодировщик WebAssembly, который загружается по требованию в любом браузере — собственный кодировщик Canvas не требуется.

Всё происходит на моём устройстве?

Да. Страница использует нативный 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 использует кодек WebAssembly, который загружается по требованию при первом выборе формата AVIF — без плагинов, без флагов браузера, без ожидания будущего релиза Chrome. Бинарный файл WASM подаётся с нашего собственного источника, кодирует ваше изображение полностью в фоновом потоке и возвращает стандартный blob image/avif, готовый к загрузке. Единственный сетевой запрос — это однократная загрузка самого кодека; никакие данные изображения никогда не покидают ваше устройство. После загрузки кодировщик остаётся в кеше на время сессии, поэтому последующие преобразования выполняются быстрее. Файлы AVIF обычно на 20-30% меньше WebP и на 50% меньше JPEG при эквивалентном качестве, что делает их лучшим выбором для сайтов, чувствительных к производительности.

Перетащите изображения, выберите формат, конвертируйте. Всё работает в вашей вкладке — без загрузки, без аккаунта, без ожидания сервера.