Работа c изображениями в e-mail-маркетинге

in Маркетинг

шаблон электронного письмаИнформация пригодится для верстальщиков и e-mail-маркетологов.

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

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

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

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

Графика: ALT атрибуты

Всегда используйте ALT атрибут в любом теге <img>, который включает текст. ALT атрибут должен совпадать с контентом изображения, но не должен быть слишком длинным.

Проблемы в Gmail и Hotmail

Изображения должны отображаться как блочные элементы, чтобы обеспечить корректную визуализацию в Gmail и Hotmail для пользователей браузеров Firefox, Chrome, Safari. Просто добавьте style=»display:block;» для каждого изображения.

<img scr=»images/image.png» width=»200″ height=»50″ style=»display:block;»>

Для встраивания изображений в текст (например, изображение стрелки после текстовой ссылки), вы должны включить style=»display: inline;» instead of display:block;.<a href=»http://site.com»>

Читайте также  Обзор мастер-класса по эффективному email-маркетингу для бизнеса

Здесь будет ссылка со стрелкой в конце <img scr=»arrow.gif» width=»12″ height=»12″ style=»display:inline; border:0;»></a>

Графика в тегах <td>

Существует две вещи, которых следует опасаться в ситуации, когда тег <td> содержит тег <img>.

  1. Если изображение короче 19 пикселей, вам необходимо указать значения height и line-height тега <td>, а также тега изображения.

<tr><td width=»30″ height=»5″ style=»line-height:5px;»> <img scr=»banner.jpg» width=»30″ height=»5″ > </td></tr>

(Здесь следует оговориться, что называя файлы как в приведенном примере «banner» или «promo», Вы рискуете быть заблокированы браузерными блокировщиками рекламы, типа AdBlock).

  1. Если тег <img> — последний или единственный элемент тега <td>, закрывающий тег </td> должен идти сразу после тега <img> без пробелов. Некоторые браузеры могут расценить любую форму пробела (пробел, табуляция и т.д.) как желаемый пробел – в результате вы получите пробел после изображения.

Карты изображений и встраивание ссылок в изображения

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

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

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

2 анекдота в рассылке Гарантированно!
А также получайте всевозможные бонусы, бесплатные билеты и скидки на конференции!