10 Дек 2012
Как правильно оформлять картинки в письме

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

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

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

Если вы хотите передавать в письме настроение и красиво преподнести ваш товар, то одним из важных элементов дизайна писем для рассылок являются картинки.

Почему в письмах важны изображения?

  1. Картинки усиливают эффект вашего письма. Перед прочтением читатель выделяет образы, акцентируя на них внимание, только потом начинает читать о чём письмо. Чтобы создать хороший образ – картинка лучший помощник.С помощью правильно подобранных картинок можно подчеркнуть главную идею письма и создать правильный образ.
  2. Люди любят нажимать на картинки в письмах, так воспользуйтесь этим — расположите под картинкой ссылку на ваш сайт. Проследите, чтобы ссылка была не слишком длинной и располагалась в одной строке — в противном случае она может оказаться нерабочей.
  3. Реклама товара работает лучше, если представлена наглядно в виде картинок. Ведь лучше один раз увидеть, чем 100 раз прочитать.
  4. С помощью изображений легче сделать ваше письмо/бренд узнаваемым. Можно добавить корпоративные изображения, логотипы, фотографии от кого адресуется письмо — клиенту будет приятно видеть с кем он общается.  
  5. Хитрость в том, чтобы узнать прочитал подписчик письмо или нет, лучше размещать картинки на нашем сервисе. Это позволит увидеть когда и для какого сообщения подписчик загрузил картинки, а следовательно прочитал письмо. (Многие клиенты автоматически позволяют загружать картинки. )

Подводные рифы оформления изображений в письмах:

  • Следует обратить внимание на то, что большинство почтовых клиентов блокируют изображения, из-за чего письма отображаются некорректно. Общепринятой практикой в мире электронных рассылок является добавление к каждой картинке альтернативного текста (известного как «ALT тег» или «ALT текст») для изображений. Этот элемент задаёт текст, который будет отображаться в письме вместо не загрузившегося изображения из-за плохой связи, неработающей ссылки, настроек браузера и т.д.

    АLT текст особенно удобен, когда дизайн вашего письма преимущественно состоит из изображений — это помогает передать смысл изображения, если оно не загрузилось.

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

    Пример письма с картинкой без ALT текста

  • Когда подписчик видит в письме ALT текст — это сигнал, что ему нужно нажать «показать картинки»

    Пример картинки с ALT текстом в письме

  • «Большие» картинки это плохо. Большие можно трактовать по-разному: Во-первых, размер в байтах. Чем больше изображение, тем медленне оно будет загружено, допустим используя мобильный интернет. Во-вторых, размер в точках (пикселях) Лучше всего чтобы реальный размер изображения  был равен тому, который отображается в письме. Часто бывает так, что картинка 2000x2000 пикселей сжимается до 200x200 пикселей. Такие сжатия всегда неуместны. Картинка загружается медленнее и теряет в качестве.
  • Не используйте картинки 1х1 пикселей. Иногда для заполнения пустого места удобно использовать прозрачную картинку 1x1 пиксель. Такие изображения могут привести к попаданию в спам. Обойти эту проблему очень просто, используйте вместо этого картинку 10x10 пикселей :).
  • При неумелом использовании картинка может стать врагом: многие грешат тем, что при составлении письма всё полностью заполняют картинками. Возможно, для реализации всех творческих идей это и хорошо, но с другой стороны — если изображения не загрузятся, читатель может получить просто набор ссылок.  Используйте текст для важной информации, а изображения, чтобы усилить смысл сказанного или привлечь внимание читателя.

    Пример картинки в письмеПример картинки с ALT текстом

  • Названия блоков лучше делать текстовыми, чтобы они не исчезали при пересылке.
  • Если картинки находятся в одном блоке — проследите, чтобы они были одинаковыми по размеру и везде был ALT текст.

    Плохо:

    Картинки с разными размерами в одном блоке

    Хорошо:

    Пример, как правильно должны выглядеть картинки

Важные моменты при работе с альтернативным текстом:

1. Установить ALT текст для изображений в сообщении электронной почты очень просто — это стандартная часть синтаксиса HTML, в теге изображения:

<img width="400" height="149" src="logo.jpg" alt="Текст">

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

2. Если сделать ALT текст слишком описательным — подписчику не нужно будет кликать на «отобразить картинки»

3. Экспериментируйте с альтернативным текстом, добавив немного встроенных CSS, чтобы изменить шрифт, цвет, размер и фон ALT текста, например:

<img src=”logo.jpg” width=”400″ height=”149″ alt=”Текст” style=”font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px;”>

ALT текст с разным шрифтом

ALT текст с разными стилями

Как правильно должны выглядеть картинки

4. Во всех почтовых клиентах, поддержка стилизованного ALT текста зависит от используемого браузера. Например, он будет виден при просмотре письма в Gmail в Firefox, а при просмотре Gmail в Internet Explorer — нет.

Как отображаются картинки в Gmail в Internet Explorer

Как отображаются картинки в Gmail в Firefoxх

5. ALT текст со ссылкой на изображение в некоторых почтовых клиентах может быть подчеркнутым или выделяться синим цветом. Yahoo! подчеркивает ALT текст в ссылках изображений, в то время как Gmail подчеркивает и игнорирует указанные цвета, подставляя по умолчанию синий

ALT текст со ссылкой на изображение

6. Во многих почтовых клиентах альтернативный текст исчезает, ​​как только размер или длина текста превышает ширину и/или высоту изображения. Поэтому, лучше придерживаться коротких описаний и меньшего размера шрифта, чтобы ALT текст не пропал.

FireFox:

ALT текст в браузере FireFox

Opera:

ALT текст в браузере Opera

Chrome:

ALT текст в браузере Chrome

7. Если вы применяете стили к ALT тексту, проверяйте, как ссылки будут отображаться в разных почтовых клиентах и не ломают ли они стили. Помните, что «фокусы со стилями» иногда улучшают внишний вид письма, но всегда расчитывайте на худший вариант, когда альтернативный текст будет показан обычным текстом вместо картинки.

Конечно, хорошо если читатели добавили вас в адресную книгу или выбрали «Всегда отображать картинки от …», но всё же лучше перестраховаться и оформить письмо, придерживаясь этих простых советов. Не забывайте, что письма перенасыщенные информацией, картинками и текстом, могут посчитать спамом, а нам ведь этого не нужно, правда?:)

Читать - полезно, а делать - прибыльно

Добавить комментарий

ewpsxigq
02:15, 2 декабря 2014

gxyyu2xl

icze9fg9

insurance

px9ojwno

di4z4fr5

ewpsxigq
10:09, 4 декабря 2014

wys960dn

y8m9xp7h

insurance

af8ax9oj

fyph1266

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