Для кого: дизайнеры, ответственные за поставку ассетов и инженеры пайплайна, которым прилетает WebP от подрядчиков или автоматики, а контракт снизу требует PNG — CMS, пресса «рядом с вебом», легаси-клиенты. Задача страницы: не «нажать экспорт», а зафиксировать матрицу решений 2026: когда транскод уместен, что невозможно восстановить из lossy WebP, как защитить альфу, как закрепить sRGB и как на удалённом Mac mini M4 проверять пороги байтов так, чтобы QA было воспроизводимым, а не одним скриншотом в мессенджере.
Содержание
Почему WebP→PNG — это политика, а не кнопка
- Lossy WebP необратим. Декод сохраняет геометрию, но не возвращает отброшенные детали; часто виноватим объявляют PNG, хотя источник уже был «восковым».
- Семантика альфы. Прямая против премультиплицированной ломает мягкие кромки; тихое схлопывание в RGB убирает прозрачность без записи в журнале.
- ICC «гуляет». Без строки в README Safari, Chrome и Figma на широком охвате дают разные ответы — особенно если мастер не sRGB.
- Объём требует гейтов. Лимиты
stat, манифест с sha256 и версиямиdwebp/magickудобнее гонять на выделенном удалённом Mac, чем на ноутбуке с сном и плавающими термиками.
Общую стратегию WebP/AVIF/PNG сверяйте с чеклистом смешанной доставки WebP, AVIF и PNG; эта статья — узкий съезд с WebP на PNG по контракту.
Матрица: остаться в WebP, декодировать lossless PNG или ужать с потерями
| Сигнал в исходном WebP | Предпочтительная поставка | Риск при «любом PNG» |
|---|---|---|
| Lossless WebP с альфой | Декод в PNG32; политика ICC как у статичных мастеров | Низкий по цвету — вырастут байты; планируйте хранение, а не «магию» профиля |
| Lossy WebP, фототекстура | Переэкспорт из PSD/AF/TIFF; WebP только как превью | Высокий — PNG не вернёт отсутствующие ВЧ-детали ни одним флагом |
| Lossy WebP, плоский UI с альфой | Декод → при провале max_bytes узкий коридор pngquant |
Средний — полосы на градиентах; коридор качества должен быть в ТЗ |
| Анимация внутри WebP | Отдельная политика WebP/APNG/GIF; один кадр PNG ≠ контракт на движение | Высокий — смешение SKU «статика» и «моушн» |
Правила sRGB и Display P3 согласуйте с чеклистом sRGB и Display P3. Декод сам по себе не «назначает честный ICC»; после промоушена в PNG не дублируйте полоску метаданных — см. гайд по ICC и lossless-пересжатию PNG.
Зафиксированные шаги: декод, цвет, откат с потерями
На воркере закрепите версии из Homebrew; в manifest.json пишите вывод dwebp -version и блок magick -version на каждую партию.
1) Lossless-декод (libwebp)
dwebp -mt input.webp -o decoded.pngПо умолчанию — PNG с сохранением альфы. Флаг -alpha_dither включайте только если осознанно сглаживаете квантованную альфу и принимаете шум по прозрачности. Для отладки каналов удобен -pam.
2) ImageMagick 7: явный тип и sRGB
magick input.webp -colorspace sRGB PNG32:handoff.pngPNG32 — RGBA; PNG24 только если альфа доказано отсутствует (проверка через identify).
3) FFmpeg для нестандартных контейнеров (один кадр)
ffmpeg -y -i input.webp -frames:v 1 -c:v png -pix_fmt rgba frame.pngДля последовательностей и FPS используйте отдельный конвейер, не смешивайте с ручной сдачей «одного кадра».
4) Откат с потерями внутри записанного коридора
pngquant --quality=70-85 --speed 1 --skip-if-larger -f -o handoff-q.png handoff.png--skip-if-larger защищает от регресса по байтам; ветку фиксируйте в JSONL рядом с именем файла.
5) Инспекция перед выдачей в out/
magick identify -verbose handoff.png | egrep 'Geometry|Colorspace|Type|Properties:.*icc'Падение сборки: обещали мягкую альфу, а получили палитру без промежуточных уровней; в README сказано «без ICC», а в файле неожиданный встроенный профиль.
cwebp -lossless для UI-хрома.
Чеклист приёмки объёма на удалённом Mac M4
- Геометрия: декодированные WxH = спецификация ±0 px; даунскейл только если это явно разрешено брифом и залогирован масштаб.
- Потолки байтов (ориентир при длинной стороне ≤1600 px):
≤ 350 KB«стройный» UI,≤ 800 KBстандарт карточки,≤ 1.6 MBгерой — подстройте под CDN и зафиксируйте в README партии. - Композит альфы: наложение на
#FFFFFFи тёмный фон вроде#0B0D12в целевом браузере; ореол по кромке — fail. - sRGB: либо встроенный
sRGB IEC61966-2.1, либо осознанное удаление профиля с одной строкой в README («ожидаем дисплейный sRGB») — без третьего варианта «как получится». - Манифест: sha256 до/после, версии
dwebp/magick/pngquant, pass/fail — в одном формате с остальными PNG QA на узле.
Пороги и параметры, которые можно вставить в ТЗ
- Коридор pngquant: старт
70–85; для портретной графики при полосах сузить до75–90. - Контроль источника WebP: для хрома UI —
cwebp -lossless; первый lossy-пресет для согласований —cwebp -q 85 -alpha_q 100. - Гейт по размеру (macOS
stat):test "$(stat -f%z handoff.png)" -le 800000для потолка 800 KB — замените число на SKU.
Короткий FAQ
PNG раздулся после lossless WebP. На шумных фото WebP часто эффективнее — заложите хранение или разрешите согласованный pngquant.
Неон на одном мониторе. Превью вне тега и контракта sRGB; выровняйте просмотрщик и встроенный профиль.
Итог: матрица «источник → допустимый PNG» снимает споры, если рядом лежат альфа, sRGB, max_bytes и журнал версий на удалённом M4. Откройте macpng.com, раздел аренды и покупки, страницу тарифов и узлов и помощь по SSH и VNC — сравнить планы можно без входа в аккаунт. Другие материалы — в разделе Технические идеи.
Вынесите WebP→PNG на стабильный воркер
Одинаковые флаги декодирования, правила ICC и проверки max_bytes по каталогам, пока дизайнер остаётся в Figma локально.