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

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

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

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

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

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

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

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

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

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

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

Название

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

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

Да:

• EmailChief.png
• Email_Chief.png

Нет:

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

Alt-текст и title

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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