Как восстановить своё email-письмо по скриншоту и подготовить HTML

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

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

Что получится восстановить по изображению

На скриншоте видны заголовки, абзацы, кнопки и расположение основных элементов. Распознавание использует эти признаки, чтобы предложить блоки письма и перенести видимый текст. При этом мелкие подписи могут прочитаться неверно, а сложная композиция — превратиться в более простую структуру. Совпадение с картинкой до пикселя не является результатом, на который следует рассчитывать. Число распознаваемых блоков ограничено, поэтому у длинного письма отдельно проверьте наличие всех разделов и конца макета.

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

1. Подготовьте подходящий скриншот

Используйте изображение собственного письма, на котором читается текст и виден нужный порядок блоков. Желательно сохранить письмо целиком, включая подвал. Если в кадр попала только верхняя часть, отсутствующие разделы придётся собрать самостоятельно. Не увеличивайте маленькое размытое изображение в надежде вернуть утраченные буквы: сначала найдите более качественную копию.

• Подготовьте PNG, JPG или WebP размером до 10 МБ. Это форматы, которые принимает окно импорта.
• Обрежьте панели браузера, список входящих сообщений и другие части экрана, не относящиеся к макету.
• До загрузки удалите имена получателей, адреса электронной почты, номера заказов и другие личные или конфиденциальные данные. Скриншот отправляется на обработку.
• Отдельно соберите фотографии товаров, логотип, иконки и актуальные адреса страниц, которые понадобятся при доработке.
• Запишите, что нужно изменить относительно старой рассылки: предложение, цену, срок действия, кнопку и содержание подвала.

До распознавания проверьте доступные AI-лимиты и условия своего тарифа. Лимиты AI и экспорта — отдельные ограничения: успешное создание черновика само по себе не подтверждает доступность нужного экспорта. Актуальные условия смотрите в своём аккаунте.

2. Создайте черновик в Mailvex

• Войдите в аккаунт с подтверждённым адресом электронной почты. На главной странице аккаунта нажмите «Создать письмо». В окне «Новое письмо» выберите «Импорт из скриншота».
• Перетащите подготовленный файл в область загрузки или нажмите на неё и выберите изображение.
• В поле «Название письма» задайте понятное внутреннее название, например «Повтор товарной рассылки — новая акция». Это поможет отличать новый черновик от старого письма.
• Нажмите «Распознать» и дождитесь результата. Не считайте сообщение о процессе подтверждением завершённого импорта.
• Посмотрите список распознанных блоков. Отметка слота картинки означает место для изображения, которое нужно будет заполнить.
• Нажмите «Открыть в редакторе» и начните проверку полученного письма.

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

3. Проверьте структуру и содержание

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

• Проверьте название бренда, заголовок, текст предложения и подписи кнопок. Особое внимание уделите цифрам, валюте, процентам и датам.
• Убедитесь, что абзацы не потерялись и не объединились в неподходящий блок. Исправьте переносы и лишние строки.
• Посмотрите, соответствует ли размер текста его роли: основной текст должен читаться без увеличения, а второстепенная подпись не должна перекрывать предложение.
• В левой панели найдите «Язык письма» и выберите нужный язык. У нового черновика по умолчанию выбран русский. Перепроверьте весь подвал: добавленный служебный текст тоже может оказаться русским. Импорт не выполняет автоматический перевод.
• Задайте подходящие тему и прехедер. Внутреннее название черновика, тема во входящих и краткий текст рядом с ней решают разные задачи.

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

4. Доработайте старое товарное письмо: пример

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

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

5. Добавьте изображения и реальные ссылки

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

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

6. Посмотрите узкую версию и экспортируйте HTML

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

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

После проверки сохраните письмо и используйте доступный в вашем тарифе экспорт HTML. При переносе кода в сервис рассылок проверьте результат ещё раз: изображения, адреса, переменные и отписку. Отправьте тест средствами выбранной платформы и откройте его в важных для вашей аудитории почтовых клиентах. Просмотр в браузере не является эмуляцией Gmail или Outlook и сам по себе не подтверждает одинаковое отображение во всех программах.

Когда выбрать другой способ

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

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

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

Будет ли результат точной копией?

Распознавание создаёт основу для редактирования. Сравните текст и структуру со скриншотом, затем исправьте шрифты, отступы и сложные секции.

Что делать, если исходных картинок нет?

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

Можно ли вместо импорта отправить весь скриншот одной картинкой?

Такой вариант не возвращает редактируемые тексты и отдельные кнопки. Чтобы менять цену, содержание и адреса переходов, используйте блоки письма.