Найти тему
Академия Hard&Soft

Письма с картинками – как правильно оформить?



При подготовке шаблонов дизайнеры должны быть готовы к тому, что большинство картинок будет заблокировано почтовыми сервисами по умолчанию. В результате письмо не доносит мысль, да и просто смотрится коряво.
Чтобы избежать блокировки изображений необходимо соблюсти баланс между текстом и графикой. Также существует альтернативный текст, который поддерживают почтовые сервисы. На сегодняшний день это лучший способ предоставить подписчикам информацию, когда картинки блокируются.
Чтобы добавить альтернативный текст, нужно прописать атрибут к тегу изображения:
<img alt="insert alt text here" src="image.jpg" width="250" height="250" />
Сделать это желательно для всех картинок в письме.
Еще один лайфхак — цветной фон. Использование его во всем письме позволит сохранить структуру и дизайн.
Самое неприятное последствие заблокированных картинок — невозможность получателя совершить действие, Call to Action. Кнопки на основе графики также блокируются, и конверсия падает. На помощь прийдут «неубиваемые кнопки»: они состоят из текста в сочетании с цветом фона, стилизованного под кнопку с изображением. Простой HTML атрибут, который хорошо подходит для большинства почтовых служб.
<table border="0" cellspacing="0" cellpadding="0" width="80%">
С 2019 года на рынок вышли технологии AMP — с ними письма стали по-настоящему интерактивными: можно создавать галереи с прокруткой изображений прямо в письме, прикреплять формы, карточки товара с возможностью покупки из писем.
Попробуйте протестировать эти методы, и вы убедитесь, что ваши письма останутся читабельными при любых блокировках.

Обо всех нюансах и секретах успешного email-маркетинга рассказывает Юлия Рожкова в своем курсе
"Стратегия email-маркетинга и ее реализация".