Обычное текстовое письмо может выполнять свою функцию, но рассылка с картинками воспринимается намного лучше и доносит информацию эффективнее. Хотите, чтобы вашим подписчикам было легко дочитывать ваши сообщения – научитесь подбирать изображения и делать красивую верстку писем.
Можно ли обойтись без картинок?
Без картинок письмо будет выглядеть так:
А вот красиво оформленная брендированная рассылка:
Второе письмо выглядит намного эффектнее. Почему? Вот неполный список функций, которые выполняет картинка в теле письма:
- позволяет быстро схватить смысл письма
- привлекает внимание
- дополняет информацию
- демонстрирует товар
- иллюстрирует ситуации
- вызывает эмоции
Иллюстрированные рассылки работают лучше, кроме логики, это показывают и исследования:
- 90 % информации, которую мы воспринимаем, – визуальная, мозг обрабатывает ее в 60 000 раз быстрее текста
- 40 % людей лучше реагируют на картинки, чем на буквы
- 46,1 % готовы доверять компании, которая красиво оформляет рассылку
- 12 % дополнительного трафика получают материалы с инфографикой
Изображения – не только красивый атрибут в теле письме, но самостоятельный мощный маркетинговый инструмент:
- картинки удерживают внимание на время, необходимое для принятия решения – читать письмо или нет, это решающие 3 секунды для вовлечения новых подписчиков
- фирменный стиль письма повышает узнаваемость бренда
- на кликабельные картинки охотнее кликают, чем на обычные ссылки
- правильное изображение усиливает текст и общий эффект письма
- иллюстрированные рассылки повышают лояльность потенциальных клиентов и увеличивают продажи
Чтобы изображения делали рассылку эффективнее, нужно правильно их подбирать и оформлять.
Каким должно быть изображение для email-рассылки
Существует несколько общих требований к картинкам для рассылки.
Маркетинговая составляющая
Первое впечатление о рассылке человек получает, увидев Hero Shot – главное изображение письма. По этой картинке он должен сразу понимать, о чем текст.
Критерии хорошего главного баннера:
- с первого взгляда понятно, о чем идет речь
- образы простые и хорошо читаются
- использованы фирменные цвета или цвета, связанные с чувствами и эмоциями, или какое-то интересное живое изображение, которое цепляет внимание и иллюстрирует идею письма
- яркое и оригинальное исполнение
Размеры изображения
Лучше использовать исходники нужного размера. То есть не менять длину и ширину картинки для письма при верстке с помощью HTML и CSS, а подогнать изображение заранее в редакторе – Canva, Photoshop, Figma. У такого решения несколько плюсов:
- картинка отобразится корректно в исходном виде у пользователей Outlook
- если изображение не отобразится, на его месте будет прямоугольник такого же размера, и верстка не «съедет»
- не придется прописывать размеры в коде через «src»
- картинка не потеряет в качестве при сжатии и не замедлит загрузку страницы
Для письма лучше использовать изображения весом не более 5 Мб. Чем легче картинка – тем быстрее прогрузится письмо. А в некоторых редакторах есть свои ограничения для этого параметра. Оптимально, если картинка будет не тяжелее 500 Кбайт.
Формат изображения
Наиболее популярные форматы:
- jpg – подходит для фото, изображений с более чем 256 цветами, небольших файлов, но теряет качество при сжатии или масштабировании
- png – подходит для текста, лого и небольших изображений, поддерживает прозрачный фон, сжимается без потери качества, но много весит и не подходит для больших изображений
- gif – в дополнение к возможностям png еще и анимируется, но не поддерживает больше 256 цветов
- svg – гибкий формат для файлов небольшого размера, хорошо масштабируется, но его поддерживают не все почтовые клиенты
Когда определитесь с форматом, можно запустить тестовую рассылку и посмотреть, как электронное письмо отображается в разных почтовых сервисах.
Адаптивная верстка
Есть несколько требований к валидным изображениям в теле письма, чтобы его было удобно читать на десктопной и мобильной версиях:
- ширина не более 600 пикселей
- важная информация и призыв к действию размещаются в верхней части письма ― в мобильной версии письмо становится длиннее
- большие кнопки призыва к действию – от 44 х 44 пикселей, чтобы можно было кликнуть пальцем по экрану телефона
- адекватное количество изображений – чтобы не перегружать письмо
- небольшое количество текста на картинке, если он есть, который легко читать с мобильного устройства
- отдельно размещенная важная текстовая информация – так как картинка может не отобразиться
- наличие описания (alt) – на случай, если изображение не прогрузится
Описание
Лучше заранее прописать к картинке фон для alt-текста, который пользователь увидит вместо пустого поля, и alt-текст, чтобы передавал смысл изображения.
Текст, который отображается на месте картинки, если она не прогрузилась, прописывается через атрибут «alt». Он должен быть точным и понятным, так как поможет подписчикам ориентироваться в письме.
Через атрибут «title» прописывается описание – текст, который появляется, если навести курсор на картинку. Это дополнительная информация, которая не играет решающей роли в письме.
Как вставить картинку в тело письма
Есть несколько способов добавить изображения в рассылку.
Вставить картинку в письмо ссылкой
Она укажет путь к файлу. Ссылка прописывается в отдельной строке HTML-кода через «src» и имеет следующий вид:
<img src="http://www.site.com/images/picture.jpg">
Здесь «img» – атрибут, через который прописывается картинка, с помощью «src» указывается путь, в кавычках прописывается ссылка. Дополнительно можно прописать значения высоты и ширины, но лучше сразу задать их при создании картинки.
При таком методе наличие изображения не влияет на вес письма, фото можно корректировать в источнике, оно изменится рассылке, а вот размеры картинки сохранятся независимо от почтового сервиса.
Некоторые почтовые клиенты подгружают изображения, вставленные с помощью ссылок, только после согласия пользователя. Также картинка может не отобразиться, если сервер, на котором она хранится, в данный момент недоступен или отключен интернет.
Прикрепить изображения для рассылки к письму
Картинку можно вставить в электронное письмо, прикрепив файлом. В коде появится строка следующего вида:
<img src="picture.jpg">
В этом случае валидная картинка является автономной, отображается в любом случае и во всех почтовиках, ее не нужно заливать к себе на сервер.
Но при этом сильно увеличивается вес письма, а некоторые почтовые сервисы спрашивают разрешение у пользователя, прежде чем показать изображение.
Вставить картинку в текст письма в Sendsay
В сервисе рассылок Sendsay можно создать рассылку с изображениями несколькими способами:
- в HTML-редакторе
- в блочном редакторе
- выбрать базовый или тематический шаблон в галерее
В HTML-редакторе вы создаете письмо с нуля и прописываете картинку ссылкой.
В блочном редакторе – выбираете, из каких элементов «построить» письмо, загружаете изображение в соответствующий блок. Можно просто перетащить картинку в окошко.
В готовом шаблоне уже расставлены блоки, остается только добавить в них информацию. Выберите блок с изображением, кликните по нему, сверху появится панель редактора, в которой есть значок ссылки. Кликните на него и вставьте ссылку на картинку в появившемся окошке.
Фото также можно прикрепить перетаскиванием.
Если кликнуть на картинку, слева появятся настройки расположения и окошко для альтернативного текста.
Сверху над шаблоном письма есть значки устройств, и можно посмотреть, как письмо и изображение в нем будут выглядеть на десктопе, планшете и телефоне.
Изображение в теле письма не отображается – что делать?
Картинки в письме могут отображаться неправильно или не отображаться совсем. Если такое происходит, обратите внимание на следующие моменты:
- подходит ли формат изображений почтовикам, которые используют подписчики
- как в них работает функция «не показывать картинки»
- какой должен быть оптимальный размер фото
- как почтовые клиенты отображают alt-текст
Чтобы настроить изображения в рассылке, нужно понять, какие почтовые сервисы используют подписчики и как читатели ведут себя с письмами. Частично проблемы решаются на этапе тестирования рассылки.
На что обратить внимание при оформлении писем
Создавая дизайн email-рассылки, придерживайтесь следующих принципов:
- Необходимое количество изображений в письме. Картинок не должно быть слишком много, письмо не должно состоять только из иллюстраций. Это уменьшит риск попадания под спам-фильтры, некорректного отображения картинок.
- Наличие alt-текста. Подписчик поймет смысл письма, даже если картинки не отображаются, или что нужно включить отображение.
- Отсутствие картинок-текстов. Помещать важную текстовую информацию на картинку можно в крайнем случае, например, если почтовик обрезает письма.
- Адекватное отображение письма без картинок. Главное изображение не должно занимать весь экран, иначе пользователь, у которого отключены фото для экономии трафика, может просто закрыть письмо; смысл послания должен быть понятен и без картинок.
- Адаптивная верстка. Используйте для рассылки адаптивный шаблон, чтобы письмо хорошо читалось на разных устройствах.
