Как сделать письмо в html формате с картинками

Как подготовить для рассылки красивое html-письмо с картинками

Потратив пару дней на изучение этого вопроса, я пришёл к выводу, что дело это непростое и лучше поручить его специалистам. Скомпоновать простое письмо они смогут за 1500 руб., обычное — за 5 т.р., нарисовать красиво, чтобы все обомлели — от 15 т.р.

Постановка задачи

Что у нас есть?

Грамотно свёрстанный html-файл с текстом письма и несколько графических файлов (png и jpg), используемых в оформлении. Наличие аттачей (вложений) роли не играет. Их можно будет прикрепить перед отправкой как к любому другому письму.

Что мы хотим получить?

Шаблон письма, содержащий декоративные картинки внутри, чтобы вручную разослать сравнительно небольшое количество со своего компьютера. В принципе, ограничений по количеству нет, просто для массовых рассылок существуют специальные сервисы.

Суть проблемы

Встроить декоративные картинки в письмо.
Если прицепить их обычным способом (как вложения), они просто будут «болтаться рядом», не участвуя в оформлении. Их можно будет посмотреть, но, обычно, в конце письма. Нам же нужно, чтобы они были на своих местах и в своих слоях.

Продвинутый пользователь компьютера скажет: «А чё париться? Размещаешь картинки в открытом доступе, а в письме, в src даёшь ссылку на них.»

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

Нюансы

В отличие от браузеров, отображающих, благодаря стандартам, html-документы примерно одинаково, почтовые программы больше внимания уделяют удобству работы с почтой, а содержимое писем показывают как хотят. Поэтому следует сразу смириться с тем, что ваше письмо везде будет выглядеть по-разному. Если всё-таки очень хочется, чтобы одинаково — сделайте монолитный джипег (в котором и текст, и оформление), но это считается дурным тоном.

Существует ряд рекомендаций по вёрстке, призванных снизить негативные последствия наплевательского отношения почтовых программ к современным html-стандартам, но это отдельная тема.

Решение

Выбор инструмента

На момент написания этой заметки (2015 год) я пользовался программой The Bat 6. Теоретически она предоставляет возможность создания html-шаблонов, но к авторскому коду относится без должного уважения и шаблоны получаются кривые. Почитав кучу форумов, выяснил, что встроить картинки один человек смог, но отображаются они не везде. источник.

Слышал, что некоторые делают это с Аутлуком. К сожалению, я испытываю глубокую неприязнь к Аутлуку, поэтому отверг этот вариант.

Продвинутый пользователь компьютера скажет: «А чё париться? В сети полно рассылочных сервисов.»

Да. Они платные и обращаться к ним имеет смысл, когда речь идёт о больших объёмах. Я попробовал несколько. Русских и не русских. Наиболее удобным с точки зрения создания письма мне показался UniSender. Но и он встраивает не картинки, а ссылки на них. Кроме того, в конец письма добавляет свою строчку, разрушая ваш дизайн и заставляя перфекционистов негромко материться.

Задачу помог решить Трахтенберг, также известный как почтовый клиент Mozilla Thunderbird. Но и он оказался изрядным любителем хореографии — без танцев с бубном не обошлось.

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

Инструкция

В имеющемся у нас html-файле письма заменяем все ссылки на картинки с относительных на абсолютные локальные, например для Windows:

Было: src="https://ad-res.ru/zakazat/images/header.jpg" Стало: src="D:\shablon\images\header.jpg"

В Тандербёрде создаём новое письмо.

Вставляем весь наш html (Меню -> Вставить -> HTML. ) Нажимаем «ОК».

В окне предварительного просмотра выделяем картинку,
затем: Меню -> Формат -> Свойства изображения.
Проверяем «Альтернативный текст» либо «Не использовать альтернативный текст», жмём «ОК».
И так для каждой картинки в нашем письме.

Затем: Меню -> Файл -> Сохранить как -> Шаблон

Казалось бы, вот оно — счастье. Но есть пара нюансов.

Нюанс N1

Когда мы вызываем: Меню -> Вставить -> HTML.
Тандербёрд позволяет нам вставить/редактировать только фрагмент кода, относящийся к текущему выделенному элементу. Когда мы вставляли html в пустое письмо, Тандербёрд взял всё, что было внутри тэга . Редактировать свойства самого (цвет фона, текста, ссылок, фоновое изображение) можно, вызвав: Меню -> Формат -> Цвета и фон страницы.

Нюанс N2

Если на странице присутствуют объекты, использующие фоновое изображение, описанное в стиле как

background-image: url('. ');

эти изображения необходимо поставить в конец страницы как единичного размера, провести манипуляции по встраиванию картинки в письмо (описано выше), сохранить шаблон, снова открыть на редактирование в режиме html, взять значение src нижних и вставить в соответствующие стили. Нижние удалять не стоит.

Смотри также

• Создание сайтов
• Креатив и дизайн
• Фирменный стиль
• Профессиональная фотосъемка
• Подготовка к выставке
• Принт-менеджмент
• Продвижение сайтов

Отправка писем в формате HTML с рисунками

Собственно хочется видеть письмо такого же вида как то что отправляет аутлук. Всё красиво. Но в описании класса MailMessage совершенно нет документации как такое письмо сделать. Если например написать вместо ссылки на картинку имя картинки находящейся во вложении, то она разумеется отобразится, но и будет отображаться в виде аттачмента (чего собственно не хочется).

Истоки

При попытке отправить письмо в формате HTML средствами .Net, без специальных действий, письмо отображается некорректно в почтовых системах и почтовых программах(не во всех), что неприятно. Собственно неприятность в том что картинки видны в виде вложений и иногда искажают вид письма.

Решение

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

Чтобы создать письмо с картинками которые не отображаются без вложений нужно создать альтернативное представление и загрузить туда картинки в виде ресурсов

в данном примере я приведу только код для создания альтернативного представления и добавления его к письму

var mailMessage = new System.Net.Mail.MailMessage(); var mailHTML = // определение тела письма со ссылками на изображения var images = new List(); // список для временного хранения созданных ресурсов картинок // тело письма нужно просмотреть и для каждого тега img создать объект System.Net.Mail.LinkedResource // и поместить его в список Images. В исходном документе нужно заменить ссылку на изображение (значение свойства src) // на выражение "cid:", где - значение свойства ContentId созданного объекта LinkedResource . // Следующая строка создаёт альтернативное представление на основе текста письма с изменёнными ссылками var htmlView = AlternateView.CreateAlternateViewFromString(mailHtml, Encoding.UTF8, MediaTypeNames.Text.Html); // Добавляем к представлению созданные нами файлы ресурсов картинок images.ForEach(htmlView.LinkedResources.Add); // И последнее добавляем созданное альтернативное представление к письму mailMessage.AlternateViews.Add(htmlView); // Дальше остаётся заполнить стандартные свойства письма и отправить 

Как сверстать email рассылку с картинками

Изображения способны не только максимально точно и наглядно передавать информацию. Правильно подобранная фотография или картинка может вызвать нужные эмоции, передать знания, побудить к действию и даже привести пользователя к покупке. Благодаря этому изображения, как формат контента, прочно закрепились в интернет-маркетинге. А в email-маркетинге всё чаще предпочтение отдается красиво сверстанным брендовым шаблонам email сообщений.

Какие же есть способы размещения картинок в письме, какие при этом могут возникать трудности и как их решить? Об этом далее в статье.

Зачем создавать HTML письмо с картинками?

Как вы думаете, какая рекламная рассылка сработает эффективнее: простое текстовое сообщение или HTML шаблон с красочными завлекающими изображениями? Определенно – вторая. И вот почему:

• вся информация, которую мы воспринимаем, на 90% является визуальной и обрабатывается в 60 000 раз быстрее обычного текста;
• для 46,1% людей основным показателем доверия к бренду является дизайн его сайта, рассылки и т.д.;
• визуальный контент повышает вовлеченность клиента. Например, Pinterest генерирует больше реферального трафика бизнес компаниям, чем Google+, LinkedIn и Youtube вместе взятые.
  источник данных blog.hubspot.com

Поэтому сегодня более 70% массовых почтовых рекламных кампаний оформляются в брендовый красивый шаблон в HTML формате. Именно использование HTML дает возможность вставить изображение в письмо (а также видео, gif файл и другие виды визуального контента).

Картинки не отображаются в письме:
решение проблемы

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

Чтобы картинки в письме не сыграли с вами злую шутку, важно изучить поведение активных подписчиков по отношению к вашей рассылке. Вы должны знать, какие почтовые клиенты они используют и какой тип изображений они чаще выбирают (кликают).

Проанализировав эти данные и собрав дополнительную информацию, вы поймете:

• на какие почтовые клиенты ориентироваться при создании картинок;
• какой должен быть оптимальный размер изображений для них;
• как они обрабатывают ALT-текст;
• и по какому принципу работает функция «не показывать картинки».

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

Существует два способа добавить изображения к сообщению в HTML формате:

1. Указать ссылку на картинку.
2. Прикрепить картинку к письму.

Ссылка на изображение. Загрузка с сервера

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

,
где значение «src» означает источник картинки.

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

• Наличие картинки никак не влияет на размер письма.
• Вставить ссылку на картинку – это быстро и просто.
• Можно изменить картинку на сервере и она изменится в письме.
• Ваша картинка уже имеет определенный размер (ширину, высоту), которая не изменится почтовыми сервисами.

• Некоторые почтовые клиенты, например, Outlook, могут блокировать изображения, вызываемые ссылками.
• Если ваш сайт не работает или перезагружается в момент прочтения письма, картинка не отобразится.
• Если просмотр будет осуществляться без подключения к интернету, изображение не загрузится. Это случается, когда получатель подключен к интернету через модемную связь и использует программу почтового клиента.

Как прикрепить изображение к письму

Прикрепить картинку к письму = вставить изображение непосредственно в электронное письмо.

Это означает, что к вашему электронному письму прикреплен файл с этим изображением, и размер электронного письма резко увеличится (на это необходимо обращать внимание, когда вы платите за пропускную способность).

В HTML коде письма это будет выражено строкой: .

• Изображение никуда не исчезнет из письма, что бы не происходило с вашим сайтом.
• Отображается всеми почтовыми программами.
• Вам не нужно вечно хранить все картинки на сервере.

• Вес письма значительно увеличится.
• Некоторые почтовые сервисы могут по умолчанию скрывать картинки, требуя от пользователя нажать «Показать картинки».

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

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

В противном случае, размеры картинки соблюдены не будут, что может негативно отразиться на общей верстке email сообщения:

При использовании HTML атрибута «src» вы можете прописать вручную ширину и высоту изображения. Для этого используют параметры width (ширина) и height (высота).

Примечание: при изменении размера картинки важно соблюдать пропорции. Чтобы не путаться в математических расчетах, можно добавить только один параметр – width (ширину). А нужную высоту почтовый сервис подберет автоматически при загрузке картинки.

Некоторые почтовые сервисы игнорируют прописанные вами вручную параметры картинки. Поэтому мы всё же советуем изначально подготовить изображение в нужных размерах, а потом добавлять его в письмо.

Вы, наверняка, обратили внимание на параметр alt=»Логотип» из примера выше.

Как правильно заполнять alt и title для картинок

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

Насколько развернуто описывать картинку в alt-тексте, вы решаете сами. Просто посмотрите на готовое письмо, представьте, что в нём не отобразилась ни одна картинка и подумайте, поймет ли читатель, о чем речь.

Советы email-маркетологов на эту тему просты и логичны:

• Не писать на изображениях важную информацию, без которой будет непонятен смысл рассылки.
• Не отправлять всё письмо единой картинкой.
• Не использовать больших фоновых изображений: у одной части получателей такой фон просто не будет виден, у другой — будет повторяться по ширине и высоте письма.

Вставить картинку в HTML письмо с помощью
ePochta Mailer

Если вы не знаете HTML и не планируете его изучать, рекомендуем воспользоваться специальным программным обеспечением, подобно ePochta Mailer. Такая программа для рассылок позволяет легко и быстро добавлять изображения в письмо, без «копания» в коде.

3 шага добавления картинки

В процессе создания шаблона в ePochta Mailer вы подошли к этапу, когда нужно добавить изображение.

1. Выбираете на панели программы меню «Вставить».
2. Внутри этого меню выбираете опцию «Рисунок».
3. В диалоговом окне, которое появится, с помощью кнопки «Обзор» загружаете изображение с компьютера в программу. Строку «Текст для замены» заполняете alt-текстом.

Работа с кодом: картинка средствами HTML

Если вы планируете загружать в письмо изображения со своего сайта, переходите на специальную вкладку “HTML код” в окне программы и добавляйте код по примеру

,

где src=»http://www.yoursite.com/images/picture.jpg» – источник картинки, абсолютная ссылка на изображение на вашем сайте.

И напоследок…

Установите все популярное программное обеспечение переписки по электронной почте на вашем компьютере — Outlook, The Bat!, Eudora, и т.д.

Перед отправкой рассылки, отправьте письмо на свои почтовые аккаунты. Удостоверьтесь, что при использовании различных почтовых клиентов, различных бесплатных почтовых учетных записей, различных web-браузеров и типов Интернет-подключений, ваше изображение правильно отображается.

Задайте вопрос специалисту технической поддержки

Верстка email писем и работа c изображениями в email-маркетинге

При создании Email рассылки необходимо заботиться не только о текстовой информации, но и о дизайне письма. При этом важными компонентами являются:

• единство стиля, для узнаваемости бренда;
• вёрстка html писем: подбор шрифтов и стилевого оформления текста при;
• правильное использование изображений.

На последнем пункте следует остановиться подробнее.

Почему так важно правильно использовать картинки?

Привлечь клиента и сконцентрировать внимание на ключевых моментах лучше всего помогают изображения. Исследования показывают:

• при использовании картинок CTR писем возрастает на 47%;
• оценка привлекательности материала увеличивается на 65%;
• использование логотипа и фирменных цветов в оформлении повышает узнаваемость бренда;
• люди более охотно кликают по картинкам.

В результате правильное использование изображений помогает сформулировать главную идею и увеличивает эффективность писем. Оптимальным является соотношение 40% картинок на 60% текста. Поэтому важно понимать, как красиво оформить письмо, используя изображения.

Прежде всего, нужно обратить внимание на тип подачи текста. Чаще всего используется табличная верстка email писем. Она максимально проста и, в отличие от блочной, позволяет выводить информацию в виде, задуманном при создании. Но нужно учитывать, что уже сегодня на мобильных телефонах письма просматривают более половины пользователей (77% на момент написания в 2018 году).

Верстка писем должна быть адаптивной, чтобы емейл рассылка корректно отображалась на десктопах и ноутбуках, а также телефонах с различным размером экрана.

Как сделать верстку адаптивной?

• Чтобы сообщение отображалось без искажений, ширину макета рекомендуется делать не более 600 пикселей, но не менее 500.
• Лучше задать также границы сообщения. Психологи считают, что письмо без означенных границ подсознательно воспринимается «незавершенным». Для этого достаточно выполнить заливку письма определенным цветом.
• Реальный размер изображения должен соответствовать выводимому без сжатия. Масштабирование ухудшает качество изображения на 40-60%.
• Файл не должен быть большим – мобильный интернет может «не справиться».

Какой формат изображений использовать?

Сегодня наиболее популярными при верстке писем являются форматы картинок JPEG, GIF, PNG и SVG. Однозначных преимуществ не имеет ни один, и при выборе стоит ориентироваться на выполняемые задачи. Перечислим их особенности.

• JPEG. Достоинства: отлично передает цвета в фотографии. Недостатки: нет анимации, сильно искажается при уменьшении, размер файла растет с увеличением изображения; неудобен для логотипов.
• GIF. Преимущества: передает анимированные изображения; сжимается, не теряя качества; хорошо передает текст; дает возможность создавать прозрачные участки. Недостатки: палитра ограничена (256 цветов); большой размер файла; плохо отображает фотографии.
• PNG. Преимущества: сжимается без потери качества; идеален для логотипов; передает тексты; может передавать прозрачность. Недостатки: слишком «тяжелый» файл; отсутствие анимации; не все браузеры его поддерживают.
• SVG. Преимущества: легко и без потерь масштабируется, имеет небольшой размер файла. Недостатки: не все почтовые клиенты поддерживают этот формат.

Шрифты для картинки

Рекомендуется при оформлении письма добавлять на изображение пояснительные надписи. При этом для выбранного шрифта нужно учитывать:

• размер – не меньше 14 пикселей;
• цвет – контрастный, выделяющийся на фоне;
• тип – без засечек – Tahoma, Verdana или Arial.

Оптимальный размер картинки

Размер при верстке html писем должен подбираться, исходя из следующих соображений:

• размер баннера (анимированного или нет) должен вписываться по ширине в шаблон и составлять 600х300 или 600х400рх;
• в качестве максимального размера чаще всего устанавливается 640х480рх;
• чтобы кнопки были удобны для нажатия, их размер не должен быть меньше 40-50рх;
• вокруг кнопок или кликабельных изображений необходимо сделать отступ;
• нужно учитывать размер файла, чтобы не увеличивать время загрузки и не испытывать терпение клиентов.

Верстка письма: как использовать картинку – изображением или фоном?

При верстке письма можно устанавливать различный тип фона, в частности, в виде картинки. Технически сделать это несложно, но могут возникнуть проблемы при просмотре. Фон не должен выделяться и мешать просмотру текста, должен вписываться в общий дизайн письма. И особенно аккуратно нужно применять для фона анимированные GIF-изображения.

Также стоит установить дополнительно цвет фона. Некоторые почтовые клиенты и браузеры не допускают установки картинки в качестве подложки.

Поскольку не все платформу поддерживают свойство background, в частности это касается Outlook, Вам следует быть осторожным при использовании фоновых изображений. Добавляйте соответствующее значение bgcolor – так любой текст будет отображаться для пользователей без фоновых изображений и\или с отключенными изображениями.

Хотя картинки (особенно анимированные) и увеличивают привлекательность и CTR письма, не переусердствуйте с их количеством в ущерб информативности.

Заполнение атрибутов тега

Не забывайте при установке картинки заполнить дополнительные атрибуты – особенно параметр ALT, в том числе, в логотипе. Если фото не отображается, на экране появится пустой участок и альтернативное описание. Причины:

• медленно грузится (плохое соединение);
• пользователь может отключить загрузку изображений для снижения трафика;
• ряд почтовых клиентов выводят изображения лишь из проверенных источников;
• при отключенной кликабельной картинке пользователь получит представление о том, куда ведет ссылка;
• если картинка в заголовке, в превью отобразиться текст ALT до открытия письма.

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

Особенности вписывания изображения в ячейку таблицы

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

Нужно ли устанавливать карты изображений?

Встраивание ссылок в изображения – полезный прием, ведь пользователи любят кликать по картинкам. Но следует соблюдать ряд правил:

• вокруг картинки нужно сделать отступ;
• необходимо запретить установку параметра border в ссылке, иначе может появляться синяя (бордовая после посещения) рамка вокруг картинки;
• когда ссылка встраивается в крупное изображение, его надо порезать в Photoshop так, чтобы кликабельная область была отдельным файлом изображения, который в коде будет заключен в якорную ссылку. Перед тем, как выбрать этот вариант, советуем обсудить с вашими клиентами преимущества линкования всего изображения – так вы получите гораздо большую кликабельную область.

Проблемы при рассылках на Gmail и Hotmail

В этих популярных почтовых клиентах часто проявляются различные эффекты при отображении рассылок. Иногда их стиль отличаются в различных браузерах – Safari, Chrome или Firefox.

В них изображения передаются блочными элементами, поэтому необходимо добавить не только в CSS, но и в тег параметр style=display:block. Если картинка встраивается в текст (это может быть значок после ссылки в тексте), необходимо указывать style=display:inline.

Фоновые изображения, атрибуты alt и изображения в Gmail и в Hotmail – аспекты, которым следует уделить особое внимание при верстке электронных писем.

• При добавлении изображения, у него обязательно должен быть прописан атрибут border=0, а если изображение обернуто ссылкой, то для тега ссылки должно быть прописано свойство border:none (если не сделать последнего, то в некоторых клиентах вокруг картинки может отображаться синяя рамка).
• Формат gif лучше всего подходит для штрихованной графики и простых графических элементов.
• Формат jpeg лучше всего подходит для насыщенных, многослойных и фотографических элементов. Качество изображений, экспортируемых в формате jpeg¸ как правило, должно составлять 60% от изначального качества. В некоторых случаях вам прийдется увеличить качество до 75% для устранения помех изображения.
• Формат png лучше всего подходит для изображений с высокой прозрачностью.

Для встраивания изображений в текст (например, изображение стрелки после текстовой ссылки), вы должны включить style=display: inline; instead of display:block;

Здесь будет ссылка со стрелкой в конце

Обзор Stripo – платформы для создания HTML-писем без навыков верстки

Краткие выводы

Подведем некоторые итоги по вставке картинок в письма:

1. Картинки улучшают внешний вид и результативность рассылок при правильном использовании.
2. Верстка должна быть адаптивной, чтобы страница отображалась на экране мобильного устройства (без дополнительного сжатия).
3. Формат используемых картинок должен соответствовать поставленным задачам (преимущественно .PNG или .JPEG).
4. Шрифт подписи на картинке должен быть крупным, четким и контрастным.
5. Картинка должна иметь размер, соответствующий шаблону (до 600рх шириной).
6. При использовании картинки в качестве фона нужно учитывать видимость на ней текста, а также обеспечить альтернативное цветовое заполнение.
7. Обязательно следует указать альтернативный текст (небольшого размера) в теге ALT.
8. При вписывании картинки в ячейку таблицы необходимо соблюдать ряд правил.
9. При установке на картинку ссылки требуется предусмотреть правила линковки и убрать окантовку при наведении.
10. Нужно учитывать особенности стилевого оформления в Gmail и Hotmail.

При соблюдении этих рекомендаций ваши рассылки станут более эффективными и прибыльными!

Еще подборка полезных ссылок:

• Правила вёрстки email-писем – статья на хабре.
• Основы профессиональной верстки электронных писем.
• Инструмент проверки разметки в письмах