Кампании уходят в прод десятками файлов PNG, которые должны пережить спецификации социальных сетей, неожиданные кропы в рекламных кабинетах и загрузку в CMS, которой вы не управляете. Здесь — матрица сравнения решений и чеклист приёмки для дизайнеров и операционного маркетинга: где заканчивается безопасная зона, когда вылет (bleed) покупает запас по краю, как организовать PNG пакетный экспорт на удалённом Mac класса M4 и как выборочно проверять качество без ручного просмотра каждого кадра в мессенджере.
На этой странице
Сводка: что оптимизировать в первую очередь
| Если в брифе сказано… | Предпочесть | Риск |
|---|---|---|
| «Заголовок нельзя обрезать ни на одном телефоне» | Верстать внутри безопасной зоны; отдавать ровно опубликованный WxH; вылет — только для моста к печати, не путать с соцшаблоном другой сети | Переносить safe-гайды из Stories в шапку LinkedIn без перерисовки — разные маски |
| «Один мастер — все сети сегодня ночью» | Один широкий мастер (например 2560 px) и скрипт центральной обрезки по таблице спецификаций социальных сетей | Расстояние логотипа до края: проверять после каждого кропа, а не только на мастере |
| «Резкий текст на X и десктопном LinkedIn» | Целочисленный масштаб экспорта (@2x от зафиксированной сетки @1x) для типографики и мелких UI-маркеров | Нецелочисленный масштаб размывает мелкий кегль; фото терпит другие пайплайны даунскейла |
Общую политику цвета сверяйте с чеклистом sRGB и Display P3 для PNG на Mac. Если в цепочке остался печатный CMYK, нормализуйте через матрицу CMYK TIFF → sRGB PNG до пакетных кропов под соцсети.
Таблица порогов размеров по площадкам
Маски и соотношения сторон меняются; цифры ниже — рабочие ориентиры 2026, их стоит перепроверять в собственных инструментах каждой площадки ежеквартально. «Безопасно» здесь значит «держать копирайт и логотипы внутри этого inset от финального WxH», а не юридическую гарантию по правилам рекламы.
| Поверхность | Типичный PNG WxH | Привычка по безопасной зоне | Заметка про вылет |
|---|---|---|---|
| Шапка X (Twitter) | 1500 × 500 | Критичный контент к центру; на десктопе аватар перекрывает низ слева | Опционально +8–16 px «воздуха» по краю, если боитесь агрессивного зума на ультрашироких |
| Баннер профиля LinkedIn | 1584 × 396 | Резервировать левую треть под наложение аватара в мобильном превью | Вылет редко нужен важнее точного попадания в spec WxH |
| Баннер компании LinkedIn | 1128 × 191 | Сверхширокий кроп — одна строка заголовка | Проверить локап с логотипом у правого края |
| Обложка Facebook (лента) | 820 × 312 (частый десктопный кроп) | На мобильных режется высота; лица и CTA — к вертикальному центру | Иногда отдают 820 × 360 с «мёртвой» зоной сверху/снизу — только если это записано в ТЗ |
| Instagram Story / обложка Reels | 1080 × 1920 | Текст внутри ~90% центральной ширины; учитывать UI-хром сверху/снизу | Вертикальный вылет для градиентов часто уместен; юридический блок — в вертикальной безопасной полосе |
| Оформление канала YouTube | 2560 × 1440 мастер → при необходимости внутренний TV-safe кроп | Проектировать под «минимальный безопасный» прямоугольник на десктопе; отдельные кропы под узкие safe-зоны по запросу ops | Широкий мастер и есть вылет; реальные SKU — производные кропы |
Командам с автоматизацией имеет смысл дублировать таблицу в YAML рядом с воркером, чтобы PNG пакетный экспорт «падал закрытым», если маркетинг подставит нестандартную высоту.
Цвет и каналы прозрачности
Социальные PNG почти всегда sRGB, 8 бит на канал. Выберите один контракт на всю кампанию и не смешивайте его внутри одной папки out/:
- Только RGB (без альфы): эквивалент PNG24, когда фон сплошной. Меньше байтов и меньше сюрпризов в старых CMS.
- RGBA с мягкими краями: PNG32; по умолчанию прямая альфа, премультипликация — только если так явно требует motion- или игровой пайплайн (для статики соцсетей редко).
- Широкий охват: Display P3 в PNG для «обычных» соцсетей избегать, если брендбук не требует иного — мобильные превью непоследовательно уважают встроенные профили.
Шаги проверки sRGB (воспроизводимые на удалённом Mac):
- Выполнить
magick identify -verbose ./out/channel.pngи подтвердитьColorspace: sRGB(или эквивалент по вашему README) и согласованное состояние ICC: встроить или снять. - Сравнить полоску нейтралей (например
#F5F5F5и#E6E6E6) в Safari и Chrome при 100% масштабе — несовпадение дисплейных профилей всплывает здесь первым. - Для RGBA скомпоновать поверх
#FFFFFFи#0B0D12; отклонять цветные ореолы, если в креативном ТЗ указаны «чистые вырубки».
Для кромок и больших партий дополняйте материалом FAQ: пакетная прозрачность PNG на удалённом Mac M4 — он не дублирует тему сеточных слайсов или авто-лейаутов, а закрывает именно альфу и артефакты композита.
Пакетное именование и структура папок
Удобная для ops сдача разделяет «как кампания называется в маркетинге» и «что реально пишет энкодер». Паттерн, который переживает PNG пакетный экспорт на два десятка файлов:
campaigns/2026-Q2-brandrefresh/
masters/BANNER_MASTER_2560x1440_sRGB.png
out/
li-personal/BR-2026Q2_linkedin-personal_1584x396_v3.png
x-header/BR-2026Q2_x-header_1500x500_v3.png
ig-story/BR-2026Q2_ig-story_1080x1920_v3.png
- Слаг + канал + WxH + версия снимают коллизии
final_finalи делают grep-based QA тривиальным на удалённом Mac. - Каталог
masters/после согласования сделать только для чтения; скрипты пишут только вout/. - В
README.txtна одной странице перечислить лимиты размера файла по сетям, если платная медиа отличается от органики.
Параметры батча на удалённом M4
Apple Silicon хорошо тянет параллельные проходы ImageMagick или sips — чаще упираетесь в диск и термики, а не в CPU. Практичные значения по умолчанию:
- Параллелизм:
min(4, performance_cores)одновременных ресайзов для мастеров класса 4K; повышать только если NVMe не насыщен. - Ресэмплер:
-filter Lanczosдля фото-баннеров;-filter Mitchell, если доминирует мелкий векторный текст — один выбор на кампанию и строка в журнале. - Масштабы экспорта: от зафиксированной сетки @1x экспортировать @2x удвоением целых пикселей (например 1500×500 → 3000×1000) только если площадка принимает завышенные исходники; иначе отдавать нативный WxH и закладывать «векторо-дружественный» кегль в мастер.
- Допуск обрезки: для автоматического центрального кропа по фону без логотипа допустить ±1 px при нечётной ширине мастера; для локапов логотипа и юридического текста держать ±0 px. В README перечислить, какие SKU на каком допуске.
Пример центральной обрезки до точного spec (пути подставьте свои):
magick ./masters/BANNER_MASTER.png -colorspace sRGB \
-gravity Center -extent 1500x500 PNG24:./out/x-header/campaign_x-header_1500x500_v1.png
Если позже тот же каталог подключат к HTTP-хукам или шлюзу, сохраняйте контракт out/ и поля манифеста, которые команда уже использует для выгрузки в соцсети: математику макета оставляем дизайну, воркер гоняет байты, ICC и WxH.
Выборочная приёмка
Полный пиксельный разбор каждого SKU не масштабируется; масштабируется выборка при явных правилах.
- 100% автоматические гейты: каждый файл проходит скрипт WxH, тип цвета (RGB vs RGBA) и при необходимости
max_bytes. - Матрица ручной выборки: для партий до пятидесяти файлов — минимум один файл на семейство каналов плюс один случайный SKU. Выше пятидесяти — стратификация: не меньше одного на десять файлов, обязательно самое узкое соотношение (компания LinkedIn) и самое высокое (Story).
- Проверка безопасной зоны: наложить официальную маску шаблона в Preview или расширении браузера; отклонять, если заголовок или CTA касается линии маски.
- Регресс при смене только текста: по возможности сравнивать перцептивные хеши арт-слоёв; без разделения слоёв — визуальный diff в инструментах класса Kaleidoscope.
- Журнал согласования: дописывать ревьюера, время и хеш папки или коммита в
QA.jsonlна воркере.
FAQ
Загружать ли везде PNG @2x? Только если продукт принимает более крупные исходники и даунскейлит предсказуемо; иначе растут вес загрузки и риск перешарпа — сверяйтесь с актуальными гайдами каждой сети.
JPEG меньше — зачем PNG? Когда в макете смешаны плоские зоны, чёткий текст и прозрачность, PNG часто переживает повторное сжатие внутри рекламных инструментов лучше, чем цепочка «JPEG → JPEG». Выбор между байтами и качеством кромки — продуктовый.
Кто владеет дрейфом спецификаций? Маркетинг-ops календарит квартальное обновление таблицы; инженерия держит YAML-пороги на хосте удалённого Mac для батча.
Дальнейшие шаги: MacPng и удалённый M4
Откройте MacPng, раздел аренды и покупки, страницу тарифов и узлов и помощь по SSH и VNC — сравнить планы и открыть справку можно без входа в аккаунт. Другие матрицы и чеклисты — в разделе Технические идеи.
Гоните баннеры на стабильном воркере
Единые шаблоны безопасной зоны, политика sRGB и допуски обрезки не «плывут», пока дизайнеры итерируют локально.