menu

Как правильно вставить картинку в письмо

Чтобы письмо выглядело идеально.

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

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

Сообщения на почте с отключенными картинками выглядят так:

Сообщение без картинок
Что мне предлагает PlayStation? Не понимаю

Без фотографий смысл письма не понятен. Включаю картинки и вижу:

Письмо с картинками
Так-так, скидочки на Metro Exodus? Интересно

Прочитал это письмо и купил несколько игр со скидкой. Вывод: картинки рулят.

Но PlayStation могли продать и без картинок, если бы прописали атрибут alt. В статье я расскажу об этом и других основах работы с изображениями в редакторе UniSender.

Общие требования к изображениям

Размеры картинки для email-рассылки

Вставляйте картинку в том размере, в котором она должна отобразиться в письме. Да, ширину и длину можно менять через атрибуты HTML и стили CSS. Но если старенький Outlook пользователя их не поддерживает, картинки отобразятся в исконном виде. Фото размером 1500 на 1500 пикселей, которое уменьшили до размеров 100 на 100, займёт всю область просмотра.

Вывод: готовить изображение к вставке нужно заранее. Изменить ширину и длину можно в любом графическом редакторе. Я делаю это в простом Paint 3D.

Размер картинки в Paint 3D
Изменил размер виджета (его вы, кстати, встретите дальше). Теперь он занимает меньше места — страница со статьёй будет быстрее прогружаться

Размер и расширения файлов. В редактор UniSender можно загрузить изображения до 500 Кбайт. Съедобные форматы: jpg, png и gif. С gif-анимациями нужно быть осторожным: их отображают не все почтовые сервисы. Например, старенький Outlook покажет только первый кадр анимации. Рекомендуем запустить тестовую рассылку на разные почтовики, чтобы проверить, как они отображают gif.

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

Название изображения будет добавлено ссылкой в HTML-код страницы. Кириллица и пробелы не поддерживаются кодировкой языка – браузер не поймёт, как отобразить такой элемент вёрстки.

Да:

EmailChief.png

Email_Chief.png

Нет:

Email шеф.png

Email Chief.png

Alt-текст и title

Alt – текст, который появится вместо незагруженной картинки. Title – текст, который увидит пользователь, если наведёт курсор на картинку.

Тег alt появился, когда я отключил картинки в письме
Тег alt появился, когда я отключил картинки в письме
Title появляется, если навести курсором на картинку
Title появляется, если навести курсором на картинку

PlayStation в своей рассылке забыли прописать атрибут alt. Если бы прописали — письмо выглядело бы так:

Письмо Playstation с alt-тегами
Теперь хотя бы понятно, какие игры участвуют в распродаже

Не ленитесь прописывать точные и понятные атрибуты alt. Учтите, что подписчики будут ориентироваться по ним, если в письме не отобразятся картинки.

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

Создать письмо можно в блочном редакторе или редакторе шаблонов. В первом вы делаете макет «с нуля», во втором — изменяете уже готовый дизайн.

Предположим, нам нужно сделать рассылку для проекта под названием «Email-шеф». Начинаем с выбора шаблона:

Шаблон для рассылки Email-шефа
Шаблон для рассылки Email-шефа

Чтобы поместить картинку в тело письма, выберите область изображения и нажмите «Настройки».

Выбор картинки в редакторе UniSender
Меняем картинку из шаблона на свою

Перейдите во вкладку «Параметры» и выберите изображение.

Как добавить картинку в письмо
Как добавить картинку в письмо

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

Так выглядит окно диспетчера файлов
Так выглядит окно диспетчера файлов

Вот что получилось:

Email-шеф: начало положено
Email-шеф: начало положено

Если нужно добавить новую картинку, то перенесите блок «Изображение» или «Картинка с текстом» в макет.

Блочный редактор UniSender
Вставляем новую картинку в шаблон

Поколдуем над другими элементами письма и получим:

Шапка для рассылки готова
Шапка для рассылки готова

Настройки изображений

В меню «Настройки» можно не только загрузить новую картинку, но и изменить ее стиль.

Вкладка «Стиль» в редакторе UniSender
Вкладка «Стиль»

Пройдемся по основным параметрам.

Поле Аналог HTML или CSS За что отвечает
Имя Атрибут title Определяет, что увидит пользователь, если наведёт курсором на картинку
Цвет фона Стиль background-color Задаёт фон за изображением. Формат hex.
Фоновое изображение Стиль background-image Вместо заливки цветом можно поставить на фон изображение
Рамка картинка Стиль border Добавляет к картинке рамку и задаёт её цвет
Отступ блока Стиль padding Смещает картинку относительно краёв контейнера
Горизонтальное и вертикальное выравнивание Vertical-align, text-align Выравнвивает картинку по краям контейнера или по центру

Имя

Аналог HTML или CSS Атрибут title
За что отвечает Определяет, что увидит пользователь, если наведёт курсором на картинку

Цвет фона

Аналог HTML или CSS Стиль background-color
За что отвечает Задаёт фон за изображением. Формат hex.

Фоновое изображение

Аналог HTML или CSS Стиль background-image
За что отвечает Вместо заливки цветом можно поставить на фон изображение

Рамка картинка

Аналог HTML или CSS Стиль border
За что отвечает Добавляет к картинке рамку и задаёт её цвет

Отступ блока

Аналог HTML или CSS Стиль padding
За что отвечает Смещает картинку относительно краёв контейнера

Горизонтальное и вертикальное выравнивание

Аналог HTML или CSS Vertical-align, text-align
За что отвечает Выравнвивает картинку по краям контейнера или по центру

Во вкладке «Параметры» можно вставить новую картинку, прописать альтернативный текст (атрибут alt), привязать к картинке ссылку и задать общую высоту блока.

Заключение

4 совета о том, как использовать картинки в письмах:

Полезное
Gmail обрезает письма Как не потерять конверсию и open rate
  1. Всегда прописывайте alt-текст. Если изображения не отобразятся, пользователь все равно поймет смысл письма. Для некоторых alt-текст станет маячком о том, что нужно включить отображение картинок.
  2. Не злоупотребляйте картинками. Если все они не отобразятся, то alt-текст не спасет. А письма, которые состоят только из картинок, могут не пройти через спам-фильтры почтовых служб.
  3. Не делайте текст картинкой. К такому приёму прибегают в исключительных случаях. Например, когда Gmail обрезает письма.
  4. Не начинайте письмо с картинки, которая займёт весь экран. Если она не отобразится, то пользователь скорее всего закроет письмо.

Картинки важны, но некоторые пользователи их специально отключают, чтобы экономить трафик. Тестируйте письма – оценивайте, как они отображаются без изображений. Если смысл сообщения понятен без картинок — все ОК, рассылку можно отправлять.