Зачем разбирать WebP в PNG
Figma, Photoshop старых сборок, типографии и внутренние ТЗ часто требуют PNG. WebP удобен в браузере, но не везде является «родным» файлом дизайнера.
Как это сделать
Загрузите WebP — ползунок качества скрыт, потому что PNG lossless. Опционально уменьшите сторону. Скачайте PNG. Несколько файлов — одним ZIP.
Что происходит с пикселями
Декодер WebP отдаёт растр. Если исходник был lossy, артефакты уже внутри. PNG честно сохранит этот растр, но не вернёт «идеальный» кадр до WebP-сжатия. Lossless WebP → PNG ближе к копии пиксель-в-пиксель.
Alpha остаётся
Прозрачность, если она была в WebP, должна перейти в PNG. Проверьте края на шахматке в редакторе: премультиплицированная alpha иногда выглядит иначе в разных программах.
Файл почти наверняка потяжелеет
Это плата за универсальный lossless-контейнер. Не используйте операцию, чтобы «улучшить» вес сайта — для веба WebP как раз легче. PNG нужен людям и программам, не браузерному CDN.
Редакторы и дизайн
После PNG можно ретушировать и снова выгрузить в WebP/AVIF через соседние страницы. Не пересохраняйте туда-сюда много раз, если исходник lossy: копите правки на одной ветке.
Дизайн-инструменты и препресс
Часть сборок Figma, старый Photoshop, Corel и RIP типографий ждут PNG или TIFF. WebP они могут показать в браузере превью и отказать в слоях. PNG с этой страницы — рабочая копия, не финальный веб-ассет.
Проверьте премультипликацию alpha: в одном редакторе край мягкий, в другом — тёмная обводка. Это не всегда вина конвертера; разные программы по-разному рисуют полупрозрачность.
Обратный путь на сайт
После правок не кладите этот PNG в продакшен «как есть», если исходный WebP был лёгким фото. Соберите снова WebP/AVIF. Цепочка: WebP delivery → PNG для правки → новый delivery. Мастер, если он есть, важнее обоих.
Смежно: WebP → JPG без alpha, PNG → WebP после ретуши.
Практические прогоны WebP → PNG
Дизайнер просит PNG для макета: конвертируйте, отдайте, не публикуйте этот PNG на сайт. Препресс просит файл без WebP: уточните, нужен ли CMYK; этот PNG скорее sRGB. Разработчик вставляет в старый движок без WebP: иногда проще обновить движок, чем раздавать мегабайтные PNG.
На выходе проверьте прозрачность на шахматке. Если край «грязный», это может быть наследие lossy WebP, а не ошибка PNG. Тогда правьте осторожно или ищите мастер. Пакет удобен, когда папка целиком в .webp, а подрядчик ждёт .png.
После ретуши соберите delivery заново. Не кладите ретушированный PNG в ту же папку CDN под старым именем WebP — кэш и расширения разъедутся. Ведите понятные суффиксы: -master.png, -delivery.webp.
Для печати уточните, нужен ли TIFF/CMYK. sRGB PNG с веба часто принимают только как превью согласования, не как спуск полос. Не обещайте подрядчику «типографское качество» после браузерного декода WebP.
PNG здесь — рабочая копия, не замена лёгкому WebP
Дизайнер, типография, внутреннее ТЗ, старый плагин — типичные заказчики PNG. Браузерный CDN как раз любит WebP. Если вы конвертируете, чтобы «улучшить сайт», вы идёте не туда: вес вырастет. Если конвертируете, чтобы файл открылся в редакторе слоёв — вы на месте.
Ползунка качества нет: PNG lossless. Можно только уменьшить сторону. Не ждите, что огромный WebP станет «лёгким PNG». Станет тяжёлым PNG с теми пикселями, которые декодер уже отдал.
Lossless не возвращает кадр до сжатия
Если исходный WebP был lossy, артефакты уже внутри растра. PNG честно их упакует. Это полезно для ретуши «как есть» и бесполезно как обещание студийного качества. Lossless WebP → PNG ближе к копии пиксель-в-пиксель.
Сильный шарп после такого PNG вылезет кольцами вокруг контуров. Лучше искать мастер. Если мастера нет, правьте умеренно.
Прозрачность: проверьте шахматку, не только превью ОС
Alpha, если она была, должна перейти. Разные программы по-разному рисуют премультиплицированный край: в одном редакторе мягко, в другом тёмная обводка. Это не всегда вина конвертера. Откройте файл там, где будете работать, на шахматке, на чёрном и на белом.
Если край «грязный», виноват lossy WebP, а не PNG. Тогда либо осторожная маска, либо поиск исходника.
Инструменты, которые ждут PNG
Часть сборок Figma, старый Photoshop, Corel, RIP, модули «вставить картинку в чертёж». Они могут показать WebP в браузерном превью и отказать в слоях. PNG с этой страницы — вход в такой софт.
Препресс: уточните, нужен ли TIFF/CMYK. sRGB PNG с веба часто принимают только как превью согласования. Не обещайте спуск полос после браузерного декода.
Рост размера закладывайте в ожидание
WebP для фото эффективен. PNG для того же растра — нет. Кратность роста 2–6 раз не ошибка. Не публикуйте этот PNG в каталог сайта вместо WebP: вы отдадите трафик без выигрыша в картинке.
Если PNG нужен только чтобы «вложить в письмо дизайнеру», ресайз до 2000px длинной стороны обычно достаточен для макета. Полный 6000px отдавайте, когда просят печать или кроп.
После правок снова соберите delivery
Цепочка: WebP с витрины → PNG для правки → новый WebP/AVIF. Не кладите ретушированный PNG в ту же папку CDN под старым именем .webp. Кэш и расширения разъедутся. Суффиксы: -work.png, -delivery.webp.
Не крутите lossy туда-сюда каждую правку. Копите изменения на PNG-ветке, затем один encode в delivery.
Папка от подрядчика целиком в .webp
ZIP с PNG удобен, когда студия отдала только WebP, а ваш редактор их не видит. Имена сохраняются. После распаковки сверьте пары в проводнике. Не удаляйте исходные WebP, пока не убедитесь, что PNG открылись в целевой программе.
Чеклист WebP → PNG
- Цель — редактор/ТЗ, не облегчение сайта.
- Шахматка alpha проверена в том софте, где будете работать.
- Сторона не больше задачи (макет vs печать).
- После ретуши запланирован новый delivery, не вечный PNG на CDN.
Без alpha для почты: WebP → JPG. Снова на сайт: PNG → WebP.
Когда в договоре написано «отдайте PNG»
Подрядчик может не знать WebP и не обязан его знать. PNG — язык ТЗ. Отдайте рабочую копию, приложите исходный WebP «на всякий случай», если место позволяет. Не спорьте форматом, если дедлайн завтра, а спор про байты не стоит часа переписки.
Если ТЗ на самом деле про печать, уточните TIFF и цвет. Этот PNG закроет «открылось в Photoshop», не CMYK-спуск.
Почему в одном редакторе край чистый, в другом грязный
Премультипликация alpha, цветовое пространство превью, «матовое» vs «прямое» отображение прозрачности. Прежде чем винить конвертер, откройте тот же PNG в двух программах. Если грязь есть везде — это наследие lossy WebP.
Согласование на экране, не офсет
Дизайнер согласовывает баннер на мониторе — PNG уместен. Типография считает краску — спросите профиль. sRGB с веба часто годится только как превью. Не пишите в письме «готово к печати», если подрядчик не подтвердил формат.
Не коммитьте мегабайтные PNG вместо WebP в прод-репозиторий
Work-копии раздувают git. Держите тяжёлые PNG вне фронтового репозитория или в LFS, а в сайт кладите delivery. Иначе каждый редизайн будет весить как фотоархив.
PNG как стол, на котором правят
Вырезать фон, поправить кривые, закрыть пятно — удобнее в PNG, чем уговаривать старый Photoshop открыть WebP. После серии правок не сохраняйте «ещё раз WebP» с низким quality на каждом шаге. Копите правки, один финальный encode в delivery.
Маски с мягким краем проверяйте сразу. Если край уже повреждён lossy WebP, маска будет плясать. Тогда честнее сказать заказчику, что нужен более ранний файл.
Скрин, который кто-то уже ужал в WebP
База знаний иногда хранит только WebP. Чтобы вставить кадр в Confluence старой сборки или в десктопный редактор справки, нужен PNG. Читаемость кегля важнее веса. Не уменьшайте сторону ниже ширины статьи.
Передача между студией, штатным дизайнером и вёрсткой
Студия отдаёт WebP, штат просит PNG, вёрстка снова хочет WebP. Без подписи ролей вы потеряете, кто мастер. В сопроводиловке: «webp — витрина, png — для правок, мастер — в extras». Эта страница делает средний файл, не отменяет договорённость.
6000px PNG не обязателен для макета 1440
Если правки — кроп и текст поверх, 2000–2500px длинной стороны обычно хватает. Полный размер отдавайте, когда просят печать, крупный кроп или запасы под ресайз. Иначе почта и мессенджер не прожуют вложение.
Как понять, что открыли тот же кадр
Сверьте ширину, высоту и сюжет, не только имя. Редко, но пачка в ZIP может перепутаться у человека при ручном переименовании. Превью «похоже» недостаточно, если в папке три почти одинаковых баннера с разным текстом на кнопке.
После приёмки в редакторе можно удалять work-PNG только если delivery уже пересобран и мастер жив. Удалять всё «чтобы место» — путь к единственной тяжёлой копии без понимания происхождения артефактов.
Плагины, которые «умеют WebP», и те, что умеют только на словах
Импорт в старый InDesign, часть плагинов Corel, внутренние DAM на белом списке png/tiff — на практике ждут PNG. Маркетинговая страница вендора «поддерживаем современные форматы» не равна вашему установленному билду. Один тестовый файл экономит день переписки.
Если тестовый PNG открылся, а альфа в DAM рисуется чёрным, это превью DAM, не обязательно битый файл. Скачайте обратно и откройте в Photoshop на шахматке. Только после этого пишите студии, что «конвертер сломал прозрачность».
Для передачи «на флешке в печать» уточните, не ждут ли TIFF. PNG с этой страницы — удобный универсальный растр для экрана и слоёв, не билет в офсет сам по себе. Подпишите флешку: work-png, не «финал».
Не используйте PNG из WebP как единственный архив агентства. Через год никто не вспомнит, что артефакты пришли из lossy-витрины. Рядом должен лежать либо мастер, либо хотя бы исходный WebP с пометкой delivery.
Короткий итог WebP → PNG
Рабочая копия для редактора и ТЗ, не замена лёгкому WebP на сайте. Alpha сохраняется. Вес вырастет. После правок снова соберите delivery. Для печати уточняйте цветовое пространство у подрядчика, не у этого конвертера.
Частые вопросы
Зачем PNG, если WebP легче?
Редакторы, типографии и ТЗ часто требуют PNG. Это не оптимизация сайта.
Почему нет ползунка качества?
PNG lossless: настраивается только размер стороны.
Восстановится ли картинка до сжатия WebP?
Нет, если исходник был lossy. PNG фиксирует текущий растр.
Прозрачность?
Сохраняется, если была в WebP.
Файл станет тяжелее?
Почти всегда. Это ожидаемо.
Локально?
Да.
Несколько WebP сразу?
Да, один ZIP.
Потом снова в WebP?
Можно, но не крутите lossy туда-сюда без мастер-копии.