Как переделать письмо-картинку в редактируемое HTML-письмо

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

Ниже — ручная сборка в Mailvex по материалам вашей кампании. Мы не будем автоматически распознавать изображение или обещать точное восстановление его слоёв. Вы разберёте содержание, создадите самостоятельные блоки и проверите HTML через свою систему отправки. Инструкция опирается на документацию и текущий исходный код от 24 октября 2026 года; реальную тестовую отправку мы не выполняли.

Что именно меняется после переделки

Письмо с единственной картинкой уже может быть HTML-документом. Если весь баннер обёрнут ссылкой, он также может быть кликабельным. Проблема в другом: нарисованные буквы и кнопка остаются пикселями. Задача — перенести важное содержание в настоящие текстовые элементы и отдельную ссылку, сохранив фотографию или иллюстрацию там, где она полезна.

Логотип, фотография товара или выразительная иллюстрация могут остаться картинками. Не нужно превращать каждый визуальный элемент в код. Вынесите из изображения то, что читатель должен понять и сделать: заголовок, предложение, существенные условия и действие. Один этот шаг не доказывает полную доступность письма или одинаковое отображение во всех почтовых клиентах.

1. Разберите исходный баннер на содержание

Сначала выпишите текст из своего макета и проверьте его у владельца кампании. Отдельно запишите реальные условия, адрес кнопки и обязательный футер. Если в баннере есть цена, срок или ограничение предложения, их нельзя потерять при упрощении дизайна. Небольшие надписи внизу изображения часто содержат именно такие важные сведения.

Лучше взять исходную фотографию отдельно от баннера. Если осталась только ваша плоская картинка, подготовьте подходящий фрагмент или новый визуал во внешнем графическом редакторе либо исключите необязательное фото. Блок изображения Mailvex не извлекает фотографию, не распознаёт текст и не разрезает готовый баннер автоматически.

2. Подготовьте короткий пример содержания

Возьмём вымышленную кампанию магазина с новой коллекцией для рабочего стола. Здесь нет скидки, придуманной даты или обещания результата. Используйте структуру как образец и замените названия, свойства и адрес своей проверенной информацией:

• Тема: «Новая коллекция для рабочего стола».
• Заголовок: «Обновите своё рабочее место».
• Текст: «Посмотрите новую коллекцию настольных органайзеров и аксессуаров. Выберите предметы, которые подходят вашему пространству и привычкам».
• Кнопка: «Посмотреть коллекцию» — с реальной страницей вашей коллекции.
• Фото: ваш снимок товаров. Пример alt: «Настольный органайзер и подставка для ручек», если именно они изображены.

Тема задаётся в вашей системе отправки отдельно; заголовок внутри дизайна её не заменяет. Если фактическое предложение требует условий покупки или доставки, добавьте их обычным текстом. Не оставляйте демонстрационный URL, символ # или адрес, который существует только в примере.

3. Создайте свой проект в Mailvex

Откройте каталог, выберите простой одноколоночный шаблон и нажмите «Использовать этот шаблон» на его странице. Нужны аккаунт с подтверждённым email и доступная квота экспорта. Созданная копия станет вашим проектом. Дайте ей узнаваемое имя и сохраните исходный баннер отдельно как ориентир, а не как обязательную часть нового письма.

4. Соберите редактируемые блоки

Удалите из нового проекта блок с полным рекламным баннером, если он там есть. Слева откройте «Блоки» и добавьте нужные элементы. Сохраните подходящий логотип и обязательные сведения отправителя. Не дублируйте весь старый баннер под новой текстовой версией: это возвращает мелкие надписи и создаёт повтор содержания.

• «Заголовок + текст»: введите заголовок в поле «Заголовок». Абзац можно оставить в поле «Текст» того же блока.
• Если абзац должен перемещаться отдельно, оставьте текстовую часть предыдущего блока пустой и добавьте «Текст». Не заполняйте оба места одинаковым содержанием.
• «Изображение»: добавьте только полезное фото или иллюстрацию вместо целого письма-картинки.
• «Кнопка по центру»: заполните «Текст кнопки» и «URL кнопки». В примере это «Посмотреть коллекцию» и ваш настоящий адрес.

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

5. Добавьте фотографию и осмысленный alt

Выберите блок «Изображение», нажмите «Открыть медиабиблиотеку» и выберите существующий файл либо нажмите «Загрузить». Используйте подходящий PNG или JPEG из своих материалов. Если фото слишком вытянуто, заранее подготовьте более подходящий фрагмент; не уменьшайте весь текстовый макет ради его высоты.

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

У чисто декоративной картинки без действия и уникального смысла можно оставить alt пустым: блок поддерживает пустое значение. Но не объявляйте декоративным изображение, которое единственное сообщает важный факт. Видимость и длина отображаемого alt зависят от клиента, поэтому условия предложения всё равно должны находиться в обычном тексте.

6. Проверьте видимость и узкий экран

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

Переключайте ширину предпросмотра значками монитора и телефона. Проверьте переносы заголовка, длину строки, отступы и подпись кнопки. В хорошем результате текст подстраивается под доступную ширину, а не выглядит как уменьшенный плакат. Проверьте отсутствие обрезанных строк и горизонтального прокручивания. Это браузерный предпросмотр, не эмуляция Gmail или Outlook.

7. Скопируйте HTML и проверьте его структуру

Для статического образца удалите незаполненные демонстрационные переменные и ненужные ESP-условия. У соответствующих блоков выключите «Условие показа (ESP)» → «Показывать по условию». Сохраните настоящий футер и обязательные служебные ссылки. В рабочей кампании персонализация, отписка и условия должны соответствовать вашей системе отправки.

• Откройте «Экспорт HTML», оставьте «Формат переменных (ESP)» равным mailvex и проверьте остаток квоты.
• Нажмите один раз «Скопировать HTML». Сохраните уже скопированный полный код в текстовый .html-файл; дополнительное скачивание не требуется.
• Найдите в исходнике заголовок, основной абзац и подпись кнопки. Они должны быть текстом, а не существовать только внутри файла изображения.
• Проверьте адрес кнопки, alt, URL фотографий и обязательную подпись вашего плана. Удаление такой подписи не является частью переделки.

Попытка выделить надпись полезна, но не окончательна: некоторые клиенты распознают текст на картинках. Поэтому проверяйте исходный HTML и поведение полученного сообщения вместе. Профиль mailvex не подключает отправщика; демонстрационные данные предпросмотра не становятся данными получателя.

Режим изображений Mailvex сохраняет размещённые URL, в том числе возможные внешние зависимости. Они должны открываться без входа в редактор. Режим «Свои» требует разместить файлы на вашем сервере; изменение базового URL не выполняет загрузку. Оставляйте доступными ресурсы, на которые уже ссылаются отправленные письма.

8. Проверьте письмо через своего отправщика

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

Не предполагайте, что все клиенты одинаково блокируют картинки. Проверьте полученное письмо на телефоне, на компьютере и в нужной версии Outlook. Затем используйте настройку тестового почтового клиента для блокировки удалённых изображений, если она доступна. В Mailvex нет отдельного проверенного переключателя такого предпросмотра. Не удаляйте реальные файлы и не отключайте всю сеть: это испортит проверку ссылок.

Без фотографии должны оставаться понятными отправитель, предложение, существенные условия и подпись основного действия. При разрешённых клиентом переходах проверьте конечный адрес кнопки. Отдельная ссылка уменьшает зависимость от картинки, но не обходит защитные настройки клиента, способные блокировать ссылки. Alt или кликабельная область исходного баннера тоже могут сохраниться — поведение зависит от программы.

Зафиксируйте результат приёмки

Дополнительно оцените контраст и порядок чтения. Если доступна программа экранного доступа, проверьте, что она получает осмысленные текст и ссылки, без повторения баннера и имён файлов. Такая проверка полезна, но сама по себе не является полным аудитом доступности.

Типичные ошибки после переделки

Сохраните проект, исходный HTML и результат контрольной отправки как одну версию. Следующая правка в Mailvex не обновит ранее вставленный код автоматически. Если позже сравниваете варианты кампании, сохраняйте одинаковое предложение и сопоставимые условия отправки; оценивайте клики и нужные действия, а не только открытия. Эта инструкция не устанавливает прирост показателей.

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

Можно оставить большой hero или логотип?

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

Поможет разрезать баннер или увеличить разрешение?

Это может изменить размещение или качество картинки, но не превращает нарисованные буквы в редактируемые абзацы. Для этого текст и действие нужно создать отдельными элементами.

Можно начать с импорта скриншота?

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

HTML-текст — это plain-text версия письма?

Нет. Здесь речь о текстовых элементах внутри HTML-письма. Отдельная текстовая MIME-часть зависит от возможностей и настроек вашей системы отправки; её автоматическое создание не предполагается.

Такое письмо гарантированно не попадёт в спам?

Нет. Замена баннера не заменяет настройку отправщика, репутацию и работу с получателями. Универсального соотношения картинок и текста, которое гарантирует доставку, здесь нет.

Появятся ли переводы автоматически?

Нет. Для каждой нужной версии замените текст и проверьте переносы, кнопки и условия. Наличие статьи на нескольких языках не создаёт переводы ваших писем.