Email Ready: HTML-письмо из Figma или из картинки

Превратить макет в HTML-письмо сложнее, чем в веб-страницу, потому что почтовый ящик — не браузер. Email Ready — режим вывода MarkupGen, созданный именно для этой задачи, и он даёт два пути: сгенерировать HTML-код письма из макета Figma или создать письмо из изображения, нарезав макет и добавив кликабельные ссылки. В этой статье разобраны оба пути, когда какой выбирать и всё, что инструмент делает за вас.

Что такое Email Ready

У каждого проекта MarkupGen есть формат вывода. Responsive HTML — для сайтов и лендингов. Email Ready (в русском интерфейсе — «Готово для email») — для рассылок и маркетинговых писем: вместо flexbox и grid он выдаёт табличный HTML с инлайновым CSS — формат, который умеют отображать Gmail, Outlook и Apple Mail.

Вы выбираете его в настройках макета проекта, запускаете генерацию и получаете полноценный документ письма, а не веб-страницу.

Путь 1: сгенерировать HTML-код для письма

Это путь по умолчанию, и он подходит, когда письмо состоит в основном из текста, кнопок и простых изображений.

• Табличная вёрстка с инлайновым CSS. Никакого flexbox, grid и внешних таблиц стилей, которые почтовый клиент может вырезать.
• Настоящий текст. Заголовки и абзацы остаются текстом: их можно выделить, их читают скринридеры, и они видны даже при заблокированных картинках.
• Эффекты, которые почта не поддерживает, превращаются в изображения. Части макета без безопасного почтового аналога растрируются, а не теряются и не ломаются.
• Валидный документ XHTML 1.0 Transitional. Doctype, пространство имён и атрибуты нормализуются при экспорте, потому что именно это объявление Outlook, Gmail и Apple Mail обрабатывают стабильнее всего.
• Правка на месте. Меняйте тексты и заменяйте изображения в редакторе до экспорта.
• Индикатор размера. Карточка «Экспорт письма» показывает текущий размер HTML относительно лимита — вы увидите проблему раньше подписчиков.

Проблема 102 КБ: почему Gmail обрезает письма

Gmail обрезает любое письмо, HTML которого больше примерно 102 КБ. Получатель видит начало письма и ссылку «Показать полностью», а всё, что оказалось ниже обрыва, — часто призыв к действию и ссылка отписки — скрыто.

Насыщенный макет с множеством секций в виде кода может превысить этот лимит. MarkupGen предупреждает на отметке 100 КБ — в панели макета и ещё раз в окне тестовой отправки — и предлагает второй путь.

Путь 2: создать письмо из изображения

«Создать письмо из изображения» работает наоборот. Вместо описания макета кодом инструмент берёт само изображение макета, нарезает его на фрагменты и собирает их в лёгкую таблицу. В HTML остаются только таблица и ссылки на изображения, поэтому он обычно весит несколько килобайт, каким бы сложным ни был макет.

Как это работает:

1. Начните с изображения. Изображение макета проекта подгружается автоматически, либо загрузите другое — артборд Figma, баннер, афишу.
2. Нарисуйте кликабельные области. Выделите мышью рамку над каждой кнопкой, баннером или товаром. Перемещайте её, меняйте размер за любой край или угол, сдвигайте на 1 px стрелками или вводите точные координаты.
3. Добавьте ссылку и alt-текст. Каждой области задаются ссылка (http(s)://, mailto: или tel:), название и alt-текст.
4. Задайте ширину письма. По умолчанию 600 px; измените, если шаблону нужна другая.
5. Сгенерируйте. MarkupGen нарежет изображение и соберёт таблицу.
6. Превью, тест и экспорт. Проверьте превью для десктопа и мобильного (375 px), отправьте тестовое письмо, затем примените код к проекту или заберите его с собой.

Что инструмент берёт на себя в процессе:

• Режет только там, где нужно. Изображение разрезается по верхнему и нижнему краю каждой области. Соседние фрагменты без ссылок объединяются — меньше картинок и меньше запросов.
• Видимые линии реза. Жёлтые направляющие показывают, где именно пройдут разрезы, чтобы вы оставили их на пустом фоне, а не посреди строки текста.
• Сборка с точностью до пикселя. Позиции разрезов привязываются к целым пикселям в размере отображения, поэтому фрагменты складываются в исходное изображение без щелей и сдвинутых колонок.
• Фрагменты без потерь и уже на хостинге. Фрагменты сохраняются в PNG и загружаются за вас с абсолютными URL — ничего размещать самому не нужно. Изображение 2x остаётся чётким, потому что показывается в ширину письма, а не уменьшается.
• Разметка специально для Outlook. Фиксированные ширины, условные комментарии для движка Outlook на базе Word и сбросы, которые не дают появиться лишним зазорам между фрагментами.
• Только безопасные ссылки. Всё, что не http(s), mailto или tel, отклоняется, а область без корректной ссылки пропускается с предупреждением, а не уходит в письмо битой ссылкой.
• Области сохраняются вместе с проектом. Откройте инструмент позже, чтобы поправить ссылку или сдвинуть область, не рисуя всё заново.
• Щедрые лимиты. До 200 областей со ссылками и 400 фрагментов на письмо, изображения шириной до 4000 px.

Какой путь выбрать?

Практическое правило: начинайте со сгенерированного кода. Переходите к методу с изображением, когда индикатор размера превышает лимит или когда макет держится на шрифтах и эффектах, которые почтовые клиенты воспроизвести не могут.

Что можно сделать с результатом

Оба пути приводят в одну точку:

• Отправить тестовое письмо в реальный ящик прямо из редактора. Отправка блокируется, если в макете остался неназначенный текст или изображение.
• Посмотреть превью на десктопе и мобильном до отправки.
• Скопировать код, скачать файл .html или поделиться ссылкой на размещённую копию письма.
• Применить к проекту и сохранить, чтобы письмо жило вместе с остальным проектом.
• Работать на своём языке — интерфейс доступен на 10 языках.

Подробнее о тестировании — в статье как сгенерировать и протестировать HTML для email-рассылки.

Компромиссы — прямо и честно

Письмо-картинка не даётся даром. Текст в нём нельзя выделить, скопировать или найти поиском. Если клиент по умолчанию блокирует изображения, получатель видит только alt-текст, пока не разрешит их показ, — поэтому инструмент просит alt-текст для каждой области. Вёрстка фиксированной ширины, так что на маленьких экранах она масштабируется, а не перестраивается; проверьте мобильное превью. И превью в браузере — никогда не доказательство: всегда открывайте тестовое письмо в тех клиентах, которыми пользуется ваша аудитория.

Частые вопросы

Почему Gmail обрезает моё письмо? Gmail обрезает письма, HTML которых больше примерно 102 КБ, и прячет остальное за ссылкой «Показать полностью». MarkupGen показывает текущий размер и предупреждает на отметке 100 КБ.

Можно ли превратить картинку в HTML-письмо с кликабельными ссылками? Да. «Создать письмо из изображения» нарезает картинку, оборачивает каждую нарисованную область в свою ссылку и собирает изображение в таблицу, которую почтовые клиенты отображают надёжно.

Нужно ли самому размещать изображения? Нет. Фрагменты загружаются автоматически и подключаются по абсолютным URL, так что письмо работает сразу после отправки.

Будет ли письмо-картинка работать в Outlook? Результат использует табличную вёрстку, фиксированные ширины и условную разметку специально для Outlook. Но перед кампанией всё равно стоит отправить тест в ящик Outlook.

Можно ли изменить ссылки после генерации? Да. Области сохраняются вместе с проектом: откройте инструмент снова, поменяйте ссылку или сдвиньте область и сгенерируйте заново.

Это работает только с макетами Figma? Путь с генерацией кода начинается с макета Figma. Путь с изображением принимает и любую картинку, загруженную в проект Email Ready.

Если email-кампания ждёт в Figma — или в одной картинке — вы можете начать бесплатно и получить HTML, готовый к отправке, за несколько минут. Маркетинговым командам весь процесс описан в материале MarkupGen для маркетинговых команд.