Конвертер PNG в WebP онлайн

Как перевести PNG в WebP

Откройте PNG, решите: обычное качество (lossy) или галочка lossless. Lossy обычно легче для фотоподобных PNG; lossless ближе к «тому же растру», что и исходник, и часто выигрывает у неоптимизированного PNG на графике с плоскими цветами.

Прозрачность сохраняется

В отличие от JPEG, WebP умеет alpha. Мягкие края и тени логотипа должны пережить конвертацию. Всё равно проверьте на тёмном и светлом фоне: слишком агрессивный lossy может «погрызть» полупрозрачность.

Lossy или lossless

Lossless WebP имеет смысл для иконок, схем, скриншотов с текстом. Lossy — для PNG, которые на самом деле фото. Не включайте lossless «на всякий случай» для 12-мегапиксельного снимка: файл может не уменьшиться.

Ползунок качества скрывается в lossless-режиме: пиксели фиксируются, а не квантуются.

UI, логотипы, баннеры

Это основной интент страницы. Современные браузеры показывают WebP в <img> без ухищрений. Для очень старых корпоративных IE-контуров держите PNG fallback.

Скриншоты

Скрин интерфейса в PNG часто весит мегабайты из-за шума сжатия дисплея. Lossy WebP 75–85% обычно достаточен для базы знаний. Если важна читаемость мелкого шрифта — lossless или аккуратный PNG.

Когда PNG всё ещё лучше

• Целевой редактор не открывает WebP.
• Нужен максимальный «общий» файл для людей вне веба.
• Вы уже прогнали PNG через oxipng/zopfli и он легче lossy WebP без видимых потерь.

Обратный путь: WebP → PNG.

Как выбрать lossy или lossless на реальном файле

Сделайте два прогона одного логотипа: lossless и lossy 80%. Если на 200% зуме края совпадают, берите более лёгкий. Если lossy «сыпет» по контуру буквы — lossless. Для фото-PNG (портрет, сохранённый почему-то в PNG) lossless почти никогда не нужен.

Не сравнивайте с первым попавшимся онлайн-бенчмарком. Ваш шум дисплея, антиалиасинг и палитра решают больше, чем чужой процент «−70%».

Выкладка WebP с прозрачностью

В CSS-фоне и <img> современные браузеры показывают WebP с alpha без canvas-хаков. Проблемы начинаются в старых редакторах рассылок и в десктопных «просмотрщиках фото», которые WebP не знают. Для команды дизайна держите PNG-мастер.

Имена файлов: лучше photo.webp рядом с photo.png, чем случайный хеш без смысла. CDN-кэш проще инвалидировать, когда пара предсказуема.

Обратно в редактор: WebP → PNG. В JPEG, если alpha больше не нужна: PNG → JPG с тем же фоном, что у макета.

Типичные ошибки при PNG → WebP

Включать lossless на 12-мегапиксельном фото «для качества» и получать файл не легче PNG. Жать lossy 40% на иконке с текстом. Забывать PNG-мастер. Класть WebP в рассылку Outlook. Сравнивать вес с уже оптимизированным oxipng и делать вывод, что «WebP бесполезен» — на неоптимизированном PNG картина другая.

Правило: фотоподобные PNG — lossy; плоская графика и текст — lossless или аккуратный PNG. Сайт проверяйте в том браузере, которым пользуется аудитория, не только в последнем Chrome.

После выкладки посмотрите LCP на мобильном: лёгкий WebP не поможет, если вы отдаёте 3000px в слот 400px. Ресайз в расширенных настройках конвертера как раз для этого. Мастер PNG храните вне public-папки.

Зачем переводить PNG в WebP, а не «просто сжать PNG»

Неоптимизированный PNG с прозрачностью — частый виновник тяжёлой шапки сайта: логотип 1800px, мягкая тень, экспорт «для Retina». oxipng и zopfli умеют похудеть lossless, но на фотоподобных PNG и на шуме дисплея потолок низкий. WebP даёт два режима: lossless для плоской графики и lossy для картинок, которые только притворяются PNG.

Это не страница «JPG в WebP». Исходник здесь умеет alpha, резкие края и плоские заливки. Ошибка — включить те же 75%, что вы ставите на фото из камеры. На букве логотипа 75% lossy часто видно.

Анимацию WebP эта страница не собирает. Один кадр — да. Если нужен sequence или GIF-логика, это другой пайплайн.

Как выбрать режим на конкретном файле, а не «по статье»

Сделайте два прогона одного ассета. Lossless: смотрите вес относительно исходного PNG. Lossy 80%: смотрите край буквы на 200% зуме и полупрозрачную тень на шахматке. Если края совпадают — берите более лёгкий. Если lossy сыпет по контуру — lossless или поднимите quality.

Фото, случайно сохранённое в PNG (портрет, каталог, коллаж без дырок) почти никогда не нуждается в lossless: вы получите файл не легче исходника. Иконка 32–128px с 4–8 цветами часто выигрывает в lossless и проигрывает в грубом lossy.

Галочка lossless прячет ползунок: пиксели фиксируются, квантования нет. Не включайте её «для качества» на 12-мегапиксельном снимке — это не магический апскейл, а другой энкодер.

Логотип, фавикон-производные и UI-кит

Для логотипа в шапке держите SVG, если он есть. Растровый PNG → WebP имеет смысл, когда логотип уже растр (сложная тень, фото-буква, акварель). Тогда lossless или высокий lossy, проверка на светлом и тёмном фоне.

Набор иконок: не кодируйте 200 штук по 32px в AVIF «потому что модно». WebP lossless или один спрайт/SVG закрывают задачу спокойнее. Баннер 1600px с мягкой прозрачностью — как раз территория этой страницы.

Цветовой профиль: браузерный конвейер не обещает сохранить экзотический ICC. Для веба sRGB-ожидание нормально. Для препресса WebP всё равно не закроет CMYK TIFF.

Скриншоты инструкций и интерфейса

PNG-скрин из Windows часто весит мегабайты из-за шума сжатия дисплея и антиалиасинга шрифтов. Для внутренней wiki lossy 78–85% обычно читаем. Если в кадре 9pt подписи к полям формы — сравнивайте lossless: каша на кегле дороже килобайта.

Серия однотипных скринов: зафиксируйте ширину (например, 1280) и один режим. Иначе в статье одни кадры мыльные, другие тяжёлые. Пакет и ZIP как раз для такой папки.

Не кладите WebP-скрины в письмо Outlook «как вложение для печати». Для рассылки чаще нужен PNG или JPEG. WebP — для страницы, которую откроют в браузере.

Как вставлять результат на сайт

Современный <img src="logo.webp"> показывает alpha без canvas. В CSS background-image то же самое. Проблемы начинаются в конструкторах писем и в десктопных просмотрщиках, которые ждут JPEG/PNG.

Если аудитория смешанная, держите PNG рядом и собирайте picture: WebP первым source, PNG запасным. Не удаляйте PNG-мастер из репозитория дизайна: через месяц поправите букву там, а не в декодированном WebP.

Retina не значит «экспортируйте 4x и молитесь»

Слот 200 CSS-пикселей на дисплее 2x просит ~400px растра, не 2000. Лишние пиксели после WebP всё равно едут по сети. В расширенных настройках задайте ширину под реальный display size, затем выбирайте режим.

srcset: лучше два осмысленных файла (1x/2x), чем один гигант. Имена mark.webp и mark@2x.webp понятнее случайного хеша. CDN проще инвалидировать парой, чем сотней уникальных имён без правила.

Где WebP всё ещё отказывают

Старые корпоративные IE-контуры, часть редакторов рассылок, некоторые версии настольных «просмотрщиков фото», модули загрузки с жёстким белым списком. Перед тем как объявить «весь сайт на WebP», проверьте CMS, CDN и почтовые шаблоны отдельно: это три разных клиента.

Если система принимает только PNG, не конвертируйте «на всякий случай». Оставьте PNG. Эта страница — для браузерной витрины и современных CMS, не для тендерного портала 2014 года.

Мастер, delivery и кэш

Правило папок: masters/*.png, delivery/*.webp. Не перезаписывайте мастер тем же именем WebP в одной директории: через полгода никто не вспомнит, что можно править. После выкладки смотрите LCP на мобильном: лёгкий формат не спасает, если в слот 360px отдаётся 3000px.

Пакет до нескольких десятков файлов, прогресс в кнопке, общий ZIP. Имена сохраняются, расширение становится .webp. EXIF/GPS не переносятся — для публичного сайта это обычно желательно.

Чеклист PNG → WebP

• Режим выбран по типу кадра, не «как в прошлый раз на фото».
• Края alpha проверены на тёмном и светлом фоне.
• Сторона соответствует слоту (или есть srcset).
• PNG-мастер не удалён.
• Есть план для почты и старых просмотрщиков.
• Вес адекватен квоте страницы.

Обратно в редактор: WebP → PNG. Без прозрачности для формы: PNG → JPG. Хаб: конвертер PNG.

WordPress, сборщики и CDN

Современный WordPress WebP принимает. Старые плагины оптимизации могут перекодировать ещё раз — тогда вы получите двойное сжатие. Либо отключите повторный encode, либо отдайте в CMS PNG-мастер и пусть плагин сам соберёт WebP, не делайте оба шага вслепую.

Сборщики вроде типичного <img> без picture работают, если аудитория без древнего IE. CDN с content negotiation может отдавать WebP по Accept: тогда имя без расширения в URL важнее, чем ручная пара файлов. Если CDN так не умеет — кладите .webp явно.

Не загружайте WebP в конструктор писем «потому что сайт так делает». Письмо — отдельный клиент.

Один логотип не всегда живёт на всех фонах

Тёмный знак на прозрачности, выложенный на тёмную шапку, пропадает. Это не баг WebP, это контраст. Проверяйте delivery на реальных фонах темы, не только на шахматке редактора. Иногда нужны две версии, а не один «универсальный» файл.

Мягкая белая обводка, запечённая в PNG, после lossy WebP может дать серый ореол. Для такого знака — lossless или правка мастера.

Пачка однотипных PNG

Кнопки, бейджи, флаги стран: один режим на всю папку, одна максимальная сторона. Смешивать lossless для части файлов и lossy 40% для соседних — получите визуально разный набор. ZIP после пакетной конвертации как раз для выкладки кита.

Анимацию и «живой» спрайт эта страница не собирает. Статичный кадр — да.

Сравнивайте с тем PNG, который реально лежит в проде

Если прод уже прогнан через oxipng, выигрыш WebP будет скромнее, чем против «сырого» экспорта из Figma. Не делайте вывод «WebP бесполезен» по одному оптимизированному файлу и наоборот не обещайте −70% по одному тяжёлому экспорту. Смотрите факт в блоке результата.

Экспорт из макета и то, что уже в проде

Figma часто отдаёт PNG с лишним полем и 2x/3x «на всякий случай». Сначала обрежьте пустое поле и поставьте сторону под слот, потом WebP. Иначе вы сожмёте воздух. Прод, который уже год лежит оптимизированным PNG, сравнивайте отдельно: там выигрыш скромнее, и это не аргумент против WebP на новых экспортах.

Короткий итог PNG → WebP

Основной путь облегчить графику с прозрачностью для сайта. Lossy для фотоподобных PNG, lossless для текста и иконок. PNG-мастер храните. Outlook и старые просмотрщики могут не открыть WebP — для них оставьте PNG. Ресайз под слот важнее, чем бесконечный крутёж quality.