Нужна помощь?
Задайте вопрос специалисту технической поддержки
Изображения способны не только максимально точно и наглядно передавать информацию. Правильно подобранная фотография или картинка может вызвать нужные эмоции, передать знания, побудить к действию и даже привести пользователя к покупке. Благодаря этому изображения, как формат контента, прочно закрепились в интернет-маркетинге. А в email-маркетинге всё чаще предпочтение отдается красиво сверстанным брендовым шаблонам email сообщений.
Какие же есть способы размещения картинок в письме, какие при этом могут возникать трудности и как их решить? Об этом далее в статье.
Как вы думаете, какая рекламная рассылка сработает эффективнее: простое текстовое сообщение или HTML шаблон с красочными завлекающими изображениями? Определенно – вторая. И вот почему:
источник данных blog.hubspot.com
Поэтому сегодня более 70% массовых почтовых рекламных кампаний оформляются в брендовый красивый шаблон в HTML формате. Именно использование HTML дает возможность вставить изображение в письмо (а также видео, gif файл и другие виды визуального контента).
Бывают случаи, когда приходит на почту электронное письмо в формате HTML, а изображения в нем не отображаются вовсе или отображаются неправильно. При таком раскладе, нет никакого смысла в использовании HTML, оплате дополнительной пропускной способности и работы проектировщиков, если ваши получатели не будут видеть то, что они, как предполагается, должны видеть.
Чтобы картинки в письме не сыграли с вами злую шутку, важно изучить поведение активных подписчиков по отношению к вашей рассылке. Вы должны знать, какие почтовые клиенты они используют и какой тип изображений они чаще выбирают (кликают).
Проанализировав эти данные и собрав дополнительную информацию, вы поймете:
Существует два способа добавить изображения к сообщению в HTML формате:
Ссылка на изображение в ваших электронных письмах работает аналогично тому, как изображения появляются на любом сайте. Вы должны добавить строку к вашему HTML коду, которая определяет источник изображения для отображения.
Пример:
<img src="http://www.yoursite.com/images/picture.jpg">,
где значение «src» означает источник картинки.
Обратите внимание, что в примере указана абсолютная ссылка, и такой она должна быть. Относительная ссылка просто не сработает и изображение не загрузится с сервера.
Плюсы:
Минусы:
Прикрепить картинку к письму = вставить изображение непосредственно в электронное письмо.
Это означает, что к вашему электронному письму прикреплен файл с этим изображением, и размер электронного письма резко увеличится (на это необходимо обращать внимание, когда вы платите за пропускную способность).
В HTML коде письма это будет выражено строкой: <img src="picture.jpg">.
Плюсы:
Минусы:
Идеальный вариант, чтобы картинка, которая подгружается или внедряется в письмо, уже имела нужный размер. Тогда, в случае, если картинка не отобразится, её место займет пустой белый прямоугольник такого же формата – а значит верстка текста и письма в целом не пострадает.
Пример:
В противном случае, размеры картинки соблюдены не будут, что может негативно отразиться на общей верстке email сообщения:
При использовании HTML атрибута «src» вы можете прописать вручную ширину и высоту изображения. Для этого используют параметры width (ширина) и height (высота).
Пример кода:
<img src="http://www.yoursite.com/images/picture.jpg" width="250" height="95" alt="Логотип">
Некоторые почтовые сервисы игнорируют прописанные вами вручную параметры картинки. Поэтому мы всё же советуем изначально подготовить изображение в нужных размерах, а потом добавлять его в письмо.
Вы, наверняка, обратили внимание на параметр alt="Логотип" из примера выше.
ALT- текст – это фактически информация для пользователя о том, что должно быть на картинке, которую он по какой-то причине не видит.
Пример:
Насколько развернуто описывать картинку в alt-тексте, вы решаете сами. Просто посмотрите на готовое письмо, представьте, что в нём не отобразилась ни одна картинка и подумайте, поймет ли читатель, о чем речь.
Советы email-маркетологов на эту тему просты и логичны:
Если вы не знаете HTML и не планируете его изучать, рекомендуем воспользоваться специальным программным обеспечением, подобно ePochta Mailer. Такая программа для рассылок позволяет легко и быстро добавлять изображения в письмо, без «копания» в коде.
3 шага добавления картинки
В процессе создания шаблона в ePochta Mailer вы подошли к этапу, когда нужно добавить изображение.
Если вы планируете загружать в письмо изображения со своего сайта, переходите на специальную вкладку “HTML код” в окне программы и добавляйте код по примеру
<img src="http://www.yoursite.com/images/picture.jpg">,
где src="http://www.yoursite.com/images/picture.jpg" – источник картинки, абсолютная ссылка на изображение на вашем сайте.
Установите все популярное программное обеспечение переписки по электронной почте на вашем компьютере — Outlook, The Bat!, Eudora, и т.д.
Перед отправкой рассылки, отправьте письмо на свои почтовые аккаунты. Удостоверьтесь, что при использовании различных почтовых клиентов, различных бесплатных почтовых учетных записей, различных web-браузеров и типов Интернет-подключений, ваше изображение правильно отображается.