menu

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

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

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

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

Письмо PlayStation
Что мне предлагает PlayStation? Не понимаю

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

Письмо PlayStation с картинками
Оказалось, тут такие скидки!

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

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

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

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

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

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

Вставка изображения в Paint 3D
Вставляем картинку, меняем размеры, сохраняем

Объем изображения и формат

Полезно
Гифки в email-рассылках Блестящие примеры гиф-анимации в рассылках

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

Название

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

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

Да:

  • EmailChief.png
  • Email_Chief.png

Нет:

  • Email шеф.png
  • Email Chief.png

Alt-текст и title

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

Отличие атрибута alt от атрибута title
Отличие атрибута alt от атрибута title

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

Письмо PlayStation с прописанным атрибутом alt
Alt помогает понять, что нам предлагают

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

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

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

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

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

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

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

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

Выбор параметров изображения в редакторе UniSender
Вкладка «Параметры»

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

Файловый менеджер в кабинете UniSender
Окно менеджера загрузки

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

Шапка рассылки Email-шефа
Email-шеф: начало положено

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

Добавление картинки в макет письма в редакторе UniSender
Добавляем новое изображение в макет письма

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

Работа с картинками в редакторе UniSender
Добавили картинки и переписали текст. Есть начало для нового письма

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

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

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

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

Параметры изображения в редакторе UniSender
Параметры изображения в редакторе

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

Заключение

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

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

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