Логотип для email‑подписи — как вставить, чтобы не сломался
Подпись в письме — маленькая, но заметная витрина бренда: её видит каждый получатель, часто по нескольку раз в переписке. И именно в почте логотип ломается чаще всего: то не отображается вовсе, то обрастает белым прямоугольником, то «весит» больше самого письма. Причина у всех этих бед одна — почта устроена не как браузер, и это самая капризная среда для картинок из всех. Поэтому готовить логотип для подписи нужно, исходя не из того, «как красивее», а из того, что почта вообще способна показать.
Почему в почте логотип ломается
Чтобы понять, что делать, надо сначала увидеть, почему ломается. Разные почтовые клиенты — Gmail, Outlook, Apple Mail, мобильные приложения — показывают письма по‑своему и сильно урезают возможности, и отсюда четыре типичных сбоя. Первый: SVG не отображается. Большинство клиентов, особенно на базе Outlook, не рендерят SVG, и получатель видит пустое место вместо знака. Второй: белый прямоугольник — если логотип на непрозрачном фоне, в тёмной теме почты вокруг него появляется белый блок. Третий: «битая» картинка — если логотип лежит по ссылке, которая недоступна, вместо него показывается значок сломанного изображения. И четвёртый: тяжёлый файл — крупный PNG утяжеляет каждое письмо (про вес — в статье как уменьшить вес PNG).
Коварство почты в том, что свою подпись автор видит идеальной — в своём клиенте, на своём экране, в своей теме. А получатели открывают её в десятке разных программ, и там всплывает то, чего автор не видел: в корпоративном Outlook исчез знак, у коллеги в тёмной теме вокруг него загорелся белый штамп, на телефоне картинка не догрузилась и повисла «сломанным» значком. Именно поэтому подпись нельзя оценивать «у себя»: то, что работает на одном экране, ничего не говорит о том, как её увидят остальные, — а видят её сотни людей.
Какой формат и размер выбрать
Каждый из этих сбоев прямо подсказывает решение. Раз SVG не отображается, формат берут растровый — PNG с прозрачным фоном: он открывается везде и не даёт белой подложки (если нужны эффекты или фото, можно JPG, но без прозрачности; разница — в статье PNG или JPG — что лучше). Раз тяжёлый файл вредит, размер держат небольшим: обычно высота 100‑200 пикселей достаточна, и картинку готовят под реальный размер отображения, а не гигантскую — тот же принцип, что в адаптивном логотипе, и заодно забота о весе. А чтобы знак оставался чётким на плотных экранах, PNG экспортируют в 2× от нужного размера и задают меньший размер уже в вёрстке подписи.
Самая частая ошибка — взять «правильный» векторный SVG и вставить его в подпись, ведь для сайта вектор действительно лучше. Но на вашем экране он покажется, а у половины получателей — нет, потому что их почтовый клиент его не понимает. Для почты логотип всегда экспортируют в PNG; SVG при этом держат как исходник, из которого делают PNG нужного размера. Здесь работает то же правило, что и везде: формат выбирают под среду, а не наоборот.
Прозрачный фон и тёмная тема
Отдельного внимания требует фон, потому что многие читают почту в тёмной теме, и это сразу две ловушки. Прозрачный фон обязателен — иначе вокруг знака появится белый прямоугольник (как его получить, в статье логотип с прозрачным фоном; а если готовой версии нет, фон убирают, как в статье как убрать фон с картинки). Но одного прозрачного фона мало: тёмный логотип на тёмном фоне почты попросту пропадёт, поэтому нужна светлая версия — принцип тот же, что в статье логотип для тёмной темы. Универсально безопасный вариант — знак с контрастной обводкой или на нейтральной подложке самой подписи, который читается и на светлом, и на тёмном.
Как вставить логотип в подпись
Когда файл готов, остаётся собственно вставка, и её делают по шагам. Сначала экспортируют PNG нужного размера с прозрачным фоном. Затем размещают картинку — либо загружают на надёжный хостинг и вставляют по абсолютной ссылке, либо добавляют через настройки почтового клиента. Дальше задают ссылку, чтобы логотип был кликабельным и вёл на сайт. Обязательно добавляют alt‑текст — на случай, если картинка не загрузится, получатель увидит хотя бы название бренда вместо «битого» значка. И в конце проверяют результат в разных клиентах: отправляют тест на Gmail, Outlook и мобильную почту, в светлой и тёмной теме, — потому что почта именно та среда, где «у меня работает» ничего не гарантирует.
Логотип, цвета и шрифт в подписи должны совпадать с остальным брендом — сайтом, визиткой, соцсетями, — потому что подпись видят чаще многого другого. Разнобой в мелочах здесь разрушает согласованность не меньше, чем разные версии знака на разных страницах сайта. Подпись — такая же точка контакта, как фавикон или аватарка, и относиться к ней стоит так же.
Короткий вывод
Логотип для email‑подписи ломается чаще всего потому, что почта — самая капризная среда для картинок: разные клиенты режут возможности, не показывают SVG и по‑разному ведут себя с фоном. Отсюда и все решения: знак берут в PNG с прозрачным фоном (не в SVG), небольшого размера и лёгким, делают его кликабельным и снабжают alt‑текстом. Обязательно продумывают тёмную тему и готовят светлую версию, а перед использованием тестируют подпись в разных почтовых клиентах. И держат её стиль единым с брендом — это часть согласованности.
Скачать логотип, сделать светлую версию и экспортировать PNG для подписи можно в каталоге Trace Logo's.