PNG в WebP v1.0

Конвертер PNG в WebP переводит растровую графику в формат Google WebP прямо в браузере: файл никуда не уходит, а вес падает в разы. На тестовом графике с прозрачным фоном 306 КБ превратились в 48 КБ, и альфа-канал остался нетронутым. Инструмент DocPivot пригодится верстальщикам, дизайнерам интерфейсов и владельцам сайтов, которым PageSpeed Insights раз за разом показывает пункт «используйте современные форматы изображений». За один проход обрабатывается до 30 файлов.

Обзор конвертера PNG в WebP от DocPivot

Основная функциональность

Конвертер принимает файлы PNG и отдаёт WebP с четырьмя настройками качества. Режим «Оригинал» кодирует картинку в WebP без потерь, то есть результат совпадает с исходником пиксель в пиксель. Три остальных режима работают со сжатием с потерями и с алгоритмом sharp YUV, который заметно аккуратнее обходится с резкими краями, характерными для PNG. Дополнительно доступны уменьшение по длинной стороне и жёсткий лимит на итоговый вес файла.

Кому подходит

Инструмент рассчитан на тех, кто готовит графику для веба: фронтенд-разработчиков, дизайнеров, SEO-специалистов и владельцев интернет-магазинов. Режим «Оригинал» существует ради тех, кто работает с логотипами, иконками и элементами интерфейса, где формулировка «почти не отличается» не годится. Для подготовки исходников часто пригодится и изменение размеров изображений перед конвертацией.

Проблема и решение

Главная беда PNG на сайте: вес. Прозрачный баннер спокойно занимает 300 КБ и становится самым тяжёлым элементом страницы, из-за чего проседает LCP и вместе с ним оценка Core Web Vitals. После перевода в WebP тот же баннер укладывается в 48 КБ на настройке по умолчанию, то есть экономия составляет около 84 процентов, а прозрачность сохраняется полностью.

Что даёт перевод PNG в WebP

• Ощутимая экономия трафика: прозрачная графика теряет от 70 до 85 процентов веса, что сокращает время загрузки на мобильном интернете. Дополнительно помогает сжатие изображений для форматов, которые остаются на сайте как есть.
• Прозрачность остаётся живой: альфа-канал переносится и в режиме без потерь, и в режимах с потерями, включая полупрозрачные тени и сглаженные края.
• Честный режим без потерь: «Оригинал» это именно lossless-кодек libwebp, а не качество 100 в лоссовом режиме, как принято у большинства бесплатных сервисов.
• Ничего не уходит на чужой сервер: вся обработка идёт в вкладке браузера, поэтому исходники не покидают устройство.
• Пакет до 30 файлов: папка иконок конвертируется за один заход и скачивается архивом.
• Точный лимит по весу: задаёте «не больше 200 КБ», и качество подбирается расчётом.
• Без регистрации и дневных квот: количество конвертаций не ограничено, почта не нужна.

Ключевые функции конвертера

• Четыре режима качества: «Оригинал», «Высокое», «Хорошее» и «Меньше файл» покрывают путь от пиксельной точности до максимальной экономии.
• Кодирование без потерь: libwebp в режиме lossless сохраняет каждый пиксель исходника, что критично для фирменной символики.
• Sharp YUV в лоссовых режимах: алгоритм уменьшает расползание цвета на границах контрастных областей, типичное для скриншотов и схем.
• Чтение пикселей через WebGL2: прозрачные исходники декодируются в обход обычного канваса, что защищает цвет под полупрозрачными пикселями.
• Уменьшение по длинной стороне: доступны варианты «Оригинал», 2048 и 1200 пикселей, причём увеличение не выполняется никогда.
• Бинарный поиск качества: при заданном лимите веса запускается до восьми проб в диапазоне качества от 5 до 95 и выбирается лучший вариант, который помещается в лимит.
• Пакетная обработка и ZIP: один файл сохраняет своё имя, несколько собираются в архив автоматически.
• Отчёт по каждому файлу: карточка показывает размеры в пикселях, вес и процент экономии.
• Работа без сети: кодек libwebp скомпилирован в wasm и выполняется локально.
• Приведение к sRGB: исходник с нестандартным профилем конвертируется в sRGB, что удобно для площадок, которые требуют именно это цветовое пространство. Проверить, что было в исходном файле, помогает просмотр данных съёмки, а удаление метаданных из фотографий пригодится, если исходники нужно почистить заранее.

Как работает конвертер DocPivot

1. Перетащите один файл PNG или сразу до тридцати в область загрузки. Наружу ничего не уходит: браузер читает файлы с диска сам.
2. Выберите режим качества. По умолчанию стоит «Высокое», для логотипов и иконок переключитесь на «Оригинал».
3. При необходимости задайте уменьшение по длинной стороне или лимит веса в килобайтах. Обе настройки работают только в сторону уменьшения.
4. Запустите конвертацию и дождитесь карточек с результатами по каждому файлу.
5. Скачайте готовый WebP или архив с пакетом. Если позже понадобится вернуть картинку в прежний формат, обратная операция доступна отдельным инструментом.

Режимы качества: что стоит за каждой настройкой

Разница между режимами не сводится к ползунку качества: за ними стоят разные кодеки. «Оригинал» использует lossless-режим libwebp и воспроизводит исходную картинку при декодировании побитово. Остальные три режима вызывают лоссовый кодировщик, и файл получается меньше ценой необратимых изменений. На тестовом графике цифры выглядят так.

Здесь заложен неочевидный вывод: режим без потерь самый тяжёлый из четырёх. Он нужен для векторной по духу графики и артефактов интерфейса, а не для фотографий, где лоссовое сжатие выигрывает по всем параметрам сразу.

Цвет под полупрозрачными пикселями

Эту деталь почти никто из конкурентов не объясняет, хотя она определяет итоговый вес файла. Когда прозрачный PNG декодируется через обычный 2D-канвас, цвет под полупрозрачными пикселями округляется и превращается в шум. Глазом этот шум не виден, но кодек без потерь обязан сохранить его целиком, поэтому файл раздувается: 177 976 байт против 69 346 для одной и той же картинки. Разница в 2,6 раза возникает не из-за качества картинки, а из-за способа её чтения.

Конвертер DocPivot читает прозрачные исходники через WebGL2-считывание, минуя премультипликацию альфа-канала. Именно поэтому lossless-файл получается компактным, а полупрозрачные тени и сглаженные края не темнеют и не приобретают цветной ореол. Если исходник изначально векторный, логичнее сначала выполнить растеризацию векторной графики в нужном разрешении и только потом кодировать в WebP.

Когда переводить PNG в WebP, а когда не стоит

WebP оправдан почти везде, где картинка отдаётся браузеру. Логотипы, иконки, скриншоты интерфейса, инфографика, фоновые паттерны и баннеры выигрывают и по весу, и по скорости отрисовки. Есть, впрочем, сценарии, где перевод бессмысленен или вреден.

• Веб-графика и интерфейсы: основной сценарий, ради которого формат создавался, экономия достигает 80 процентов и выше.
• Ассеты для мобильных приложений: Android поддерживает WebP нативно, размер APK ощутимо сокращается.
• Изображения в email-рассылках: здесь лучше остаться на PNG или перевести графику в фотографический формат, потому что часть почтовых клиентов WebP не показывает.
• Файлы на печать: типография ждёт TIFF или PDF, WebP для допечатной подготовки не годится.
• Исходники для редактирования: храните мастер-копию в PNG, а WebP считайте выходным форматом.
• Повторная конвертация уже лоссового файла: если PNG получен из JPEG, гоняйте его лучше через сжатие фотографий для сайта из оригинала.
• Очень маленькие иконки: на файлах в пару килобайт выигрыш нулевой, иногда WebP оказывается даже крупнее.

Примеры использования

Ускорение интернет-магазина

Контекст: у магазина на 1С-Битрикс сотня прозрачных PNG в каталоге и красная зона в PageSpeed Insights.

• Все иконки категорий выгружаются и загружаются пакетом до 30 штук.
• Ставится режим «Высокое» и уменьшение до 1200 пикселей.
• Архив распаковывается, пути в шаблоне меняются на новые файлы.

Результат: вес графики каталога падает примерно на 80 процентов, пункт про современные форматы уходит из отчёта.

Фирменный стиль для агентства

Контекст: дизайнеру нужно отдать клиенту логотип для сайта, но без единого изменённого пикселя.

• Логотип загружается в исходном разрешении.
• Выбирается режим «Оригинал», уменьшение не задаётся.
• Результат сравнивается с исходником попиксельно.

Результат: файл легче PNG примерно на четверть при полной идентичности, брендбук не нарушен.

Подготовка карточек товара

Контекст: продавец на маркетплейсе готовит инфографику для карточек и упирается в лимит веса файла.

• Задаётся лимит «не больше 500 КБ» на каждое изображение.
• Бинарный поиск подбирает максимальное качество, которое влезает в лимит.
• Перед выгрузкой кадры при необходимости приводятся к нужным пропорциям через обрезку изображений.

Результат: все файлы проходят модерацию с первого раза, повторная загрузка не требуется.

Иконки для веб-приложения

Контекст: фронтендер собирает набор иконок интерфейса и хочет минимальный вес бандла.

• Весь набор конвертируется в режиме «Оригинал» одним пакетом.
• Для значка вкладки отдельно используется создание значка сайта.
• Спорные случаи проверяются в режиме «Высокое» и сравниваются визуально.

Результат: вес графической части бандла сокращается примерно на треть без единого артефакта.

WebP в российских проектах

В Рунете у формата есть своя специфика, о которой редко пишут. Wildberries принимает JPG, PNG и WebP, и с мая 2024 года всё загруженное всё равно перекодируется площадкой в WebP для витрины. Отсюда практический вывод: загружать на маркетплейс уже сжатый лоссовый WebP смысла мало, потому что произойдёт двойное лоссовое кодирование. Разумнее отдавать площадке качественный исходник, а WebP приберечь для собственного сайта, лендинга или рассылки в Telegram.

Обе крупные площадки требуют цветовое пространство sRGB, и здесь автоматическое приведение к sRGB играет в плюс: файл с экзотическим профилем не вызовет расхождения цвета при модерации. Со стороны сайтов ситуация неоднородная. Свежие сборки 1С-Битрикс и WordPress работают с WebP штатно, а вот старые версии Битрикса нередко отказываются принимать такой файл через админку, и вопрос решается либо обновлением, либо модулем конвертации из маркетплейса. На Тильде и других конструкторах загрузка WebP обычно проходит без нареканий.

Если на изображениях есть персональные данные, скриншоты личных кабинетов или документы, помните про 152-ФЗ. Локальная обработка удобна тем, что кадры не проходят через сторонний сервер, но обязанностей оператора она не отменяет. Для мультиформатных задач в наборе есть универсальный конвертер изображений, а для анимации подойдёт преобразование анимации.

Ограничения, которые стоит назвать прямо

Инструмент не решает всё, и об этом честнее сказать заранее. Режим «Оригинал» действительно без потерь и именно поэтому самый крупный из четырёх: 69 КБ против 48 КБ у «Высокого» на тестовом файле. Лоссовые режимы остаются лоссовыми, «Высокое» визуально очень близко к оригиналу, но не идентично ему.

Анимация в APNG не переносится: берётся первый кадр, и результат об этом сообщает. Ни EXIF, ни ICC-профиль в WebP не переезжают, файл приводится к sRGB. Точный пиксельный маршрут требует WebGL2, без него конвертер работает через обычный канвас, просто lossless-файл получится крупнее. Для более современного сжатия стоит посмотреть на преобразование в более новый формат сжатия, который выигрывает у WebP по степени сжатия, хотя и поддерживается пока хуже.

Часто задаваемые вопросы